SRC 및 HREF 속성
AngularJS에서 SRC는 NG-SRC로 작성해야하며 HREF는 예를 들어 NG-HREF로 작성해야합니다.
코드 사본은 다음과 같습니다.
<img ng-src = "/images/cats/{{favoritecat}}">
<a ng-href = "/shop/category = {{number}}"> 일부 텍스트 </a>
표현
간단한 수학 연산, 비교 작업, 부울 작업, 비트 작업, 참조 배열 및 객체 기호는 템플릿에서 수행 할 수 있습니다. 표현식으로 많은 일을 할 수는 있지만 javaScript vact () 함수를 사용하지 않고 사용자 정의 통역사 (Angular)를 사용하여 표현식이 실행되므로 큰 제한이 있습니다.
여기의 표현은 여러 가지면에서 JavaScript보다 엄격하지만 정의되지 않고 무의미한 결함 허용 오류가 더 좋습니다. 오류가 발생하면 템플릿에 아무것도 표시되지 않으며 NullPointerException 오류를 던지지 않습니다. 예를 들어:
코드 사본은 다음과 같습니다.
<div ng-controller = 'somecontroller'>
<div> {{computer () /10}} < /div> // 합법적이지만 비즈니스 로직을 템플릿에 넣고이 접근법을 피해야합니다.
</div>
UI와 컨트롤러 책임을 구별합니다
컨트롤러는 특정 DOM 조각에 묶여 있으며 관리해야 할 것입니다. 컨트롤러를 DOM 노드에 연결하는 두 가지 주요 방법이 있습니다. 하나는 템플릿의 NG-Controller를 통해 선언되고, 두 번째는 라우팅을 통해 동적으로로드 된 DOM 템플릿 조각에이를 바인딩하는 것입니다. 이 템플릿을보기라고합니다. 중첩 컨트롤러를 만들 수 있으며 숫자 구조를 상속하여 데이터 모델과 기능을 공유 할 수 있습니다. 실제 중첩은 $ SCOPE 객체에서 발생합니다. 내부 원래 상속 메커니즘을 통해 상위 컨트롤러 개체의 $ 범위는 내부 중첩 $ 스코프 (함수를 포함한 모든 속성)로 전달됩니다. 예를 들어:
코드 사본은 다음과 같습니다.
<div ng-controller = "ParentController">
<div ng-controller = "ChildController"> ... </div>
</div>
$ SCOPE를 사용하여 모델 데이터를 노출시킵니다
$ scope.count = 5와 같은 $ scope 속성의 생성을 표시 할 수 있습니다. 템플릿 자체를 통해 간접적으로 데이터 모델을 생성 할 수도 있습니다.
표현을 통과하십시오. 예를 들어
코드 사본은 다음과 같습니다.
<button ng-click = 'count = 3'> 세트 세트 </button>
양식 항목에서 NG 모델 사용
표현식과 유사하게, NG- 모델에 지정된 모델 파라미터는 외부 컨트롤러 내에서도 작동합니다. 유일한 차이점은 양식 항목과 지정된 모델 사이에 양방향 바인딩 관계를 생성한다는 것입니다.
시계를 사용하여 데이터 모델의 변경 사항을 모니터링합니다
$ watch의 함수 서명은 : $ watch (WatchFn, WatchAction, DeepWatch)입니다.
WatchFN은 모니터링 된 데이터 모델의 현재 값을 반환하는 각도 표현 또는 함수가있는 문자열입니다. WatchAction은 WatchFN이 변경 될 때 호출되는 기능 또는 표현식입니다. 기능 서명은 다음과 같습니다.
함수 (NewValue, OldValue, Scope) Deepwatch Deepwatch true로 설정되면이 선택적 부울 매개 변수는 각도를 지휘하여 모니터링 된 객체의 각 속성이 변경되었는지 확인합니다. 배열에서 요소를 모니터링하기 위해 간단한 값 또는 값 대신 객체의 모든 속성을 모니터링하는 경우이 매개 변수를 사용할 수 있습니다. 각도는 배열이나 물체를 가로 질러야합니다. 세트가 더 크면 작업이 더 복잡해집니다.
$ watch 함수는 함수를 반환합니다. 변경 알림을받지 않아도되면 반환 된 기능을 사용하여 모니터에서 로그 아웃 할 수 있습니다.
속성을 모니터링 한 다음 모니터링에서 로그 아웃 해야하는 경우 다음 코드를 사용할 수 있습니다. var dereg = $ scope. $ watch ( 'somemodel.someproperty', callbackonchange ());
... Dereg ();
예제 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 쇼핑 카트 </title>
<script type = "text/javaScript">
기능 CartController ($ SCOPE) {
$ scope.bill = {};
$ scope.items = [
{제목 : '페인트 포트', 수량 : 8, 가격 : 3.95},
{제목 : '폴카 점', 수량 : 17, 가격 : 12.95},
{제목 : '자갈', 수량 : 5, 가격 : 6.95}
];
$ scope.totalCart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
TOTAL = TOTAL + $ SCOPE.ITEMS [i] .Price * $ scope.Items [i] .quantity;
}
반품 총;
}
$ scope.subtotal = function () {
$ scope.totalcart () - $ scope.bill.discount;
}
함수 계산 방지 (NewValue, OldValue, Scope) {
$ scope.bill.discount = newValue> 100? 10 : 0;
} // WatchAction 함수는 여기에 있습니다
$ scope. $ watch ($ scope.totalcart, calculatedIscount); // 여기에서 시계 함수
}
</스크립트>
</head>
<body>
<div ng-controller = "CartController">
<div ng-repeat = '항목의 항목'>
<span> {{item.title}} </span>
<입력 ng-model = 'item.quantity'>
<span> {{item.price | 통화}} </span>
<span> {{item.price * item.quantity | 통화}} </span>
</div>
<div> 총 : {{totalcart () | 통화}} </div>
<div> 할인 : {{bill.discount | 통화}} </div>
<div> subtotal : {{subtotal () | 통화}} </div>
</div>
<script type = "text/javaScript"src = "angular.min.js"> </script>
</body>
</html>
위의 시계에는 성능 문제가 있습니다. 계산 된 토탈 함수는 6 번 실행되었으며 그 중 3 개는 루프가 고장 났기 때문입니다. 루프가 루프 될 때마다 데이터가 다시 렌더링되었습니다.
아래는 수정 된 코드입니다
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
<title> 쇼핑 카트 </title>
<script type = "text/javaScript">
기능 CartController ($ SCOPE) {
$ scope.bill = {};
$ scope.items = [
{제목 : '페인트 포트', 수량 : 8, 가격 : 3.95},
{제목 : '폴카 점', 수량 : 17, 가격 : 12.95},
{제목 : '자갈', 수량 : 5, 가격 : 6.95}
];
var totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
TOTAL = TOTAL + $ SCOPE.ITEMS [i] .Price * $ scope.Items [i] .quantity;
}
$ SCOPE.BILL.TOTALCART = TOTAL;
$ scope.bill.discount = Total> 100? 10 : 0;
$ SCOPE.BILL.SUBTOTAL = TOTAL- $ SCOPE.BILL.DISCOUNT;
}
$ scope. $ watch ( 'Items', TotalCart, True); // watch를 사용하여 항목을 변경합니다
}
</스크립트>
</head>
<body>
<div ng-controller = "CartController">
<div ng-repeat = '항목의 항목'>
<span> {{item.title}} </span>
<입력 ng-model = 'item.quantity'>
<span> {{item.price | 통화}} </span>
<span> {{item.price * item.quantity | 통화}} </span>
</div>
<div> 총 : {{bill.totalcart | 통화}} </div>
<div> 할인 : {{bill.discount | 통화}} </div>
<div> subtotal : {{bill.subtotal | 통화}} </div>
</div>
<script type = "text/javaScript"src = "angular.min.js"> </script>
</body>
</html>
큰 ITMS 어레이의 경우, 페이지가 각도로 표시 될 때마다 청구서 속성 만 재 계산하면 성능이 훨씬 나을 것입니다. WatchFN으로 $ watch 함수를 만들어이를 달성 할 수 있습니다.
코드 사본은 다음과 같습니다.
$ scope. $ watch (
var totalcart = function () {
var total = 0;
for (var i = 0, len = $ scope.items.length; i <len; i ++) {
TOTAL = TOTAL + $ SCOPE.ITEMS [i] .Price * $ scope.Items [i] .quantity;
}
$ SCOPE.BILL.TOTALCART = TOTAL;
$ scope.bill.discount = Total> 100? 10 : 0;
$ SCOPE.BILL.SUBTOTAL = TOTAL- $ SCOPE.BILL.DISCOUNT;
});
여러 가지를 모니터링합니다
여러 속성이나 객체를 모니터링하고 변경 될 때 함수를 실행하려면 두 가지 기본 옵션이 있습니다.
이 속성을 연결 한 후 값을 모니터링하십시오
배열이나 객체에 넣은 다음 값을 DeepWatch 매개 변수로 전달하십시오.
별도로 설명 :
첫 번째 경우, 범위에 사물 객체가있는 경우 두 가지 속성 A와 B가 있으며, 두 속성이 모두 변경되면 Callme () 함수를 실행해야합니다. $ scope ( 'thess.a + thess.b', callme (...)) 로이 두 속성을 모니터링 할 수 있습니다.
목록이 매우 길면 연결 후 값을 반환하기 위해 함수를 작성해야합니다.
두 번째 경우, 객체의 모든 속성을 모니터링해야합니다.
코드 사본은 다음과 같습니다.
$ scope. $ watch ( 'Things', Callme (...), true);
모듈을 사용하여 종속성을 구성합니다
제공자 (이름, 오브젝트 또는 생성자 ()) 설명 : 구성 가능한 서비스, 논리 생성은 비교적 복잡합니다. 객체를 매개 변수로 전달하는 경우 객체 객체에는 $ get이라는 기능이 있어야하며 서비스 이름을 반환해야합니다. 그렇지 않으면 AngularJS는 생성자를 통과 할 때 생성자를 호출하면 서비스 인스턴스 개체를 반환한다고 생각합니다.
공장 (이름, $ get function ()) 설명 : 구성 불가능한 서비스 인 생성 로직은 비교적 복잡합니다. 함수를 지정해야 하며이 함수가 호출되면 서비스 인스턴스가 반환됩니다. 공급자의 형태로 간주 될 수 있습니다 (이름, {$ get : $ getFunction ()}).
Service (이름, Constructor ())는 구성 불가능한 서비스이며 논리를 만드는 것은 비교적 간단합니다. 위의 공급자 함수의 생성자 매개 변수와 유사하게, 각도는 서비스 인스턴스를 생성하기 위해 호출합니다.
모듈 공장 사용의 예
코드 사본은 다음과 같습니다.
<html ng-app = 'shoppingmodule'>
<헤드>
<title> 쇼핑 카트 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = Angular.Module ( 'ShoppingModule', []);
ShoppingModule.Factory ( '항목', function () {
var 항목 = {};
items.query = function () {
반품 [
{제목 : '페인트 포트', 설명 : '페인트 가득한 냄비', 가격 : 3.95},
{제목 : '페인트 포트', 설명 : '페인트 가득한 냄비', 가격 : 3.95},
{제목 : '페인트 포트', 설명 : '페인트 가득한 냄비', 가격 : 3.95}
];
};
반품 항목;
});
기능 쇼핑 콘트롤러 ($ SCOPE, ITMS) {
$ SCOPE.ITEMS = items.query ();
}
</스크립트>
</head>
<body ng-controller = 'ShoppingController'>
<H1> 상점 !! </h1>
<테이블>
<tr ng-repeat = '항목의 항목'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | 통화}} </td>
</tr>
</테이블>
</body>
</html>
타사 모듈 소개
대부분의 응용 프로그램에서 모든 코드에 대한 단일 모듈을 만들고 모든 종속성을이 모듈에 넣으십시오. 그러나 타사 패키지에서 제공하는 서비스 또는 지침을 사용하려는 경우 일반적으로 자체 모듈이 제공되며 응용 프로그램 모듈의 종속성 관리를 정의하여 참조해야합니다. 예를 들어:
var appMod = Angular.Module ( 'app', [ 'snazzy', 'super']);
필터에 대한 예
코드 사본은 다음과 같습니다.
<html ng-app = 'shoppingmodule'>
<헤드>
<title> 쇼핑 카트 </title>
<script type = "text/javaScript"src = "angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = Angular.Module ( 'ShoppingModule', []);
ShoppingModule.filter ( 'titlecase', function () {
var titlecasefilter = function (입력) {
var words = input.split ( '');
for (var i = 0; i <Words.length; i ++) {
단어 [i] = 단어 [0] .charat (0) .touppercase () + 단어 [i] .slice (1);
}
return Words.join ( '');
};
TitleCaseFilter를 반환합니다.
});
기능 쇼핑 콘트롤러 ($ SCOPE) {
$ scope.pageheading = '이것은 테스트 케이스입니다';
}
</스크립트>
</head>
<body ng-controller = 'ShoppingController'>
<H1> {{PageHeading | titlecase}} </h1>
</body>
</html>