지시어, 나는 angularjs가 HTML 요소를 조작하는 방법으로 이해합니다.
AngularJS를 학습하는 첫 번째 단계는 노드가 응용 프로그램의 루트 노드임을 나타 내기 위해 내장 명령어 NG-App을 작성하는 것이므로 지침은 이미 익숙합니다.
이 로그는 단순히 내장 지침을 기록하고 먼저 사용한 다음 흥미로운 것들에 대해 이야기합니다.
내장 명령
모든 내장 지시문에는 NG 접두사가 있으며 충돌을 피하기 위해이 접두사를 사용자 정의 지시문에 사용하는 것이 좋습니다.
몇 가지 일반적인 내장 지침으로 시작하십시오.
먼저 주요 내장 지침을 나열하고 범위 문제에 대해 간단히 이야기하십시오.
NG 모델
이 설명은 양식 제어를 현재 범위의 속성에 바인딩 할 때 정확하지 않은 것 같습니다.
그러나 질긴 것에 대해 걱정하지 마십시오. 예를 들어 사용할 때 이해하기 쉽습니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "text"ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
ng-init
이 지침을 초기화 된 내부 범위라고합니다.
이 명령어는 일반적으로 데모 또는 무언가를 제공하는 것과 같은 작은 응용 프로그램에 나타납니다 ...
코드 사본은 다음과 같습니다.
<div ng-init = "job = 'fighter'">
나는/an {{job}}
</div>
NG-Init 외에도 점점 더 나은 옵션이 있습니다.
ng-app
AngularJS를 사용할 때 마다이 명령은 분리 할 수 없습니다. 그건 그렇고, $ Rootscope가 포함되어 있습니다.
NG-App 요소가 스코프 체인의 루트 인 $ rootscope의 시작점이되도록 선언합니다.
즉, 루트 아래의 범위로 액세스 할 수 있습니다.
그러나 하늘 전체에 전 세계 변수가 날아가는 것을 피하기 위해 $ rootscope를 과도하게 사용하는 것은 권장되지 않아 효율성이 좋지 않고 관리하기가 어렵습니다.
예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html ng-app = "myapp">
<body>
{{someproperty}}
</body>
<cript>
var myapp = angular.module ( 'myapp', [])
.Run (function ($ rootscope) {
$ rootscope.someproperty = 'Hello Computer';
});
</스크립트>
</html>
NG-Controller
이 명령어를 사용하여 DOM 요소에 컨트롤러를 설치합니다.
컨트롤러? 실제로, 이것을 문자 그대로 이해하는 것이 좋습니다. 왜 컨트롤러가 필요합니까?
AngularJS 1.2.x 일 때 이와 같은 컨트롤러를 정의 할 수도 있습니다.
코드 사본은 다음과 같습니다.
함수 OHMYCONTROLLER ($ SCOPE) {
// ...
}
이 방법은 AngularJS 1.3.x에서 금지되어 있습니다.이 방법은 컨트롤러가 하늘을 날아 다니며 레벨의 차이점과 모든 것이 $ rootscope에 매달려 있다고 말할 수는 없습니다.
NG-Controller는 매개 변수로서 표현식을 가져야하며, 또한 이전 $ 범위의 메소드와 속성은 $ 스코프를 통해 상속되며 $ rootscope도 포함됩니다.
다음은 간단한 예일뿐입니다. 조상은 아이의 범위에 액세스 할 수 없습니다.
코드 사본은 다음과 같습니다.
<div ng-controller = "AncestorController">
{{agestorname}}
{{childname}}
<div ng-controller = "ChildController">
{{agestorname}}
{{childname}}
</div>
</div>
<cript>
var myapp = angular.module ( 'myapp', [])
.controller ( 'childcontroller', function ($ scope) {
$ scope.childname = 'child';
})
.controller ( 'agestorcontroller', function ($ scope) {
$ scope.ancestorname = '조상';
});
</스크립트>
범위 문제는 그 이상입니다. 지금은 그것을 따로두고 다른 내장 지침을 계속 살펴 보겠습니다.
ng- 형식
처음에는 양식 명령이 왜 있었는지 이해하지 못했고 <form> 태그는 충분히 느껴졌습니다.
양식 검증을 예로 들어 이전 기사에는 코드가 있습니다.
코드 사본은 다음과 같습니다.
<input type = "제출"ng-disabled = "mainform. $ invalid" />
즉, 양식의 상태가 $ 유효하지 않은 경우 제출 버튼이 비활성화됩니다.
예를 들어, 장면이 조금 더 복잡한 경우, 부모 양식에는 여러 자식 양식이 있으며 아동 양식의 3 개가 확인을 통과 할 때 부모 양식을 제출할 수 있습니다.
그러나 <form>은 중첩 될 수 없습니다.
이 시나리오를 고려할 때 NG 형 지침을 사용 하여이 문제를 해결합니다.
예를 들어:
코드 사본은 다음과 같습니다.
<form name = "mainform"novalidate>
<div ng-form = "form1">
이름 : <입력 유형 = "text"ng-required = "true"ng-model = "name"/> <br>
ID 번호 : <입력 유형 = "number"ng-minlength = "15"ng-maxlength = "18"ng-required = "true"ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
가디언 이름 : <input type = "text"ng-required = "true"ng-model = "gname"/> <br>
Guardian ID 번호 : <input type = "number"ng-minlength = "15"ng-maxlength = "18"ng-required = "true"ng-model = "gidnum"/>
</div>
<button ng-disabled = "form1. $ invalid && form2. $ invalid"> 제출 </button>
</form>
NG 장애
이와 같은 속성이 나타나는 한, 표현식 반환 값에 의해 true/false 값을 반환하여 AngularJS에서 효과적으로 만들 수 있습니다.
양식 입력 필드를 비활성화합니다.
코드 사본은 다음과 같습니다.
<TextArea ng-disabled = "1+1 == 2"> 1+1 =? </textArea>
ng-readonly
식별 입력 필드를 표현식별로 true/false를 반환하여 양식 입력 필드를 읽기 전용으로 설정하십시오.
예를 들어 3 초 후에 읽기 전용이됩니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "text"ng-Readonly = "stoptheworld"value = "3s 후 세계를 중지하십시오"/>
.Run (function ($ rootscope, $ timeout) {
$ ROTSCOPE.STOPTHEWORLD = FALSE;
$ timeout (function () {
$ rootscope.stopTheWorld = true;
}, 3000)
})
ng-Checked
이것은 <input type = "checkbox" />에 대한 것입니다.
코드 사본은 다음과 같습니다.
<input type = "checkbox"ng-Checked = "someproperty"ng-init = "someproperty = true"ng-model = "someproperty">
ng 선택
<select> in <pelect>와 함께 사용하려면 예 :
코드 사본은 다음과 같습니다.
<라벨>
<input type = "checkbox"ng-model = "isfullstack">
나는 풀 스택 엔지니어입니다
</레이블>
<select>
<옵션> 프론트 엔드 </옵션>
<옵션> 백엔드 </옵션>
<옵션 ng-selected = "isfullstack"> 풀 스택 !!! </옵션>
</선택>
ng-show/ng-hide
표현에 따라 HTML 요소를 표시/숨기십시오. 예를 들어 DOM에서 제거되지 않고 숨겨져 있습니다.
코드 사본은 다음과 같습니다.
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
당신은 나를 볼 수 없습니다.
</div>
ng-Change
HTML의 ONXXX가 아니라 NG-XXX입니다.
NG- 모델과 함께 사용하여 NG-Change를 예로 들어 사용하십시오.
코드 사본은 다음과 같습니다.
<입력 유형 = "text"ng-model = "calc.arg"ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
또는 예를 들어 NG-OPTIONS
{{}}
사실, 이것은 또한 지침입니다. 어쩌면 NG 바인드와 비슷하게 느껴질 수도 있지만 페이지가 약간 느리게 렌더링 할 때 볼 수 있습니다.
또한 {{}}의 성능은 NG 바인드보다 훨씬 적지 만 사용하기에 매우 편리합니다.
ng 바인드
ng- 결합의 동작은 {{}}와 유사합니다.이 명령어를 사용하여 Fouc (렌더링되지 않은 컨텐츠의 플래시), 즉 렌더링으로 인한 깜박임을 피할 수 있다는 점을 제외하고.
ng-cloak
Ng-Cloak은 또한 우리를 위해 Fouc를 해결할 수 있습니다. NG-Cloak은 경로가 해당 페이지를 호출 할 때까지 내부 요소를 숨 깁니다.
NG-IF
NG-IF의 표현이 False 인 경우 해당 요소는 숨겨져있는 대신 DOM에서 제거되지만 요소를 검토 할 때 표현이 주석이되는 것을 알 수 있습니다.
단계가 숨겨져 있으면 Ng-Hide를 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
<div ng-if = "1+1 === 3">
이 요소는 검토 할 수 없습니다
</div>
<div ng-hide = "1+1 == 2">
검토 할 수 있습니다
</div>
ng-switch
당신이 그것을 혼자 사용하더라도 중요하지 않습니다. 여기에 예가 있습니다.
코드 사본은 다음과 같습니다.
<div ng-switch on = "1+1">
<p ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
ng-repeat
나는 그것이 반복이라고 불리는 것을 이해하지 못한다. 요컨대, 컬렉션을 가로 지르고 각 요소의 템플릿 인스턴스를 생성하는 것입니다. 각 인스턴스의 범위에서 몇 가지 특수 속성을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
$ index
$ 먼저
$ 마지막
$ 중간
심지어
이상한
구체적으로 설명하지 않으면 이것이 무엇인지 쉽게 알 수 있습니다. 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<ul>
<li ng-repeat = "char in
[{ '알파벳': 'k'},
{ '알파벳': 'a'},
{ '알파벳': 'v'},
{ '알파벳': 'l'},
{ '알파벳': 'e'},
{ 'alphabet': 'z'}] "ng-show ="$ avide "> {{char.alphabet}} </li>
</ul>
ng-href
처음에 나는 텍스트 필드에서 ng 모델을 만들고 이와 같이 href로 썼습니다.
실제로 HREF와 NG-HREF 간에는 차이가 없으므로 이것을 시도 할 수 있습니다.
코드 사본은 다음과 같습니다.
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linktext}} </a> </li>
<li> <a href = "{{myhref}}"> 클릭하지만 반드시 올바른 주소는 아닙니다 </a> </li>
</ul>
.Run (function ($ rootscope, $ timeout) {
$ rootscope.linktext = '아직로드되지 않았 으면 클릭 할 수 없습니다.';
$ timeout (function () {
$ rootscope.linktext = 'Please Click'
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
ng-src
마찬가지입니다. 즉, 표현식이 발효되기 전에 자원을로드해서는 안됩니다.
예 (PS : 그림이 좋습니다!) : :
코드 사본은 다음과 같습니다.
<img ng-src = "{{imgsrc}}"/>
.Run (function ($ rootscope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
NG 클래스
예를 들어 범위의 객체로 클래스 스타일을 동적으로 변경합니다.
코드 사본은 다음과 같습니다.
<스타일>
.red {배경색 : 빨간색;}
.Blue {배경색 : 파란색;}
</스타일>
<div ng-controller = "curtimeController">
<button ng-click = "getCurrentSecond ()"> 시간 get! </button>
<p ng-class = "{red : x%2 == 0, blue : x%2! = 0}"> 숫자는 다음과 같습니다. {{x}} </p>
</div>
.controller ( 'curtimeController', function ($ scope) {
$ scope.getCurrentSecond = function () {
$ scope.x = new date (). geteconds ();
};
})
위는이 기사에 설명 된 모든 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.