본문 바로가기

앙귤러JS

[앙귤러] BootStrap

Angular <script> Tag

 

script 태그는 페이지 아래에 있다. script 태그가 페이지 끝에 위치한 것은 어플리케이션이 로그되는 시간의 향상을 위한 것이다. 왜냐면 HTML 로딩은 angular.js의 로딩에 의해서 blocked 되어지지 않는다.

Choose :angular-[version].js 는 읽을 수 있는 파일이며, 디버깅과 개발에 적합하다.

Choose :angular-[version].min.js 읽기 힘들며 압축된 파일이다. 생산성에 알맞다.

ng-app은 어플리케이션 가장 상위 root에 위치시키며 <html>이 일반적이다.

  <html ng-app>

  IE7을 지원해야 한다면 id="ng-app"를 추가할 수 있다.

<html ng-app id="ng-app">

  만약 구버젼의 ng: directive 문법을 사용하고 html에 xml-namespace를 포함시키는 방법도 있다. 이건 좀 구식인 방법이라서 오래 이 방법을 사용할 것을 권장하는건 아니다.

<html xmls:ng="http://angularjs.org">

  자동 초기화

angular는 DOMContentLoaded event 나 angular.js script의 검증될 때 자동으로 초기화된다. readyState는 ‘complate'로 set된다. 'complate'의 포인트는 어플리케이션에 지정된 ng-app directive를 찾는 것이다.ng-app directive를 찾게 되면 angular는 아래와 같은 행위를 한다.

directive와 관련된 모듈을 읽는다.

어플리케이션 injector를 생성한다.

DOM을 컴파일하고 ng-app directive를 처리한다.

수동 초기화

자동 초기화 프로세스를 넘어 더 컨트롤 할 필요가 있을때는 수동 초기화를 사용한다. 자동 초기화를 대신해서 수동 bootstrapping 방법을 사용할 수 있다. 예를 들어 angular가 페이지를 컴파일하기 전에 어떤 별개의 내용을 실행시킬 팔요가 있거나 스크립트를 포함시켜야 할 때에 사용할 수 있다.

  노트는 우리가 제공해오던 어플리케이션 모듈의 이름이다. /angular.bootstrap 함수의 두 번째 매개 변수로 Injector에 로드될 application 모듈의 이름을 제공하고 있다. 단언컨대, angular.bootstrap을 즉석에서 모듈을 생성하지 않는다. 반드시 파라미터를 변수로 전달하기 전에 어떤 사용자 모듈을 생성해야 한다.

  다음은 코드가 따라야할 순서이다.

페이지나 페이지의 모든 코드가 읽어진 이후에 angularJS 어플리케이션의 root Element를 찾는다.

Element를 컴파일하기 위해 api/angular.bootstrap을 호출한다.

 

계속하면 늘긴 느나 ㅡ.ㅡ

 

'앙귤러JS' 카테고리의 다른 글

$Watche와 ng-change는 뭐가 다르지 ?  (0) 2016.06.20
[앙귤러] 앙귤러(angular)는 ?  (0) 2013.11.28