원본 주소 : http://code.angularjs.org/1.0.2/docs/guide/concepts
계속하다. .
1. 요약
이 기사는 주로 각도 구성 요소에 대한 개요를 제공하고 어떻게 작동하는지 설명합니다. 목록은 다음과 같습니다.
2. 시작
Angular가 시작된 방법은 다음과 같습니다 (다음 예제의 차트 참조).
1. 브라우저는 HTML을로드하고 HTML 태그를 DOM 객체로 변환합니다.
2. 브라우저는 Angular.js의 스크립트를로드합니다.
3. Angular는 Domcontentloaded 이벤트를 기다립니다.
4. Angular Application 경계 범위를 지정하는 데 사용되는 지침 인 NG-APP에 대한 검사;
5. NG-APP이 지정된 모듈 (아마도 ng-app = "someApp")이있는 경우 구성 $ 인젝터로 사용됩니다.
6. $ 인젝터는 $ Compile Service (서비스) 및 $ Rootscope를 만드는 데 사용됩니다.
7. $ Compile Service는 "Compile"(Traversal과 같은 종류의 신비한 일)으로 사용하여 해당 $ Rootscope에 연결합니다.
8. ng-init이 지시문은 해당 범위에서 이름 속성을 생성하고 "키티"값을 할당합니다.
9. "{{name}}"의 값을 표현식에 삽입하고 마지막으로 "hello Kitty!"를 표시하십시오.
<! doctype html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <hod> <div ng-init = "name = 'kitty'"> hello {{name}}! </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> </body> </html>오늘 밤 누군가와 무언가를 논의했기 때문에 진행 상황이 느 렸습니다. . . 그것은 다시 문장입니다. . . 지금은 늦었습니다. . . Angular, 광고 후 만나요!
======================================================================
광고가 완료되었습니다. . . 계속하다
3. 런타임
이 차트와 다음 예제는 브라우저 이벤트 루프 (모든 시간 처리 함수 및 타이머로 실행되는 기능뿐만 아니라 큐 구조로 배열되어 무한 루프를 사용하여 대기열에서 실행까지의 함수를 지속적으로 추출하는 방법을 설명합니다. 이것은 이벤트 루프입니다. http://wiki.nodejs.tw/nodejs_from_scratch/javaScript-yunodejs/2-1-event-loop).
1. 브라우저 이벤트 루프는 이벤트가 도착하기를 기다립니다. 이벤트는 사용자 상호 작용 (DOM 이벤트), 타이머 이벤트 (Settimeout), 네트워크 이벤트 (서버 응답, XHR 등)에서 비롯됩니다.
2. 이벤트 콜백 함수가 실행되기 시작합니다. 여기서 우리는 JavaScript 컨텍스트 (컨텍스트)를 입력합니다. 이 콜백 함수는 DOM 구조를 수정할 수 있습니다.
3. 콜백 함수가 실행되면 브라우저는 JavaScript 컨텍스트를 종료하고 DOM 변경에 따라보기를 다시 그리기합니다.
각도는 자체 이벤트 처리 루프를 생성하여 일반적인 JavaScript 흐름을 수정합니다. 이것은 JavaScript를 전통적인 및 각도 실행 컨텍스트로 나눕니다. 각도 실행 컨텍스트에서 수행되는 모든 작업에는 각도 데이터 바인딩, 예외 처리, 속성 관찰 및 기타 능력이 있습니다. JavaScript에서 $ apply ()를 사용하여 각도 실행 컨텍스트를 입력 할 수 있습니다. 그러나 대부분의 장소 (Angular) (예 : 컨트롤러, 서비스)에서 이벤트를 처리하는 지침은 $ apply에 전화 할 수 있습니다. $ Apply가 수동으로 호출되는 시나리오는 일반적으로 맞춤형 이벤트 핸들러를 구현하거나 타사 라이브러리에서 콜백을 처리 할 때입니다.
1. 스코프를 호출하여 각도 실행 컨텍스트를 입력하십시오. $ apply (atmulusfn). 자극은 각도 실행 컨텍스트에서 실행하려는 함수 (범위를 인수로 포함 함) 또는 각도 법적 표현입니다.
2. Angular는 자극을 실행하며, 이는 일반적으로 응용 프로그램 상태를 변경합니다.
3. Angular는 $ 다이제스트 루프로 들어갑니다. 이 루프는 $ Evalasync 큐와 $ 시계 목록을 처리하는 두 개의 작은 루프로 구성됩니다. $ digest 루프는 모델이 안정되기 전에 반복을 계속 반복합니다. 즉, $ atalasync 큐가 비어 있고 $ Watch 목록에 의해 변경 사항이 감지되지 않습니다.
4. $ evalasync 큐는 현재 스택 프레임이 현재 스택 프레임에서 점프해야한다는 수단으로 사용됩니다 (스택 프레임은 스택에서 현재 실행중인 기능에 할당 된 영역 (또는 공간)을 참조합니다. 통과 된 매개 변수, 반환 주소가 끝나는 시점에 반환해야합니다. 번역 노트 : 내부적으로 사용 된 내용 (기본 호출 기능). 스택에 저장된 변수)는 모두 스택 프레임에 있습니다. 그러나 브라우저보기가 그려지기 전에. 이것은 일반적으로 settimeout (0)를 사용하여 달성됩니다. 그러나 Settimeout (0) 방법으로 인해 속도가 느려지거나 각 이벤트가 처리 된 후 브라우저가보기를 그리면보기가 플래시됩니다 (이 문제를 해결하는 방법은 어떻게 해결됩니까?).
5. $ Watch List는 최신 반복에서 수정 될 수있는 표현식 모음입니다. (모델)이 변경되면 특정 DOM을 재 할당하는 목표를 달성하기 위해 $ watch 함수가 호출됩니다.
6. Angular $ 다이제스트 루프가 완료되면 (이전 3에서 언급 된 상황), 각도 및 JavaScript 컨텍스트를 떠난 후 브라우저는 변경 사항에 대한 응답으로 DOM을 다시 칠합니다.
다음은 사용자가 텍스트 상자에 텍스트를 입력 할 때 "Hello Kitty"(-_-!) 예제가 데이터 바인딩 효과를 구현하는 방법을 설명합니다.
1. 컴파일 단계 :
a) NG- 모델 및 입력 지침 키 다운 이벤트 리스너는 <input>에 지정됩니다.
b) {{name}} 자리 표시 자 (보간, 번역 방법을 모릅니다) (expression) 이름이 변경 될 때 $ watch를 설정합니다.
2. 런타임 단계 :
a) inut 컨트롤의 "x"버튼을 눌러 브라우저가 키 다운 이벤트를 트리거하도록합니다.
b) 입력 지시문은 텍스트 상자 값의 변경 사항을 캡처 한 다음 $ apply ( "name = 'x';")를 호출하여 각도 실행 컨텍스트에서 적용된 모델을 업데이트합니다.
c) Angluar는 "name = 'x';"를 적용합니다. 모델에. (모델이 변경되었습니다)
d) $ 다이제스트 루프 시작
e) $ Watch List는 이름 값이 변경되었음을 감지 한 다음 {{name}} 표현식을 다시 한 번 구문 분석 한 다음 DOM을 업데이트합니다.
f) Angular Exit (Angular) 실행 컨텍스트, Keydown 이벤트 및 JavaScript 실행 컨텍스트를 종료합니다.
g) 브라우저는보기를 다시 그리고 문자를 업데이트합니다.
<! doctype html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {display : none; }4. 범위
범위는 모델의 변화를 감지하고 표현식의 실행 컨텍스트 역할을 담당합니다. 스코프는 DOM 구조와 유사한 계층 구조에 중첩되어 있습니다 (앞에서 배운 것처럼 부서는 컨트롤러와 관련 될 수 있음). (자세한 내용은 개별 지침 문서를 확인하여 새로운 범위를 생성하는 지시 사항을 확인하십시오)
다음 예제는 표현식 "이름"의 값이 자신의 범위에 따라 결정되며 (속한) 가치 검색 방법 (JS 범위 체인과 유사한 경우 아빠를 찾으십시오)을 포함한다는 것을 보여줍니다.
<! docType html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> scope </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <hod> <div ng-controller = "Control기"> hello {{name}}! <div ng-controller = "controller"> hello {{name}}!; <div ng-controller = "controllerd"> hello {{name}}!; </div> </div> </div> <script src = "../ angular-1.0.1.js"type = "text/javaScript"> </script> <script> <script> <text/javaScript ($ scope) {$ scope.name = 'catty'; } function controllerb ($ scope) {$ scope.name = 'lclao'; } function controlLC ($ scope) {$ scope.name = 'jeffrey'; } function controllerd ($ scope) {} </script> </body> </html>5. 컨트롤러
<! doctype html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> 컨트롤러 </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <hod> <div ng-controller = "Controllera"> hello {{name}}! <button ng-click = "doit ()"> doit !! </button> </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script type = "text/javaScript"> function control기 ($ scope) {$ scope.name = 'kitty'; $ scope.doit = function () {$ scope.name = "handsome"; }; } </script> </body> </html>컨트롤러는보기 (-_-!) 뒤의 코드입니다. 그 책임은 콜백 함수를 통해 모델을 구축하고보기로 푸시하는 것입니다. 보기는 템플릿의 현재 범위 (HTML) 맵입니다 (약간 간신히 번역되었습니다 ...). SCOPE는 모델을보기로 지시하고 컨트롤러로 이벤트를 보냅니다.
컨트롤러를보기에서 분리하는 것이 중요합니다.
1. Controller는 JavaScript로 작성되었습니다. JavaScript가 필수적입니다. 중요한 명령은 응용 프로그램의 동작을 설명하는 좋은 방법입니다. 컨트롤러는 디스플레이 정보 (논리적)를 포함하지 않아야합니다 (DOM 참조 또는 HTML 조각)
2. 뷰 템플릿은 HTML로 작성되었습니다. HTML은 선언적입니다. 선언 (HTML)은 UI를 설명하는 좋은 방법입니다. 보기에는 행동이 포함되어서는 안됩니다.
3. 컨트롤러는 어떤 뷰에 해당 해야하는지 알지 못하므로 컨트롤러는 여러 뷰를 (간접적으로) 사용할 수 있습니다. 이는 리 스킨 (스킨 교체?), 기타 장치 별 뷰 (예 : 휴대폰 및 데스크탑) 및 코드 측정에 중요합니다.
6. 모델
모델은 데이터 객체로 이해 될 수 있습니다. 뷰를 생성하기 위해 템플릿과의 조합으로 사용됩니다. 모형을보기에 쓰려면 모델을 스코프로 참조해야합니다. 다른 많은 프레임 워크와 달리 Angular는 모델에 대한 제한이나 요구 사항이 없습니다. 추가 클래스를 추가 할 필요가 없으며 특별한 권한있는 방법을 통해 모델에 액세스하거나 변경하지 않아도됩니다. 모델의 데이터 유형은 원시 유형 (문자열, 번호 ...), 키 값 객체 ({a : 1, b : 2}) 또는 함수 (function () {…}) 일 수 있습니다. 간단히 말해서, 각도 모델은 일반적인 JavaScript 객체 여야합니다.
7.보기
보기는 사용자가 볼 수있는 것입니다. 보기는 템플릿에서 태어났습니다. 모델과 결합하여 결국 브라우저 Dom으로 렌더링합니다. Angular는 다른 많은 템플릿 시스템에 대한보기를 제시하는 매우 다른 방법을 사용합니다.
기타 템플릿 엔진 : 특수 태그로 HTML 문자열을 만들어 많은 템플릿 엔진이 구현됩니다. 일반적으로 이러한 템플릿 태그는 HTML 구문을 파괴합니다. 이는 일반 HTML 편집기를 통해 코드를 편집 할 수 없음을 의미합니다 (이것은 ...). 템플릿 문자열은 템플릿 엔진으로 전달되어 데이터와 병합됩니다. 마지막으로 html 문자열을 생성합니다. 이 문자열은 일반적으로 .innerhtml의 dom에 기록되어 브라우저가 템플릿 컨텐츠를 렌더링하도록합니다. 데이터가 변경되면이 프로세스를 반복해서 반복해야합니다. 템플릿의 세분성은 DOM 업데이트의 세분성과 일치합니다. 이 곡물의 핵심은 템플릿 시스템이 문자열을 처리한다는 것입니다.
Angular : 각도 템플릿의 차이점은 문자열 기반보다는 DOM 기반이라는 것입니다. 템플릿은 여전히 일부 문자열을 HTML에 작성해야하지만 여전히 HTML입니다 (내부에 템플릿을 포함하지 않음). 브라우저는 HTML을 DOM으로 변환 한 다음 DOM은 컴파일러 입력 (Angular의 템플릿 엔진)이됩니다. 컴파일러는 지시문을 찾고 모델에서 시계를 설정합니다. 결과는 항상 업데이트 된 뷰이며 모델과 템플릿을 다시 스티칭 할 필요가 없습니다. 모델은 유일한 진실의 원천이됩니다.
8. 지시
Directive는 동작 (예를 들어, 이전 기사의 예제 "Hide and Seek") 또는 DOM 변환 (DOM 세트를 포함하는 사용자 정의 태그)이며 속성, 태그 이름 및 클래스 이름에 이름을 배치하면 지침을 트리거 할 수 있습니다. Directive를 사용하면 선언적 방식으로 HTML 태그를 확장 할 수 있습니다.
다음 예에는 여전히 몇 가지 질문이 있습니다. 그것이 $ render triggers @_ @
<! docType html> <html lang = "Zh-Cn"ng-app = "myDirective"> <head> <meta charset = "utf-8"> <title> directrive </title> <style type = "text/css"> .ng-cloak {display : 없음; } </style> </head> <body ng-controller = "myctrl"> <div ng-model = "content"= "true"> my little dada </div> <fre> modelvalue = {{content}} </pre> <button ng-click = "reset ()"> rooct model) src = "../ angular-1.0.1.js"type = "text/javaScript> </script> <script type ="text/javaScript "> angular.Module ("myDirective ", []) .Directive ("contentestable ", function () {return {function, ngmodel ', ngmodel, ngmodel'상. setVal (ngmodel. $ setViewValue) (elect.text.bind); setval ();9. 필터
필터는 데이터 변환 (서식)에서 역할을합니다. 일반적으로 지역과 관련이 있으며 다른 지역마다 출력 형식이 다를 수 있습니다. 그들은 유사한 구문을 가진 Unix 필터의 정신을 따르고 있습니다. | (파이프)
<! docType html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> 필터 </title> <style type = "text/css"> .ng-cloak {display : none; }. ng-model = "myfiltertext"type = "text"/>> <br/ <br/> {{list | filter : myfiltertext | json}} <br/> </div> <script src = "../ Angular-1.0.1.js"type = "text/javascript"> </body> </html>10. 모듈과 인젝터
인젝터는 서비스 로케이터입니다. 각 각도 적용에는 별도의 인젝터가 있습니다. 인젝터는 이름으로 개체 인스턴스를 찾는 방법을 제공합니다. 인젝터는 모든 객체 인스턴스를 내부 캐시에 유지하므로 동일한 이름을 반복적으로 호출하면 동일한 개체 인스턴스가 반환됩니다. 객체가 존재하지 않으면 인스턴스 팩토리에 새 인스턴스를 생성하도록 요청합니다.
모듈은 "제공자"라고하는 인젝터의 인스턴스 공장을 구성하는 방법입니다.
// 모듈 생성 var var myModule = Angular.Module ( 'myModule', []) // 인젝터 myModule.factory ( 'servicea', function () {return {// 대신 {}, 객체 생성을 여기에 넣습니다};}); // 인젝터를 만들고 'myModule'var $ injector = angular.injector ( 'myModule')에서 구성합니다. // 이름으로 인젝터에서 객체를 검색 var servicea = $ injector.get ( 'servicea'); // 인스턴스 Cache $ injector.get ( 'servicea') === $ injector.get ( 'servicea'); // 진실그러나 인젝터의 진짜 멋진 X는 메소드를 호출하고 "인스턴스화"유형을 호출하는 데 사용될 수 있다는 것입니다. 이 멋진 기능은 방법과 유형이 자원을 찾는 대신 자원을 요청할 수 있다는 것입니다.
//이 기능과 같은 함수를 작성합니다. 함수 dosomething (servicea, serviceb) {// 여기서 뭔가를합니다. } // Angular는 응용 프로그램의 인젝터를 제공합니다. var $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 함수 dosomething (servicea, serviceb)을 호출하십시오. // 위는 전통적인 오래된 방법입니다 ~ 다음은 자신의 암소에 대한 각도 이야기입니다. X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// 의존성을 얻는 멋진 방법. // $ 인젝터는 인수를 자동으로 $ injector.invoke (dosomething)에 제공합니다. // 이것은 프레임 워크가 당신의 함수를 호출하는 방식입니다우리가 작성해야 할 유일한 것은 우리의 기능이며, 우리는 메소드가 함수의 인수에 의존하는 자원을 나열 할 수 있습니다! 각도 통화가 함수되면 "호출"메소드를 사용하여 기능 농업을 자동으로 채 웁니다.
아래 예제의 생성자에 종속성이 어떻게 나열되는지 확인하십시오. NG-Controller가 컨트롤러를 인스턴스화하면 종속성 리소스가 자동으로 제공됩니다. 로드 종속성 리소스에 대한 인젝터 참조를 작성, 검색 또는 생성 할 필요가 없습니다.
<! doctype html> <html lang = "Zh-Cn"ng-app = "timeexample"> <head> <meta charset = "utf-8"> <title> 인젝터 </title> <style type = "text/css"> .ng-cloak {display : 없음; } </style> </head> <body> <div ng-controller = "clockctrl"> 현재 시간은 다음과 같습니다. {{time.now}} </div> <script src = "../ angular-1.0.1.js"type = "text/javascript"> </script> <script type = "timeexplarte"> "timeExcript"> []). Factory ( "MyClock", function ($ timeout) {var time = {}; (function tick () {time.now = new Date (). toString (); $ timeout (tick, 1000);}) (); return time;}); /** * * @param $ scope * @param myclock 종속성 MyClock이 여기에 자동으로 삽입됩니다! ! * @constructor */ function clockctrl ($ scope, myclock) {$ scope.time = myclock; } </script> </body> </html>11. 각도 네임 스페이스
이름 충돌을 방지하기 위해 Angular는 Prefix $를 객체 이름에 추가합니다. 충돌을 피하기 위해 코드에서 $ 접두사를 사용하지 마십시오. (-_- !!)
위는 AngularJS 개념에 대한 정보입니다. 우리는 앞으로 관련 기사를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!