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();

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

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

   
   
머리>

   

       

            {{item.title}}
           
            {{항목.가격 | 통화}}
            {{항목.가격 * 항목.수량 | 통화}}
       

       

총계: {{totalCart()| 통화 }}

       

할인: {{bill.discount | 통화}}

       

소계: {{소계() | 통화}}

   

   
본문>

复主代码 代码如下:

   
   
머리>

   

       

            {{item.title}}
           
            {{항목.가격 | 통화}}
            {{항목.가격 * 항목.수량 | 통화}}
       

       

총액: {{bill.totalcart| 통화 }}

       

할인: {{bill.discount | 통화}}

       

소계: {{bill.소계 | 통화}}

   

   
본문>

큰 itms는 Angular에서 새로운 청구서를 발행하고 더 많은 요금을 지불하고 있습니다.函数, 我们可以实现这一点를 보세요.

复主代码 代码如下:

$scope.$watch(
var totalCart = function() {
            var total = 0;
for (var i=0,len=$scope.items.length;i                         총계 = 총 $scope.items[i].price * $scope.items[i].퀀티티;
                }
                     $scope.bill.totalcart = 합계;
$scope.bill.discount = 총계 > 100 ? 10:0;
$scope.bill.subtotal = 합계 - $scope.bill.discount;
            });

여러 항목 모니터링

여러 속성이나 개체를 모니터링하고 그 중 하나가 변경될 때 함수를 실행하려는 경우 두 가지 기본 옵션이 있습니다.

이러한 속성 연결 값 모니터링

배열이나 객체에 넣고 deepWatch 매개변수에 값을 전달합니다

각각 지침:
첫 번째 경우, 범위에 things 개체가 있으면 두 가지 속성 a와 b가 있습니다. 이 두 속성이 변경되면 callMe() 함수를 동시에 모니터링할 수 있습니다. $scope.$watch('things.a things.b',callMe(...));
목록이 매우 길면 연결된 값을 반환하는 함수를 작성해야 합니다.

두 번째 경우에는 사물 객체의 모든 속성을 모니터링해야 합니다.

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

$scope.$watch('things',callMe(...),true);

모듈을 사용하여 종속성 정리

provider(name,Object OR constructor()) 설명: 복잡한 논리 비교를 생성하는 구성 가능한 서비스입니다. Object를 매개변수로 전달하는 경우 Object 객체에는 서비스 이름을 반환해야 하는 $get이라는 함수가 있어야 합니다. 그렇지 않으면,Angularjs는 전달한 것이 생성자라고 생각하고 생성자를 호출하면 서비스 인스턴스 객체가 반환됩니다.
Factory(name,$get Function()) 설명: 구성할 수 없는 서비스인 생성 논리는 상대적으로 복잡합니다. 호출 시 서비스 인스턴스를 반환하는 함수를 지정해야 합니다. 공급자(이름,{$get:$getFunction()})로 볼 수 있습니다.
service(name,constructor()) 구성할 수 없는 서비스인 논리 생성은 비교적 간단합니다. 위의 제공자 함수의 생성자 매개변수와 유사하게 Angular는 이를 호출하여 서비스 인스턴스를 생성할 수 있습니다.

모듈팩토리 활용 예시

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

머리>

쇼핑!!

   
        {{item.title}}
        {{item.description}}
        {{품목.가격 | 통화}}
   
테이블>
본문>

引入第삼방模块

대다양한 용도의 创建供所有代码使用 单个模块, 并把所有依赖的东西放入这个模块中, 这样就会工模好.但是，如果你打算使用第三方包提供的服务或者指令，他们一般道带有自己的模块，你需要在应用模块中定义依赖关心才能引他们。 例如： var appMod = angle.module('app',['Snazzy','Super']);

필터의 예

复主代码 代码如下:

머리>

{{페이지제목 | titleCase}}

본문>