Automatic Initialization
- HTML Document의 이벤트 중에서 contentLoaded(DOM 구성이 끝남을 알려주는 이벤트 리스너)에 의해서 AngularJS는 실행된다.
- AngularJS는 DOM 내에서 사용된 지시자(Directives)를 찾는다. ng로 시작되는 요소나 속성
- 지시자중에서 ng-app을 찾으면, module이라고 구성하고, injdector라는 객체를 생성한다.
- injector는 AngularJS 내의 객체들을 문자열로 된 이름과 객체를 쌍으로 묶어서 소유한다.
AngularJS의 모든 구성 요소들은 injdector를 통해서 다른 객체들을 사용할 수 있다.
- 지시자 처리를 위해서 $compile 객체와 $rootScope 객체가 생성된다.
- $rootScope : 모듈이라는 공간 내의 모든 데이터의 공유를 위한 공간
- $compile : DOM과 $rootScope의 LINKING을 통해서 결과물 만든다.
- HTML Document의 이벤트 중에서 contentLoaded(DOM 구성이 끝남을 알려주는 이벤트 리스너)에 의해서 AngularJS는 실행된다.
- AngularJS는 DOM 내에서 사용된 지시자(Directives)를 찾는다. ng로 시작되는 요소나 속성
- 지시자중에서 ng-app을 찾으면, module이라고 구성하고, injdector라는 객체를 생성한다.
- injector는 AngularJS 내의 객체들을 문자열로 된 이름과 객체를 쌍으로 묶어서 소유한다.
AngularJS의 모든 구성 요소들은 injdector를 통해서 다른 객체들을 사용할 수 있다.
- 지시자 처리를 위해서 $compile 객체와 $rootScope 객체가 생성된다.
- $rootScope : 모듈이라는 공간 내의 모든 데이터의 공유를 위한 공간
- $compile : DOM과 $rootScope의 LINKING을 통해서 결과물 만든다.
<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>Manual Initialization
수동으로 초기화 할 수도 있다.
위의 에제와는 다르게 ng-app이라는 지시자는 없지만,
angular.bootscrip을 이용해서 document에 myApp이라고 지정할 수 있다.
<!doctype html>
<html>
<body>
<div ng-controller="MyController">
Hello {{greetMe}}!
</div>
<script src="http://code.angularjs.org/snapshot/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
</body>
</html>
댓글 없음:
댓글 쓰기