AngularJS 구문에 대한 자세한 설명(계속)_AngularJS

src 및 href 속성

Angularjs에서는 src는 ng-src로 작성하고 href는 ng-href로 작성해야 합니다.

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

일부 텍스트

표현

템플릿에서는 간단한 수학 연산, 비교 연산, 비트 연산, 참조 배열, 객체 표기법 등을 수행할 수 있지만 표현식은 사용자 정의 인터프리터를 사용하여 실행됩니다. Javascript의 eval() 함수를 사용하는 대신 Angular의 eval() 함수를 사용하므로 더 큰 제한이 있습니다.
여기의 표현식은 여러 면에서 Javascript보다 더 엄격하지만 정의되지 않음 및 null에 더 관대합니다. 오류가 발생하면 템플릿은 NullPointerException 오류를 발생시키는 대신 아무 것도 표시하지 않습니다. 예:

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

{{computer() /10 }}

//합법적이긴 하지만 비즈니스 로직을 템플릿에 넣는 것은 피해야 합니다

UI와 컨트롤러의 책임을 분리

컨트롤러는 특정 DOM 조각에 바인딩되어 있으며 이러한 조각은 관리해야 하는 콘텐츠입니다. 컨트롤러를 DOM 노드에 연결하는 방법에는 두 가지가 있습니다. 하나는 ng-controller를 통해 템플릿에서 컨트롤러를 선언하는 것이고, 두 번째는 라우팅을 통해 동적으로 로드된 DOM 템플릿 조각에 바인딩하는 것입니다. 중첩된 컨트롤러를 만들 수 있습니다. 상속 구조를 통해 데이터 모델과 기능을 공유할 수 있습니다. 실제 중첩은 내부 기본 상속 메커니즘을 통해 상위 컨트롤러 개체의 $scope가 내부 중첩된 $에 전달됩니다. 범위(함수를 포함한 모든 속성). 예:

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

...

$scope를 사용하여 모델 데이터 노출

$scope 속성을 명시적으로 생성할 수 있습니다(예: $scope.count = 5). 템플릿 자체를 통해 간접적으로 데이터 모델을 만들 수도 있습니다.

표현으로. 예를 들어

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

카운트를 3으로 설정

양식 항목에 ng-model 사용

표현식과 유사하게 ng-model에 지정된 모델 매개변수는 외부 컨트롤러에서도 작동합니다. 유일한 차이점은 양식 항목과 지정된 모델 사이에 양방향 바인딩이 생성된다는 것입니다.

Watch를 사용하여 데이터 모델의 변경 사항 모니터링

$watch의 함수 서명은 다음과 같습니다: $watch(watchFn,watchAction,deepWatch)
watchFn은 모니터링되는 데이터 모델의 현재 값을 반환하는 Angular 표현식 또는 함수가 포함된 문자열입니다. watchAction은 watchFn이 변경될 때 호출되는 함수 또는 표현식입니다. 해당 기능 서명은 다음과 같습니다.
function(newValue,oldValue,scope) deepWatch true로 설정되면 이 선택적 부울 매개변수는 모니터링되는 객체의 각 속성이 변경되었는지 확인하도록 Angular에 지시합니다. 단일 값을 모니터링하는 대신 배열의 요소나 개체의 모든 속성을 모니터링하려는 경우 이 매개 변수를 사용할 수 있습니다. Angular는 배열이나 객체를 순회해야 한다는 점에 유의하세요. 컬렉션이 크면 작업이 복잡하고 무거워집니다.

$watch 함수는 변경 알림을 받을 필요가 없는 경우 이 반환된 함수를 사용하여 모니터에서 로그아웃할 수 있습니다.
속성을 모니터링한 후 모니터링에서 로그아웃해야 하는 경우 다음 코드를 사용할 수 있습니다: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

예제 코드는 다음과 같습니다.

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