AngularJS 내장 지시문_AngularJS

지시어는 AngularJS가 HTML 요소를 작동하는 방법으로 이해합니다.
AngularJS 학습의 첫 번째 단계는 이 노드가 애플리케이션의 루트 노드임을 나타내는 내장 지시어 ng-app을 작성하는 것이므로 이 지시어는 이미 익숙합니다.

이 블로그에는 몇 가지 기본 제공 명령이 간략하게 기록되어 있으며 먼저 이를 사용한 다음 몇 가지 흥미로운 사항에 대해 이야기하겠습니다.

내장 명령

모든 내장 명령어에는 ng라는 접두사가 붙습니다. 충돌을 피하기 위해 맞춤 명령어에 이 접두사를 사용하는 것은 권장되지 않습니다.
몇 가지 일반적인 내장 명령으로 시작하세요.
먼저 몇 가지 주요 내장 명령을 나열하고 범위 문제에 대해 간략하게 이야기하겠습니다.

ng모델

현재 범위의 속성에 양식 컨트롤을 바인딩하는 것이 올바르지 않은 것 같습니다.
하지만 지금은 표현에 대해 걱정하지 마세요. 예를 들면 다음과 같이 사용하면 이해하기 쉽습니다.

코드 복사 코드는 다음과 같습니다.

{{someModel.someProperty}}

ng-init

이 지시문은 호출 시 내부 범위를 초기화합니다.
이 명령은 일반적으로 데모 제공 등 비교적 작은 응용 프로그램에 나타납니다...

코드 복사 코드는 다음과 같습니다.

저는 {{직업}}입니다

ng-init 외에도 더 많고 더 나은 옵션이 있습니다.

ng-앱

AngularJS를 사용할 때마다 이 명령 없이는 할 수 없습니다.
ng-app을 선언하는 요소는 $rootScope의 시작점이 되며 $rootScope는 일반적으로 에 선언되는 범위 체인의 루트입니다.
즉, 루트 아래의 모든 범위에서 액세스할 수 있습니다.
그러나 $rootScope를 과도하게 사용하는 것은 권장되지 않습니다. 그렇지 않으면 전역 변수가 어디에나 있으므로 비효율적이고 관리하기 어려워집니다.
예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

{{ someProperty }}
본문>

var myApp = angle.module('myApp', [])
.run(함수($rootScope) {
$rootScope.someProperty = '안녕하세요 컴퓨터';
})

ng-컨트롤러

이 명령을 사용하여 DOM 요소에 컨트롤러를 설치합니다.
컨트롤러? 문자 그대로 이해하면 좋은데 컨트롤러가 왜 필요한가요? AngularJS 1.2.x에서는 컨트롤러를 다음과 같이 정의할 수 있다는 점을 기억하세요...

코드 복사 코드는 다음과 같습니다.

함수 ohMyController($scope) {
//...
}

이 방법은 컨트롤러가 하늘 전체를 날아다니게 만들고 모든 것이 $rootScope에 걸려 있기 때문에 AngularJS 1.3.x에서는 금지됩니다.

ng-controller에는 매개변수로 표현식이 있어야 합니다. 또한 $scope는 $rootScope를 포함하여 상위 $scope의 메서드와 속성을 상속하는 데 사용됩니다.
다음은 단순한 예입니다. 조상은 자식 범위에 액세스할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

{{ 조상 이름 }}
{{ 아이이름 }}

             {{ 조상 이름 }}
             {{ childName }}

var myApp = angle.module('myApp', [])
.controller('ChildController', function($scope) {
$scope.childName = '자녀';
})
.controller('AncestorController', function($scope) {
$scope.ancestorName = '조상';
});

범위 문제는 그 이상입니다. 지금은 이 문제를 제쳐두고 다른 내장 명령어를 계속 살펴보겠습니다.

ng 형식

처음에는 왜 form 명령이 있는지 이해하지 못했지만

태그는 충분히 유용해 보였습니다.
양식 확인을 예로 들면 이전 기사에 다음 코드가 있습니다.

코드 복사 코드는 다음과 같습니다.

즉, 양식 상태가 $invalid인 경우 제출 버튼이 비활성화됩니다.
예를 들어 시나리오가 좀 더 복잡한 경우 상위 양식에 여러 하위 양식이 있고 하위 양식의 세 가지 확인이 통과되면 상위 양식을 제출할 수 있습니다.
그러나

은 중첩될 수 없습니다.
이 시나리오를 고려하여 이 문제를 해결하기 위해 ng-form 지시문을 사용합니다.
예:

