1. 시작
Angular JS는 웹 페이지를 개발하는 데 사용되는 프레임 워크, 템플릿, 데이터 바인딩 및 풍부한 UI 구성 요소 세트입니다. 수동 DOM 작업없이 웹 응용 프로그램의 아키텍처를 제공합니다. AngularJS는 60k에 불과하며 주류 브라우저와 호환되며 jQuery와 잘 작동합니다.
2. 기본 원리 이해
angular에 대한 일부 소개
1. 기본 지식
1. angular는 IE8을 포기했다
2. 네 가지 핵심 포인트는 MVC, 모듈 식, 지침 시스템 및 양방향 데이터 바인딩입니다.
2. 일부 원칙
1. 컨트롤러를 재사용하지 마십시오. 컨트롤러는 일반적으로 작은 시야를 담당합니다.
2. 컨트롤러에서 DOM을 작동하지 마십시오.
3. ControllerLler에서 데이터를 형식화하지 마십시오. NG는 양식 컨트롤이 양호합니다.
4. 컨트롤러에서 데이터 필터링 작업을 수행하지 않으면 $ 필터 서비스가 있습니다.
5. 일반적으로 컨트롤러는 서로 전화하지 않으며 컨트롤러 간의 상호 작용은 이벤트를 통해 수행됩니다.
6. angular는 뷰를 재사용하기 위해 지침을 사용합니다.
7. $ 스코프는 DOM 태그와 평행 한 트리 구조입니다.
8. Child $ Scope Object는 부모 $ 스코프의 속성과 메소드를 상속합니다.
9. 각 각도 응용 프로그램에는 단 하나의 $ RootScope 객체 만 있습니다. (일반적으로 NG-APP에 위치).
10. Angular.element ($ 0) .Scope ()를 사용하여 디버그 할 수 있습니다.
11.보기 사이의 라우팅을 위해 ngroute를 사용하십시오.
3. HTML 페이지에 가장 일반적으로 사용되고 실용적인 각도 내장 지침
①.NG 클래스 (특정 작업으로 인해 좋아요 및주의와 같은 특정 스타일이 변하는 상황에 적합)
NG 클래스 지침은 하나 이상의 CSS 클래스에 HTML 요소에 동적으로 바인딩하는 데 사용됩니다. NG 클래스 지시문의 값은 문자열, 객체 또는 배열 일 수 있습니다.
문자열 인 경우 여러 클래스 이름이 공백으로 분리됩니다.
객체 인 경우 부울 값인 키 값 쌍을 사용해야하며 값은 추가하려는 클래스 이름입니다. 수업은 키가 참인 경우에만 추가됩니다.
배열 인 경우 객체의 문자열 또는 조합으로 구성 될 수 있으며 배열의 요소는 문자열 또는 객체 일 수 있습니다.
사용하는 두 가지 권장 방법 :
1. 문자열 형태로 코드는 다음과 같습니다.
<i ng-class = "{true : 'Ion-is-heart', false : 'iOn-ios-heart-outline'} [ac이는 I 태그에 기본 클래스 아이콘 인 NG 클래스가 있으며 동적 클래스를 바인딩합니다. 이 클래스의 값은 AccountInfo.ispocus가 참인지 거짓인지에 따라 결정됩니다. 값이 참이면 I 태그는 Ion-Ios-Heart 클래스를 추가합니다. 값이 False 인 경우 I 태그는 Ion-Ios-Heart Outline을 추가합니다. 값이 False 인 경우 I 태그는 Ion-Ios-Heart Outline을 추가합니다.
이 카테고리. I 태그는 또한 NG- 클릭 이벤트를 바인딩합니다. 해당 논리를 처리하는 것 외에도 AccountInfo.ispocus의 값도 결정됩니다. 이러한 방식으로 클릭 작업이 발생하면 해당 I 태그 클래스가 자연스럽게 변경되고 다른 스타일이 표시됩니다.
2. 키 값 스타일의 코드는 다음과 같습니다.
<i ng-class = "{ 'Ion-Ios-Heart': Isios, 'Ion-Android-Heart': isandroid}"> </i>분명히, 코드에서, 우리는이 의미가 ISIOS가 사실 일 때 Ion-Ios-Heart 클래스가 수거되고 Isandroid 값이 사실 일 때 Ion-Android-Heart 클래스가 수거 될 것임을 알 수 있습니다.
②.ng-show 및 ng-hide (다른 상황에 대해 두 가지 다른 내용을 표시 할 때 적합)
NG-SHOW 지시문은 표현식이 참일 때 지정된 HTML 요소를 표시하고 그렇지 않으면 지정된 HTML 요소를 숨 깁니다.
NG- 헤드 지시문은 표현식이 참일 때 지정된 HTML 요소를 숨 깁니다. 그렇지 않으면 지정된 HTML 요소가 표시됩니다.
하하, 물과 불과 양립 할 수없는 형제처럼 보입니다. . . .
예는 다음과 같습니다.
<div> <span ng-click = "togglemenu ()"> </span> </div> <div> <ul ng-show = "menustate"> ... </ul> <div ng-hide = "menustate"> ... </div>
부울 변수 연골을 설정하십시오 (실제 개발에서는 표현식, 삼부작 방정식 등을 사용할 수 있습니다). 사실이되면 NG-SHOW의 내용이 표시되고 Ng-Hide의 내용이 숨겨집니다. 그렇지 않으면 반대가 사실입니다. . .
③.ng-switch (여러 상황에서 다른 콘텐츠를 표시하는 데 적합)
NG 스위치 지시문은 표현에 따라 해당 부분을 표시하거나 숨 깁니다.
해당 하위 요소는 NG 스위치시 지시를 사용합니다. 일치가 선택되면 디스플레이를 선택하면 다른 디스플레이가 제거됩니다.
NG-Switch-Default 지시문을 사용하여 기본 옵션을 설정하면 기본 옵션이 표시되지 않으면 기본 옵션이 표시됩니다.
예:
<div ng-switch = "essaytype"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ... </div> <div ng-switch-when = "2"> ... </div> </divefift> </divy>
④.ng-model (나는 주로 ng-model의 마법의 작은 구덩이에 대해 이야기 할 것입니다)
NG- 모델 지침은 HTML 형태 요소를 스코프 변수에 바인딩합니다.
범위에 변수가 없으면 생성됩니다. ng-model은 일반적으로 <input>, <select>, <textRea> 및 기타 요소에 일반적으로 사용됩니다.
다음 코드 :
<div> <textarea name = "my-massage-detail"ng-model = "content"placeholder = "메시지를 입력하십시오"> </textarea> <ang-click = "submitmes ()"> 제출 </a> <br> </div>
정의상 이론적으로 말하면 제출할 때 컨트롤러의 페이지에 정의 된 NG 모델의 값을 직접 얻는 것은 괜찮습니다. 그러나 실제로 이것은 실현 가능하지 않습니다. 개인 테스트에 따르면 정의되지 않은 출력이 출력되었으며 NG 모델의 초기 값이 컨트롤러에 정의되면 변경 후 최신 값 대신 초기 값이 얻어집니다.
나는 몇 가지 정보를 검색했습니다. 그것은 대략 그것을 의미합니다. 각도는 우리의 정의 중 일부를 제한합니다. 우리는 비-프리비티 한 객체 만 사용하여 매개 변수를 전달할 수 있습니다.
무슨 뜻입니까? 다음과 같이 위의 예에 약간의 변경이 있습니다.
HTML 코드 :
<div> <textarea name = "my-massage-detail"ng-model = "model.content"placeholder = "메시지를 입력하십시오"> </textarea> <ang-click = "submitmes ()"> 제출 </a> </div>
컨트롤러 코드 :
$ scope.Model = {}; $ scope.Model.Content = '' '; $ scope.submitmes = function () {console.log ($ scope.Model.Content);}즉, 객체를 정의한 다음 NG 모델을이 개체의 속성으로 정의하여 처리합니다. 이런 식으로, 우리는 NG 모델의 최신 값을 얻습니다.
또 다른 간단한 방법은 NG 모델을 매개 변수로 전달하는 것입니다.
예는 다음과 같습니다.
// html code <input type = "text"ng-model = "code"> <button ng-click = "setCode (code)"> login </button> <br> // 컨트롤러 코드 $ scope.setCode = function (code);}
4. 데이터 상호 작용을위한 실용 기술
약속의 사용
ES6은 약속 대상을 정의합니다. 이 객체는 특히 배경과 상호 작용할 때 매우 유용합니다. 그것은 콜백이 너무 깊지 않다는 것을 방지 할뿐만 아니라 어떤 상황에서는 균일하게 처리 될 수 있으며 코드의 가독성을 향상시킵니다. 이러한 서비스는 또한 AngularJS ($ Q)에 캡슐화됩니다.
$ q는 AngularJS의 서비스로 존재하며 약속 비동기 프로그래밍 모드의 단순화 된 구현 일뿐입니다. 연기 객체 (지연 객체)는 $ q.defer ()를 통해 얻을 수 있습니다. 이 개체에는 세 가지 방법이 있습니다.
Resolve (value) : Promise Object의 비동기 실행 본문에 메시지를 보내고 작업을 성공적으로 완료했으며 값은 전송 메시지입니다.
Reject (value) : Promise Object의 비동기 실행 본문에 메시지를 보내고이 작업을 완료하는 것은 불가능하다고 알려줍니다. 값은 보낸 메시지입니다.
알림 (값) : Promise Object의 비동기 실행 본문에 메시지를 보내 현재 작업 완료를 알려줍니다. 값은 보낸 메시지입니다.
이 메시지를 보내면 기존 콜백 함수가 호출됩니다.
약속은이 연기 대상의 약속 대상입니다. 약속 객체는 연기를 통해 얻을 수 있습니다.
그런 다음 (SuccessCallback, ErrorCallback, NotifyCallback) : 매개 변수는 다른 메시지에서 다른 콜백 함수입니다. DEFER는 다른 콜백 함수를 실행하기 위해 다른 메시지를 보냅니다. 메시지는 이러한 콜백 함수의 매개 변수로 전달됩니다. 반환 값은 체인 호출을 지원하기 위해 존재하는 약속 객체로 돌아갑니다. 첫 번째 연기 객체가 메시지를 보내면 후속 약속의 해당 연기 대상도 메시지를 보내지 만 보내는 메시지는 다릅니다. 첫 번째 연기 객체가 거부 또는 해결을 보내 든 상관없이, 두 번째 및 나중에는 해결되며 메시지는 통과 할 수 있습니다.
Catch (ErrorCallback) : 그런 다음 (NULL, ERRORCALLBACK).
마지막으로 (콜백) : 그 당시의 약어와 동일합니다 (콜백, 콜백). 마침내 메소드는 매개 변수를 허용하지 않지만 다음을 연기하여 전송 된 메시지 및 메시지 유형을 성공적으로 전달할 수 있습니다.
DEFER () : 지연 객체를 생성하는 데 사용됩니다. var defer = $ q.defer ();
Reject () : 매개 변수는 콜백 함수에서 예외를 던지고 다음에 잘못된 콜백 함수를 호출하는 것과 같습니다.
모든 () : 매개 변수는 약속 배열로 수신되고 새로운 단일 약속 객체가 반환됩니다. 이 약속 객체의 해당 연기 대상이 해결되면이 단일 약속 객체가 해결됩니다. 이러한 약속 대상 중 하나가 거부되면이 단일 약속도 거부됩니다.
언제 () : 첫 번째 매개 변수를 임의의 값 또는 약속 객체로 수신하고 다른 3 개는 같은 약속의 메소드이며 반환 값은 약속 대상입니다. 첫 번째 매개 변수가 약속 객체가 아닌 경우 성공 콜백이 직접 실행되고 메시지는이 객체입니다. 그것이 약속이라면, 반환 된 약속은 실제로이 약속 유형의 주장에 대한 포장지입니다. 들어오는 약속에 해당하는 연기가 보낸 메시지는 우리의 기능에 의해 반환 된 약속 대상에 의해 받게됩니다.
특정 사용량은 다음과 같습니다.
각도에서는 상호 작용을 위해 특별히 서비스를 정의하십시오.
get : function (url, 옵션) {<br> var deferred = $ q.defer (); <br> showtip (); $ http.get (url, 옵션) .success (function (data) {hidetip (); if (data.success) {deferred.resolve (data);} else {deferred.reject (data.message);}); error (dature (dature)); DEFERRED.PROMISE;} // 컨트롤러의 호출 get ( 'url', params) .then (function (data) {// 여기서 성공 CALLBACK}, function (data) {// errorCallback});이러한 방식으로 각 요청이 발행 될 때 일부 프롬프트를 균일하게 정의한 다음 요청이 완료된 후 이러한 프롬프트를 숨길 수 있습니다. 이 코드에서 일반적인 의미는 요청이 성공할 때 Deferred.Resolve (데이터)가 성공 상태를 설정하기 위해 호출되므로 첫 번째 기능이 자동으로 실행되고, 즉, 요청 된 데이터 데이터가 전달 될 것입니다. 요청이 실패하면 두 번째 함수, Namely ErrorCallback이 호출됩니다.
위는 편집자가 당신에게 소개 한 AngularJS의 실질적인 개발 기술입니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!