1. html tag에 ng-app 표시.
<html ng-app>
2. script 소스 삽입
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
</script>
여기에 있는 콜백이 html이 모두 로드된 후에, 브라우저로부터 호출되면
앵규러는 ng-app 지시어를 찾게 된다. 찾게되면 DOM의 최상위에 부트스트랩을 건다.
단계적으로 보면,
A.dependency injection을 위한 인젝터들이 생성되고
B. 인젝터는 root-scope를 생성하고
C. ng-app의 루토요소를 시작점으로 삼아 하위요소들을 컴파일한다.
3. ng 기본 문법 : 참고사이트Curran (10번 exam)
| |
<html ng-app> <head> <meta charset="utf-8"> | |
| <title>Angular.js Example</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> | |
| <script> | |
| function NameCtrl($scope){ | |
| $scope.firstName = 'John'; | |
| $scope.lastName = 'Smith'; | |
| } | |
| </script> | |
| </head> | |
| <body ng-controller="NameCtrl"> | |
| First name:<input ng-model="firstName" type="text"/> | |
| Last name:<input ng-model="lastName" type="text"/> | |
| Hello {{firstName}} {{lastName}} | |
| </body> | |
| </html> |
4. ng-repeat 예제
<script>
functin phoneListControler($scope)
{
$scope.phones=[
{"name":"Gal5",
"num":"010-2222-3333"
},
]
}
</script>
<body ng-controller="phonListController">
<div ng-repeat="phone in phones">
<p >이름: {{phone.name}} </p>
</div>