코드 복사 코드는 다음과 같습니다.

이름:

ID 번호:

보호자 이름:

보호자 ID 번호:

모두 제출
양식>

ng-비활성화

이와 같이 나타나는 한 효과적인 속성의 경우 AngularJS에서 true/false 표현식을 반환하여 효과적으로 만들 수 있습니다.
양식 입력 필드를 비활성화합니다.

코드 복사 코드는 다음과 같습니다.

1 1=?

ng-읽기 전용

식 반환 값 true/false를 통해 양식 입력 필드를 읽기 전용으로 설정합니다.
예를 들어 3초 후에는 읽기 전용이 됩니다.

코드 복사 코드는 다음과 같습니다.

.run(함수($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(함수(){
           $rootScope.stopTheWorld = true;
},3000)
})

확인됨

이것은 에 대한 것입니다.

코드 복사 코드는 다음과 같습니다.

선택됨

은 의 에 사용됩니다. 예:

코드 복사 코드는 다음과 같습니다.

저는 풀스택 엔지니어입니다
라벨>

프런트엔드옵션>
백엔드옵션>
풀 스택!!!
선택>

ng-show/ng-hide

표현식을 기반으로 HTML 요소를 표시하거나 숨깁니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

1 1=2

당신은 나를 볼 수 없습니다.

변경

HTML처럼 onXXX가 아니라 ng-XXX입니다.
ng-model과 함께 사용되는 경우 ng-change를 예로 들어 보겠습니다.

코드 복사 코드는 다음과 같습니다.

{{ calc.result }}

또는 ng-options처럼

{{}}

실제로 이 명령도 ng-bind와 비슷하다고 느낄 수 있지만 페이지 렌더링이 약간 느릴 때 나타날 수 있습니다.
게다가 {{}}의 성능은 ng-bind에 비해 많이 떨어지지만 사용하기 매우 편리합니다.

ng-바인딩

ng-bind의 동작은 {{}}와 유사하지만 이 명령을 사용하여 렌더링 취소로 인해 발생하는 깜박임인 FOUC(Flash Of Unrendered Content)를 방지할 수 있습니다.

ng-cloak

ng-cloak은 FOUC도 해결해줍니다. ng-cloak은 경로가 해당 페이지를 호출할 때까지 내부 요소를 숨깁니다.

ng-if

ng-if의 표현식이 false인 경우 해당 요소는 숨겨지지 않고 DOM에서 제거되지만 요소를 검사하면 표현식이 주석으로 바뀌는 것을 볼 수 있습니다.
단계가 숨겨져 있으면 ng-hide를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

요소를 검토할 수 없습니다

검열 가능

ng-스위치

단독으로 사용하면 의미가 없습니다.

코드 복사 코드는 다음과 같습니다.

0

1

2

3

반복

왜 반복이라고 부르지 않는지 모르겠습니다. 간단히 말해서 컬렉션을 순회하여 각 요소에 대해 다음과 같이 일부 특수 속성을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$인덱스
$첫번째
$마지막
$중
심지어
이상해요

설명할 필요가 없습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

• {{char.alphabet}}

ng-href

처음에는 텍스트 필드에 ng-model을 만든 뒤 href에 를 이렇게 썼습니다.
실제로 href와 ng-href 사이에는 차이가 없으므로 다음을 시도해 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

• {{linkText}}


• 클릭은 가능하지만 주소가 정확하지 않을 수 있습니다

.run(function($rootScope, $timeout) {
$rootScope.linkText = '아직 로드되지 않았으므로 클릭할 수 없습니다';
$timeout(함수() {
          $rootScope.linkText = '클릭하세요'
          $rootScope.myHref = 'http://google.com';
}, 2000);
})

ng-src

마찬가지로, 표현식이 적용되기 전에 리소스를 로드하지 마십시오.
예(ps: 사진 좋네요! ):

코드 복사 코드는 다음과 같습니다.

.run(function($rootScope, $timeout) {
$timeout(함수() {
          $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})

ng급

범위 내 개체를 사용하여 클래스 스타일을 동적으로 변경합니다. 예:

코드 복사 코드는 다음과 같습니다.

.red {배경색: 빨간색;}
.blue {배경색: 파란색;}
스타일>

시간 확인!

번호: {{ x }}

.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = 함수() {
          $scope.x = new Date().getSeconds();
};
})

위 내용은 이 글에 설명된 내용 전부입니다. 모두 마음에 드셨으면 좋겠습니다.