AngularJS 개발 가이드 2: AngularJS 초기화 프로세스

자동 초기화
ng-app 명령을 응용 프로그램의 탭 노드에 넣으십시오. AngularJS가 전체 프로그램을 자동으로 실행하려면 탭에 놓으십시오.예:
AngularJS는 DOMContentLoaded 이벤트가 터치될 때 실행되며,ng-app 명령을 통해 응용 프로그램의 루트 역할 영역을 찾습니다.ng-app 명령을 찾으면 AngularJS는 다음을 수행합니다.
(1) 명령과 관련된 모듈을 불러옵니다.이것은 optional ModuleName 모듈을 나타냅니다.(2) 응용 프로그램의 주입기(injector)를 만듭니다.(3) g-app 명령을 가진 라벨은 루트 노드로 그 중의 DOM을 컴파일합니다.

<!doctype html>
<html ng-app="optionalModuleName">
    <body>
        I can add: {{ 1+2 }}.
        <script src="angular.js"></script>
    </body>
</html>

수동 초기화
만약 당신이 초기화 과정을 주동적으로 제어할 필요가 있다면, 당신은 수동으로 안내 프로그램을 실행하는 방법을 사용할 수 있습니다.

<!doctype html>
<html xmlns:ng="http://angularjs.org">
    <body>
        Hello {{'World'}}!
        <script src="http://code.angularjs.org/angular.js"></script>
        <script>
            angular.element(document).ready(function() {
            　　angular.bootstrap(document);
            });
        </script>
    </body>
</html>

페이지와 모든 스크립트를 불러온 후에 HTML 템플릿의 루트를 찾으십시오. 보통 문서의 루트입니다.angular를 호출합니다.bootstrap 방법으로 템플릿을 실행 가능한 데이터 양방향 귀속 프로그램으로 컴파일합니다.
HTML 컴파일러
HTML은 정적 페이지를 작성할 때 서식을 제어하는 선언적 구조를 많이 사용합니다.예를 들어 어떤 내용을 가운데에 두려면 align="center"의 속성을 내용 가운데에 있는 요소에 추가하면 된다.이것이 바로 성명식 언어의 강점이다.
그러나 성명식 언어도 유력하다. 그 원인 중 하나는 브라우저가 새로운 문법을 식별할 수 있도록 사용할 수 없기 때문이다.예를 들어, 너는 내용이 중간에 있지 않고 왼쪽에서 3분의 1에 이르면, 이때 그것은 할 수 없다.그래서 우리는 브라우저가 새로운 HTML 문법을 배울 수 있도록 하는 방법이 필요하다.
AngularJS의 HTML 컴파일러는 브라우저로 하여금 새로운 HTML 문법을 식별하게 할 수 있다.HTML 요소나 속성에 행동을 연결시키고 사용자 정의 행동을 가진 새로운 요소를 만들 수 있습니다.AngularJS는 이 동작을 "명령"으로 확장한다고 합니다.
컴파일러는 AngularJS에서 제공하는 서비스로 DOM을 옮겨다니며 관련 속성을 찾습니다.전체 번역의 과정은 두 단계로 나뉜다.
4

컴파일: DOM을 두루 돌아다니며 모든 관련 명령을 수집하여 링크 함수를 생성합니다

링크: 명령어에 역할 영역을 연결하고 동적 보기를 생성한다.역할 영역 모델의 변경 사항은 뷰에 반영되며 뷰의 사용자 작업도 역할 영역 모델에 반영됩니다.이것은 작용역 모델을 당신의 업무 논리에서 유일하게 관심을 가져야 할 것으로 만들었다

예를 들어ng-repeat는 데이터 집합의 모든 항목에 대응하는DOM 요소를 복제합니다.전체 컴파일링 과정을 컴파일링과 링크 두 단계로 나누는 방법은 전체적인 성능을 개선시켰다. 복제된 템플릿은 모두 한 번만 컴파일되고 각자의 모델 실례에 링크하면 되기 때문이다.
명령은 연관된 HTML 구조가 컴파일 단계에 들어갈 때 수행해야 하는 작업을 나타냅니다.명령어는 원소의 이름, 속성, css 클래스 이름, 주석에 쓸 수 있습니다.다음은 몇 가지 기능이 같은ng-bind 명령을 사용하는 예가 있다.

<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->

명령은 본질적으로 컴파일러가 관련 DOM으로 컴파일될 때 실행해야 하는 함수일 뿐이다.
다음은 원소를 끌어당길 수 있도록 하는 지령입니다. 원소의draggable 속성을 주의하십시오.

<!doctype html>
<html ng-app="drag">
  <head>
    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
    <script>
       angular.module('drag', []).directive('draggable', function($document) {
          var startX=0, startY=0, x = 0, y = 0;
          return function(scope, element, attr) {
             element.css({
                 position: 'relative',
                 border: '1px solid red',
                 backgroundColor: 'lightgrey',
                 cursor: 'pointer'
             });
             element.bind('mousedown', function(event) {
                startX = event.screenX - x;
                startY = event.screenY - y;
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
             });

             function mousemove(event) {
                 y = event.screenY - startY;
                 x = event.screenX - startX;
                 element.css({
                    top: y + 'px',
                    left:  x + 'px'
                 });
             }

            function mouseup() {
                 $document.unbind('mousemove', mousemove);
                 $document.unbind('mouseup', mouseup);
            }
         }
      }); 
    </script>
  </head>
  <body>
    <span draggable>Drag ME</span>
  </body>
</html>

draggable 속성을 추가하면 모든 HTML 요소가 이 동작을 수행할 수 있습니다.우리의 이러한 개선의 아름다움은 우리가 브라우저에 새로운 능력을 주었다는 데 있다.개발자가 HTML 규칙에 익숙하기만 하면 브라우저가 새로운 행위의 새로운 문법을 자연스럽게 이해할 수 있는 능력을 사용했다.
angular 보기 네트워크에는 많은 템플릿 시스템이 있는데 예를 들어handlerbars이다.그들 대부분은 '정적 문자 템플릿과 데이터를 연결하여 새로운 문자를 만들고 innerHTML을 통해 페이지 요소에 삽입합니다.' 이다.이것은 데이터의 어떠한 변화도 데이터가 템플릿과 다시 결합하여 새로운 문자를 생성하고 DOM에 삽입해야 한다는 것을 의미한다.AngularJS와 달리 AngularJS 컴파일러는 문자열 템플릿이 아닌 명령이 있는 DOM을 사용합니다.이것은 링크 함수를 되돌려줍니다. 이 함수와 작용역 모델이 결합하면 동적 보기를 생성합니다.이 보기와 모델의 귀속 과정은 투명하다.개발자는 보기 업데이트에 관한 어떤 작업도 할 필요가 없다.그리고 프로그램에서도 innerHTML을 사용하지 않았습니다.더욱 특별한 것은 Angular의 지령은 문자열 형식의 귀속을 사용할 수 있을 뿐만 아니라 행동을 지시하는 구조체, 예를 들어ng-repeat도 사용할 수 있다.

파이팅!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

AngularJS의 ng-options best practise

쓸데없는 말은 하지 말고 바로 코드를 찍어라. 리소스를api에 직접 전달하지 말고 문자열이나 정형(예를 들어 귀속된ng-model="selected")을 권장합니다 angular에서 생성된 의value가 무엇인지, ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS 개발 가이드 2: AngularJS 초기화 프로세스

좋은 웹페이지 즐겨찾기