Туловский А. Документация По API Angular.js (2013)

API Angular
API,
.
ng
html A,
href.
ngClick
, : <a href="" ngclick="model.$save()">Save</a>
,
, IE:
1. <a>
2. </a>
form
FormController.
name ,
, .
ngForm
angular . , ,
, .
<form> , angular
ngForm, , <form>,
.
CSS
ng-valid .
ng-invalid .
ng-pristine .
ng-dirty .

Angular ,
, .
JavaScript,
.
Angular ( )
<form> action.
, JavaScript,
:
ngSubmit
ngClick submit (input[type=submit])
,
ngSubmit ngClick. - html:
, enter ,
(ngSubmit).
2
submit, enter
input
submit, enter
input[type=submit] (ngClick) (ngSubmit)
, IE:
1. <form
2.
[name="{string}"]>
3. </form>
name(optional) {string=}
. ,
, .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
5.
6.
<script src="script.js"></script>
</head>
7.
8.
<body>
<form name="myForm" ng-controller="Ctrl">
9.
userType: <input name="input" ng-model="userType" required>
10.
<span class="error" ng-show="myForm.input.$error.required">Required!</span><

br>
11.
<tt>userType = {{userType}}</tt><br>
12.
13.
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
14.
15.
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
16.
17.
</form>
</body>
18. </html>
Script.js
1. function Ctrl($scope) {
2.
$scope.userType = 'guest';
3. }
End to end test

1. it('should initialize to model', function() {
2.
3.
expect(binding('userType')).toEqual('guest');
expect(binding('myForm.input.$valid')).toEqual('true');
4. });
5.
6. it('should be invalid if empty', function() {
7. input('userType').enter('');
8.
9.
expect(binding('userType')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
10. });
input
HTML angular . HTML5

.
, IE:
1. <input
2.
ngModel="{string}"
3.
[name="{string}"]
4.
5.
[required]
[ngRequired="{boolean}"]
6.
7.
[ngMinlength="{number}"]
[ngMaxlength="{number}"]
8.
[ngPattern="{string}"]
9.
[ngChange="{string}"]>
10. </input>
ngModel {string}
angular .
, .
required(optional) {string=}
required ,
.
ngRequired(optional) {boolean=}
required, true
ngMinlength(optional) {number=}
minlength , ,
.
ngMaxlength(optional) {number=}
maxlength , ,
.
ngPattern(optional) {string=}
pattern ,
RegExp. ,
/regexp/,
, .
ngChange(optional) {string=}
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.
<div ng-controller="Ctrl">
<form name="myForm">
10.
User name: <input type="text" name="userName" ng-model="user.name" require

d>
11.
12.
<span class="error" ng-show="myForm.userName.$error.required">

Required!</span><br>
13.
14.
Last name: <input type="text" name="lastName" ng-model="user.last"

ng-minlength="3" ng-maxlength="10">
15.
16.
<span class="error" ng-show="myForm.lastName.$error.minlength">

Too short!</span>
17.
18.
<span class="error" ng-show="myForm.lastName.$error.maxlength">

Too long!</span><br>
19.
20.
</form>
<hr>
21.
22.
<tt>user = {{user}}</tt><br/>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
23.
24.
<tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
<tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
25.
26.
<tt>myForm.userName.$error = {{myForm.lastName.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
27.
28.
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
<tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
29.
30.
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>
31. </body>
32. </html>
Script.js
2.
$scope.user = {name: 'guest', last: 'visitor'};
3. }
End to end test

2.
expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}');
3.
4.
expect(binding('myForm.userName.$valid')).toEqual('true');
expect(binding('myForm.$valid')).toEqual('true');
5. });
6.
7. it('should be invalid if empty when required', function() {
8.
input('user.name').enter('');
9.
10.
expect(binding('user')).toEqual('{"last":"visitor"}');
expect(binding('myForm.userName.$valid')).toEqual('false');
11.
expect(binding('myForm.$valid')).toEqual('false');
12. });
13.
14. it('should be valid if empty when min length is set', function() {
15. input('user.last').enter('');
16.
17.
expect(binding('user')).toEqual('{"name":"guest","last":""}');
expect(binding('myForm.lastName.$valid')).toEqual('true');
18. expect(binding('myForm.$valid')).toEqual('true');
19. });
20.
21. it('should be invalid if less than required min length', function() {
22.
23.
input('user.last').enter('xx');
expect(binding('user')).toEqual('{"name":"guest"}');
24.
25.
expect(binding('myForm.lastName.$valid')).toEqual('false');
expect(binding('myForm.lastName.$error')).toMatch(/minlength/);
26. expect(binding('myForm.$valid')).toEqual('false');
27. });
28.
29. it('should be invalid if longer than max length', function() {
30.
31.
input('user.last').enter('some ridiculously long name');

expect(binding('user'))
32.
33.
.toEqual('{"name":"guest"}');
expect(binding('myForm.lastName.$valid')).toEqual('false');
34.
35.
expect(binding('myForm.lastName.$error')).toMatch(/maxlength/);
expect(binding('myForm.$valid')).toEqual('false');
36. });
input [checkbox]
HTML .
1. <input type="checkbox"
2.
ng-model="{string}"
3.
4.
[name="{string}"]
[ng-true-value="{string}"]
5.
6.
[ng-false-value="{string}"]
[ng-change="{string}"]>
ngModel {string}
angular .
, .
ngTrueValue(optional) {string=}
, , .
ngFalseValue(optional) {string=}
, , .
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
Value1: <input type="checkbox" ng-model="value1"> <br/>

Value2: <input type="checkbox" ng-model="value2"
11.
12.
ng-true-value="YES" ng-false-value="NO"> <br/>

<tt>value1 = {{value1}}</tt><br/>
13.
14.
<tt>value2 = {{value2}}</tt><br/>
</form>
15. </body>
16. </html>
Script.js
2.
$scope.value1 = true;
3.
$scope.value2 = 'YES'
4. }
End to end test

1. it('should change state', function() {
2.
3.
expect(binding('value1')).toEqual('true');
expect(binding('value2')).toEqual('YES');
4.
5.
input('value1').check();
6.
input('value2').check();
7.
expect(binding('value1')).toEqual('false');
8.
expect(binding('value2')).toEqual('NO');
9. });
input [email]
email . email
, email.
1. <input type="email"
2.
3.
ng-model="{string}"
[name="{string}"]
4.
5.
[required]
[ng-required="{string}"]
6.
7.
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
8.
[ng-pattern="{string}"]>
ngModel {string}
angular .
, .
required ,
.
required, true
minlength , ,
.
maxlength , ,
.
pattern ,
RegExp. ,
/regexp/,
, .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.

Email: <input type="email" name="input" ng-model="text" required>
10.
11.
<span class="error" ng-show="myForm.input.$error.required">

Required!</span>
12.
13.
<span class="error" ng-show="myForm.input.$error.email">

Not valid email!</span>
14.
15.
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
16.
17.
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
18.
19.
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
20.
21.
</form>
</body>
22. </html>
Script.js
2.
$scope.text = 'me@example.com';
3. }
End to end test

2.
3.
expect(binding('text')).toEqual('me@example.com');
4. });
5.
7.
input('text').enter('');
8.
expect(binding('text')).toEqual('');
9.
10. });
11.
12. it('should be invalid if not email', function() {
13.
14.
input('text').enter('xxx');
15. });
input [number]
.
number , .
1. <input type="number"
2.
ng-model="{string}"
3.
4.
[name="{string}"]
[min="{string}"]
5.
6.
[max="{string}"]
[required]
7.
8.
9.
10.
[ng-pattern="{string}"]
11.
ngModel {string}
angular .
, .
min(optional) {string=}
min , min.
max(optional) {string=}
max , max.
required ,
.
required, true
minlength , ,
.
maxlength , ,
.
pattern ,
RegExp. ,
/regexp/,
, .
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
8.
9.
</head>
<body>
Number: <input type="number" name="input" ng-model="value"
10.
11.
min="0" max="99" required>

<span class="error" ng-show="myForm.list.$error.required">
12.
13.
Required!</span>
<span class="error" ng-show="myForm.list.$error.number">
14.
15.
Not valid number!</span>

<tt>value = {{value}}</tt><br/>
16.
17.
18.
19.
20.
21.
</form>
</body>
22. </html>
Script.js
2.
$scope.value = 12;
3. }
End to end test

2.
3.
expect(binding('value')).toEqual('12');
4. });
5.
7. input('value').enter('');
8.
9.
expect(binding('value')).toEqual('');
10. });
11.
12. it('should be invalid if over max', function() {
13. input('value').enter('123');
14. expect(binding('value')).toEqual('');
15. expect(binding('myForm.input.$valid')).toEqual('false');
16. });
input [radio]
HTML .
1. <input type="radio"
2.
3.
ng-model="{string}"
value="{string}"
4.
5.
[name="{string}"]
ngModel {string}
angular .
, .
value {string}
, , .
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
<input type="radio" ng-model="color" value="red"> Red <br/>

<input type="radio" ng-model="color" value="green"> Green <br/>
11.
12.
<input type="radio" ng-model="color" value="blue"> Blue <br/>

<tt>color = {{color}}</tt><br/>
13.
14.
</form>
</body>
15. </html>
Script.js
2.
$scope.color = 'blue';
3. }
End to end test

1. it('should change state', function() {
2.
3.
expect(binding('color')).toEqual('blue');
4.
5.
input('color').select('red');
expect(binding('color')).toEqual('red');
6. });
input [text]
HTML angular.
1. <input type="text"
2.
ng-model="{string}"
3.
4.
[name="{string}"]
[required]
5.
6.
7.
8.
9.
ngModel {string}
angular .
, .
required ,
.
required, true
minlength , ,
.
maxlength , ,
.
pattern ,
RegExp. ,
/regexp/,
, .
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.

Single word: <input type="text" name="input" ng-model="text"
10.
11.
ng-pattern="word" required>
12.
13.
Required!</span>
<span class="error" ng-show="myForm.input.$error.pattern">
14.
15.
Single word only!</span>
16.
17.
18.
19.
20.
21.
</form>
22. </body>
23. </html>
Script.js
2.
3.
$scope.text = 'guest';
$scope.word = /^\w*$/;
4. }
End to end test

2.
expect(binding('text')).toEqual('guest');
3.
4. });
5.

7.
8.
9.
10. });
11.
12. it('should be invalid if multi word', function() {
13. input('text').enter('hello world');
14. expect(binding('myForm.input.$valid')).toEqual('false');
15. });
input [url]
URL. url
, URL.
1. <input type="url"
2.
ng-model="{string}"
3.
4.
[name="{string}"]
[required]
5.
6.
7.
8.
9.
ngModel {string}
angular .
, .
required ,
.
required, true
minlength , ,
.
maxlength , ,
.
pattern ,
RegExp. ,
/regexp/,
, .
Angular , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
URL: <input type="url" name="input" ng-model="text" required>

11.
12.
Required!</span>
<span class="error" ng-show="myForm.input.$error.url">
13.
14.
Not valid url!</span>

15.
16.
17.
18.
19.
20.
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form>
21. </body>
22. </html>
Script.js
2.
$scope.text = 'http://google.com';
3. }
End to end test

2.
expect(binding('text')).toEqual('http://google.com');
3.
4. });
5.
7.
8.
9.
10. });
11.
12. it('should be invalid if not url', function() {
13.
14.
input('text').enter('xxx');
15. });
ngApp
.
HTML. ,
.
, ngApp html,
{{ 1+2 }} 3.
ngApp .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
I can add: 1 + 2 =
{{ 1+2 }}
8.
</body>
9. </html>
1. <ANY ng-app="{angular.Module}">
2.
...
3. </ANY>
1. <ANY class="ng-app: {angular.Module};">

2.
...
3. </ANY>
ngApp {angular.Module} ,
.
ngBind
ngBind Angular,
, , .
, ngBind ,
, .
, .. ngBind,
{{ expression }} .
ngBind , ,
.
ngCloak .
1. <ANY ng-bind="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-bind: {expression};">

2.
...
3. </ANY>
ngBind {expression} .
; , .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.
Enter name: <input type="text" ng-model="name"><br>
10.
11.
Hello <span ng-bind="name"></span>!

</div>
12. </body>
13. </html>
Script.js
2.
$scope.name = 'Whirled';
3. }
End to end test

1. it('should check ng-bind', function() {
2.
expect(using('.doc-example-live').binding('name')).toBe('Whirled');
3.
4.
using('.doc-example-live').input('name').enter('world');
expect(using('.doc-example-live').binding('name')).toBe('world');
5. });
ngBindHtmlUnsafe
innerHTML expression
. innerHTML
! ,
ngBindHtml, .
. $sanitize .
1. <ANY ng-bind-html-unsafe="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-bind-html-unsafe: {expression};">

2.
...
3. </ANY>
ngBindHtmlUnsafe {expression} .
ngBindTemplate
ngBindTemplate ,
ngBindTemplate. ngBind, ngBindTemplate
{{ }} . ( ,
HTML SPAN, TITLE,
OPTION).
1. <ANY ng-bind-template="{string}">
2.
...
3. </ANY>
1. <ANY class="ng-bind-template: {string};">

2.
...
3. </ANY>
ngBindTemplate {string} {{ expression }} .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
8.
9.
10.
</head>
<body>
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
11.
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
12.
</div>
13. </body>
14. </html>
Script.js
2.
3.
$scope.salutation = 'Hello';
$scope.name = 'World';
4. }
End to end test

1. it('should check ng-bind', function() {
2.
3.
expect(using('.doc-example-live').binding('salutation')).
toBe('Hello');
4.
5.
expect(using('.doc-example-live').binding('name')).
toBe('World');
6.
7.
using('.doc-example-live').input('salutation').enter('Greetings');
using('.doc-example-live').input('name').enter('user');
8.
9.
expect(using('.doc-example-live').binding('salutation')).
toBe('Greetings');
10.
11.
expect(using('.doc-example-live').binding('name')).
toBe('user');
12. });
ngChange
, .
, .
, ngModel .
, IE:
1. <ng-change>
2. </ng-change>
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-chan
ge-example1" />
10.
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
11.
12.
<label for="ng-change-example2">Confirmed</label><br />

debug = {{confirmed}}<br />
13.
14.
counter = {{counter}}
</div>
15. </body>
16. </html>
Script.js
1. function Controller($scope) {
2.
3.
$scope.counter = 0;
$scope.change = function() {
4.
5.
};
$scope.counter++;
6. }
End to end test

1. it('should evaluate the expression if changing from view', function() {
2.
3.
expect(binding('counter')).toEqual('0');
element('#ng-change-example1').click();
4.
5.
expect(binding('confirmed')).toEqual('true');
6. });
7.
8. it('should not evaluate the expression if changing from model', function() {
9.
element('#ng-change-example2').click();
10.
11.
expect(binding('confirmed')).toEqual('true');
12. });
ngChecked
HTML , checked.
( true, false). angular
. ngChecked.
1. <INPUT ng-checked="{expression}">
2.
...
3. </INPUT>
ngChecked {expression} Angular .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
Check me to check both: <input type="checkbox" ng-model="master"><br/>
8.
9.
<input id="checkSlave" type="checkbox" ng-checked="master">

</body>
10. </html>
End to end test

1. it('should check both checkBoxes', function() {
2.
expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy();
3.
4.
input('master').check();
expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
5. });
ngClass
ngClass CSS HTML ,

.
, .
, ,
.
1. <ANY ng-class="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-class: {expression};">

2.
...
3. </ANY>
ngClass {expression} .
, , , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
<input type="button" value="set" ng-click="myVar='my-class'">
8.
9.
10.
11.
<input type="button" value="clear" ng-click="myVar=''">

<br>
<span ng-class="myVar">Sample Text</span>
</body>
12. </html>
Style.css
1. .my-class {
2.
color: red;
3. }
End to end test

1. it('should check ng-class', function() {
2.
expect(element('.doc-example-live span').prop('className')).not().
3.
4.
toMatch(/my-class/);
5.
6.
using('.doc-example-live').element(':button:first').click();
7.
8.
expect(element('.doc-example-live span').prop('className')).
9.
10.
using('.doc-example-live').element(':button:last').click();
11.
12.
expect(element('.doc-example-live span').prop('className')).not().
13.
14. });
ngClassEven
ngClassOdd ngClassEven , ngClass, ,

ngRepeat,
() .
ngRepeat.
1. <ANY ng-class-even="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-class-even: {expression};">

2.
...
3. </ANY>
ngClassEven {expression} .
, , .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">

<li ng-repeat="name in names">
9.
10.
<span ng-class-odd="'odd'" ng-class-even="'even'">

{{name}}
11.
12.
13.
14.
</span>
</li>
</ol>
</body>
15. </html>
Style.css
1. .odd {
2.
color: red;
3. }
4. .even {
5.
color: blue;
6. }
End to end test

1. it('should check ng-class-odd and ng-class-even', function() {
2.
expect(element('.doc-example-live li:first span').prop('className')).
3.
4.
toMatch(/odd/);
expect(element('.doc-example-live li:last span').prop('className')).
5.
toMatch(/even/);
6. });
ngClassOdd
ngClassOdd ngClassEven , ngClass, ,

ngRepeat,
() .
ngRepeat.
4. <ANY ng-class-odd="{expression}">
5.
...
6. </ANY>
4. <ANY class="ng-class-odd: {expression};">

5.
...
6. </ANY>
ngClassOdd {expression} .
, , .
Index.html
16. <!doctype html>
17. <html ng-app>
18. <head>
19.
20.
</head>
21.
22.
<body>
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
23.
24.
<li ng-repeat="name in names">

<span ng-class-odd="'odd'" ng-class-even="'even'">
25.
26.
{{name}}

</span>
27.
28.
</li>
</ol>
29. </body>
30. </html>
Style.css
7. .odd {
8.
color: red;
9. }
10. .even {
11. color: blue;
12. }
End to end test

7. it('should check ng-class-odd and ng-class-even', function() {
8.
9.
expect(element('.doc-example-live li:first span').prop('className')).

toMatch(/odd/);
10.
11.
expect(element('.doc-example-live li:last span').prop('className')).

toMatch(/even/);
12. });
ngClick
ngClick , ,
.
1. <ANY ng-click="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-click: {expression};">
2.
...
3. </ANY>
ngClick {expression} . (
$event)
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
<button ng-click="count = count + 1" ng-init="count=0">
8.
9.
10.
11.
Increment
</button>
count: {{count}}
</body>
12. </html>
End to end test

1. it('should check ng-click', function() {
2.
expect(binding('count')).toBe('0');
3.
4.
element('.doc-example-live :button').click();
expect(binding('count')).toBe('1');
5. });
ngCloak
ngCloak Angular
. ,
, html .
<body>,
, .
ngCloak css angular.js
angular.min.js. css :
1. [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

2.
display: none;
3. }
css , html ( )
ng-cloak . Angular ,
, ngCloak,
.
angular.js head html
; , css
.
, IE7, ( CSS 2.1)
[ng\:cloak]. , css
ngCloak ngCloak, .
1. <ANY ng-cloak>
2.
...
3. </ANY>
1. <ANY class="ng-cloak">
2.
...
3. </ANY>
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
<div id="template1" ng-cloak>{{ 'hello' }}</div>

<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
9.
</body>
10. </html>
End to end test

1. it('should remove the template directive and css class', function() {
2.
3.
expect(element('.doc-example-live #template1').attr('ng-cloak')).
not().toBeDefined();
4.
5.
expect(element('.doc-example-live #template2').attr('ng-cloak')).
not().toBeDefined();
6. });
ngController
ngController .
angular Model-View-Controller.
MVC angular:
Model , ;
DOM.
View (HTML ) .
Controller ngController ;
.
, ,
$route.
1. <ANY ng-controller="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-controller: {expression};">

2.
...
3. </ANY>
ngController {expression}
, .
.
, , .
Angular . ,
this .
.
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
</head>
7.
8.
<body>
<div ng-controller="SettingsController">
9.
10.
Name: <input type="text" ng-model="name"/>

[ <a href="" ng-click="greet()">greet</a> ]<br/>
11.
12.
Contact:
<ul>
13.
14.
<li ng-repeat="contact in contacts">

<select ng-model="contact.type">
15.
16.
<option>phone</option>
<option>email</option>
17.
18.
</select>
<input type="text" ng-model="contact.value"/>
19.
20.
[ <a href="" ng-click="clearContact(contact)">clear</a>

| <a href="" ng-click="removeContact(contact)">X</a> ]
21.
22.
</li>
<li>[ <a href="" ng-click="addContact()">add</a> ]</li>
23.
24.
</ul>
</div>
25. </body>
26. </html>
Script.js
1. function SettingsController($scope) {
2.
3.
$scope.name = "John Smith";

$scope.contacts = [
4.
5.
{type:'phone', value:'408 555 1212'},

{type:'email', value:'john.smith@example.org'} ];
6.
7.
$scope.greet = function() {
8.
9.
alert(this.name);
};
10.
11.
$scope.addContact = function() {
12.
13.
this.contacts.push({type:'email', value:'yourname@example.org'});
};
14.
15.
$scope.removeContact = function(contactToRemove) {
16.
17.
var index = this.contacts.indexOf(contactToRemove);

this.contacts.splice(index, 1);
18.
19.
};
20.
21.
$scope.clearContact = function(contact) {
contact.type = 'phone';
22.
23.
contact.value = '';
};
24. }
End to end test

1. it('should check controller', function() {
2.
3.
expect(element('.doc-example-live div>:input').val()).toBe('John Smith');

expect(element('.doc-example-live li:nth-child(1) input').val())
4.
5.
.toBe('408 555 1212');

6.
7.
.toBe('john.smith@example.org');
8.
9.
element('.doc-example-live li:first a:contains("clear")').click();

expect(element('.doc-example-live li:first input').val()).toBe('');
10.
11.
element('.doc-example-live li:last a:contains("add")').click();
12.
13.

.toBe('yourname@example.org');
14. });
ngCsp
CSP (Content Security Policy).

( <html> ,
ngApp).
, ,
.
1. <html ng-csp>
2.
...
3. </html>
1. <html class="ng-csp">
2.
...
3. </html>
1000.
ngDblclick
ngDblclick
dblclick.
1. <ANY ng-dblclick="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-dblclick: {expression};">

2.
...
3. </ANY>
ngDblclick {expression} dblclick. (

$event)
. ngClick
ngDisabled
Chrome/Firefox, IE8 IE:
1. <div ng-init="scope = { isDisabled: false }">

2. <button disabled="{{scope.isDisabled}}">Disabled</button>
3. </div>
HTML ,
disabled. ( true, false) angular
. ,
ngDisabled.
1. <INPUT ng-disabled="{expression}">
2.
...
3. </INPUT>
ngDisabled {expression} Angular .

Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>

<button ng-model="button" ng-disabled="checked">Button</button>
9.
</body>
10. </html>
End to end test

1. it('should toggle button', function() {
2.
expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
3.
4.
input('checked').check();
expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
5. });
ngForm
form . HTML <form> .

, ,
.
, IE:
1. <ng-form
2.
[ngForm="{string}"]>
3. </ng-form>
1. <ANY ng-form
2.
[name="{string}"]>
3.
...
4. </ANY>
1. <ANY class="ng-form [name: {string};]">
2.
...
3. </ANY>
name|ngForm(optional) {string=} . ,
,
.
ngHide
ngHide ngShow DOM.
1. <ANY ng-hide="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-hide: {expression};">

2.
...
3. </ANY>
ngHide {expression} true,

, .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
Click me: <input type="checkbox" ng-model="checked"><br/>
8.
Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <

br/>
9.
10.
Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>

</body>
11. </html>
End to end test

1. it('should check ng-show / ng-hide', function() {
2.
3.
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
4.
5.
6.
7.
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
8.
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
9. });
ngHref
href Angular
URL, , angular
( ), 404 .
ngHref .
:
1. <a href="http://www.gravatar.com/avatar/{{hash}}"/>
1. <a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
1. <A ng-href="{template}">
2.
...
3. </A>
ngHref {template} , {{}}.
link href:
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
</head>
6.
<body>
7.
<input ng-model="value" /><br />
8.
9.
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br
/>
10.
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
11.
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't

reload)<br />
12.
13.
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

<a id="link-6" ng-href="{{value}}">link</a> (link, change location)
14. </body>
15. </html>
End to end test

1. it('should execute ng-click but not reload when href without value', function() {
2.
3.
element('#link-1').click();
expect(input('value').val()).toEqual('1');
4.
expect(element('#link-1').attr('href')).toBe("");
5. });
6.
7. it('should execute ng-click but not reload when href empty string', function() {
8.
9.
10. expect(element('#link-2').attr('href')).toBe("");
11. });
12.
13. it('should execute ng-click and change url when ng-href specified', function() {
14.
15.
expect(element('#link-3').attr('href')).toBe("/123");
16.
17.
expect(browser().window().path()).toEqual('/123');
18. });
19.
20. it('should execute ng-click but not reload when href empty string and name specifi
ed', function() {
21.
22.
23. expect(element('#link-4').attr('href')).toBe('');
24. });
25.
26. it('should execute ng-click but not reload when no href but name specified', funct
ion() {
27. element('#link-5').click();
28.
29.
expect(element('#link-5').attr('href')).toBe(undefined);
30. });
31.
32. it('should only change url when only ng-href', function() {
33. input('value').enter('6');
34.
35.
expect(element('#link-6').attr('href')).toBe('6');
36.
37.
expect(browser().location().url()).toEqual('/6');
38. });
ngInclude
, HTML .
(Same Origin Policy)
( , ngInclude -

file://).
, IE:
1. <ng-include
2.
src="{string}"
3.
[onload="{string}"]
4.
[autoscroll="{string}"]>
5. </ng-include>
1. <ANY ng-include="{string}"
2.
[onload="{string}"]
3.
[autoscroll="{string}"]>
4.
...
5. </ANY>
1. <ANY class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]">

2.
...
3. </ANY>
ngInclude|src {string} angular , URL.

, ,
src="'myPartialTemplate.html'".
onload(optional) {string=} , ,
.
autoscroll(optional) {string=} ngInclude

$anchorScroll .
, .
, .
,
true.
$includeContentLoaded
ngInclude.
:
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
<select ng-model="template" ng-options="t.name for t in templates">

<option value="">(blank)</option>
11.
12.
</select>
url of the template: <tt>{{template.url}}</tt>
13.
14.
<hr/>
<div ng-include src="template.url"></div>
15.
16.
</div>
</body>
17. </html>
Template1.html
1. Content of template1.html
Template2.html
1. Content of template2.html
Script.js
2.
$scope.templates =
3.
[ { name: 'template1.html', url: 'template1.html'}
4.
5.
, { name: 'template2.html', url: 'template2.html'} ];

$scope.template = $scope.templates[0];
6. }
End to end test

1. it('should load template1.html', function() {
2. expect(element('.doc-example-live [ng-include]').text()).
3.
toMatch(/Content of template1.html/);
4. });
5. it('should load template2.html', function() {
6. select('template').option('1');
7.
8.
expect(element('.doc-example-live [ng-include]').text()).
toMatch(/Content of template2.html/);
9. });
10. it('should change to blank', function() {
11. select('template').option('');
12. expect(element('.doc-example-live [ng-include]').text()).toEqual('');
13. });
ngInit
ngInit
.
1. <ANY ng-init="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-init: {expression};">

2.
...
3. </ANY>
ngInit {expression} .

Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
<div ng-init="greeting='Hello'; person='World'">

{{greeting}} {{person}}!
9.
10.
</div>
</body>
11. </html>
End to end test

1. it('should check greeting', function() {
2.
3.
expect(binding('greeting')).toBe('Hello');
expect(binding('person')).toBe('World');
4. });
ngList
, , .
1. <input ng-list="{string}">
2.
...
3. </input>
1. <input class="ng-list: {string};">

2.
...
3. </input>
ngList(optional) {string=} ,
. /something/,
.

Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
List: <input name="namesInput" ng-model="names" ng-list required>

<span class="error" ng-show="myForm.list.$error.required">
11.
12.
Required!</span>
<tt>names = {{names}}</tt><br/>
13.
14.
<tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
<tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
15.
16.
17.
18.
</form>
</body>
19. </html>
Script.js
2.
$scope.names = ['igor', 'misko', 'vojta'];
3. }
End to end test

2.
3.
expect(binding('names')).toEqual('["igor","misko","vojta"]');
expect(binding('myForm.namesInput.$valid')).toEqual('true');
4. });
5.
7.
input('names').enter('');
8.
9.
expect(binding('names')).toEqual('[]');
expect(binding('myForm.namesInput.$valid')).toEqual('false');
10. });
ngModel
Angular, .
input, select, textarea.
, ngModel.
ngModel :
,
input, textarea select,
(, required, number, email, url),
(valid/invalid, dirty/pristine, validation errors),
css (ng-valid, ng-invalid, ng-dirty, ngpristine),
form.
ngModel, :
input
text
checkbox
radio
number
email
url
select
textarea
1. <input ng-model>
2.
...
3. </input>
1. <input class="ng-model">
2.
...
3. </input>
ngMousedown
ngMousedown ,
mousedown ( ).
1. <ANY ng-mousedown="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mousedown: {expression};">

2.
...
3. </ANY>
ngMousedown {expression}
mousedown. ( $event)
ngClick
ngMouseenter
mouseenter ( ).
1. <ANY ng-mouseenter="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mouseenter: {expression};">

2.
...
3. </ANY>
ngMouseenter {expression} mouseenter. (

$event)
ngClick
ngMouseleave
mouseleave ( ).
1. <ANY ng-mouseleave="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mouseleave: {expression};">

2.
...
3. </ANY>
ngMouseleave {expression} mouseleave. (

$event)
ngClick
ngMousemove
mousemove ( ).
1. <ANY ng-mousemove="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mousemove: {expression};">

2.
...
3. </ANY>
ngMousemove {expression} mousemove. (

$event)
ngClick
ngMouseover
mouseover ( ).
1. <ANY ng-mouseover="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mouseover: {expression};">

2.
...
3. </ANY>
ngMouseover {expression} mouseover. (

$event)
ngClick
ngMouseup
mouseup.
1. <ANY ng-mouseup="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-mouseup: {expression};">

2.
...
3. </ANY>
ngMouseup {expression} mouseup. (

$event)
ngClick
ngMultiple
HTML ,
multiple. ( true, false)
angular .
ngMultiple.
1. <SELECT ng-multiple="{expression}">
2.
...
3. </SELECT>
ngMultiple {expression} Angular .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
Check me check multiple: <input type="checkbox" ng-model="checked"><br/>

<select id="select" ng-multiple="checked">
9.
10.
<option>Misko</option>
<option>Igor</option>
11.
12.
<option>Vojta</option>
<option>Di</option>
13.
14.
</select>
</body>
15. </html>
End to end test

1. it('should toggle multiple', function() {
2.
expect(element('.doc-example-live #select').prop('multiple')).toBeFalsy();
3.
4.
expect(element('.doc-example-live #select').prop('multiple')).toBeTruthy();
5. });
ngNonBindable
, angular,
, . ngNonBindable
angular HTML.
1. <ANY ng-non-bindable>
2.
...
3. </ANY>
1. <ANY class="ng-non-bindable">
2.
...
3. </ANY>
1000.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
<div>Normal: {{1 + 2}}</div>
8.
9.
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

</body>
10. </html>
End to end test

1. it('should check ng-non-bindable', function() {
2.
expect(using('.doc-example-live').binding('1 + 2')).toBe('3');
3.
4.
expect(using('.doc-example-live').element('div:last').text()).
toMatch(/1 \+ 2/);
5. });
ngPluralize
ngPluralize
en-US. angular.js
( Angular i18n ). ngPluralize
,
.
Angular , en-US: "one "

( ) "other " ( ).
( en-US,
"other" 1),
. , "3"
3.
.
ngPluralize
ngPluralize 2 : count when.

offset.
count
.
Angular,
when .
JSON, Angular .
ngPluralize:
1. <ng-pluralize count="personCount"
2.
when="{'0': 'Nobody is viewing.',
3.
4.
'one': '1 person is viewing.',

'other': '{} people are viewing.'}">
5. </ng-pluralize>
, "0: Nobody is viewing." .

, 0 "other" "0 people
are viewing" "Nobody is viewing". , , 12,
"12 people are viewing", "a dozen people are viewing".
({}), ,
. , Angular
{} {{personCount}}. {},
{{numberExpression}}.
ngPluralize offset
offset .
, "4 people are viewing this document",
"John, Kate and 2 others are viewing this document". offset
. :
1. <ng-pluralize count="personCount" offset=2

2.
3.
'1': '{{person1}} is viewing.',
4.
5.
'2': '{{person1}} and {{person2}} are viewing.',

'one': '{{person1}}, {{person2}} and one other person are vie
wing.',
6.
ewing.'}">
7. </ng-pluralize>
'other': '{{person1}}, {{person2}} and {} other people are vi
(one, other),
0, 1 2. , John, ,
"John is viewing". , ,
2 3, Angular 1 ,
. 'one'
"John, Marry and one other person are viewing".
, , 0
. , , 3,
0, 1, 2 3. "one" "other".
, IE:
1. <ng-pluralize
2.
count="{string|expression}"
3.
when="{string}"
4.
[offset="{number}"]>
5. </ng-pluralize>
1. <ANY ng-pluralize
2.
count="{string|expression}"
3.
when="{string}"
4.
5.
[offset="{number}"]>
...
6. </ANY>
count {string|expression} .
when {string} ,
.
offset(optional) {number=} .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
8.
9.
10.
11.
</head>
<body>
Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
Number of People:<input type="text" ng-model="personCount" value="1" /><br/>
12.
13.

14.
15.
Without Offset:
<ng-pluralize count="personCount"
16.
17.

'one': '1 person is viewing.',
18.
19.
'other': '{} people are viewing.'}">

</ng-pluralize><br>
20.
21.

22.
23.
With Offset(2):
<ng-pluralize count="personCount" offset=2
24.
25.

'1': '{{person1}} is viewing.',
26.
27.
'2': '{{person1}} and {{person2}} are viewing.',

'one': '{{person1}}, {{person2}} and one other person a
re viewing.',
28.
29.
'other': '{{person1}}, {{person2}} and {} other people

are viewing.'}">
</ng-pluralize>
30.
31.
</div>
</body>
32. </html>
Script.js
2.
$scope.person1 = 'Igor';
3.
4.
$scope.person2 = 'Misko';
$scope.personCount = 1;
5. }
End to end test

1. it('should show correct pluralized string', function() {
2.
3.
expect(element('.doc-example-live ng-pluralize:first').text()).
toBe('1 person is viewing.');
4.
5.
expect(element('.doc-example-live ng-pluralize:last').text()).
toBe('Igor is viewing.');
6.
7.
using('.doc-example-live').input('personCount').enter('0');
8.
9.
toBe('Nobody is viewing.');
10.
11.
toBe('Nobody is viewing.');
12.
13.
14.
15.
toBe('2 people are viewing.');
16.
17.
toBe('Igor and Misko are viewing.');
18.
19.
20.
21.
22.

23.
24.
toBe('Igor, Misko and one other person are viewing.');
25.
26.
27.
28.

29.
30. });
toBe('Igor, Misko and 2 other people are viewing.');
31.
32. it('should show data-binded names', function() {
33.
34.
35.
36.
toBe('Igor, Misko and 2 other people are viewing.');
37.
38.
using('.doc-example-live').input('person1').enter('Di');
using('.doc-example-live').input('person2').enter('Vojta');
39.
40.
toBe('Di, Vojta and 2 other people are viewing.');
41. });
ngReadonly
HTML , ,
readonly. ( , true, , ,
false) angular
. ngReadonly.
1. <INPUT ng-readonly
2.
expression="{string}">
3.
...
4. </INPUT>
expression {string} Angular .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/
>
8.
<input type="text" ng-readonly="checked" value="I'm Angular"/>
9.
</body>
10. </html>
End to end test

1. it('should toggle readonly attr', function() {
2.
3.
expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
4.
expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
5. });
ngRepeat
ngRepeat .
, ,
, $index
.
,
, :
$index {number} (0..length-1)

$first {boolean} true,
.
$middle {boolean} true,
.
$last {boolean} true,
.
1. <ANY ng-repeat="{repeat_expression}">
2.
...
3. </ANY>
1. <ANY class="ng-repeat: {repeat_expression};">

2.
...
3. </ANY>
.
1000.
ngRepeat {repeat_expression} ,
. :
variable in expression variable ,

expression
, .
: track in cd.tracks.
(key, value) in expression key value

, expression ,
.
: (name, age) in {'adam':10, 'amalie':12}.
,
ngRepeat:
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
9.
10.
11.
12.
13.
14.
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">

I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
15. </body>
16. </html>
End to end test

1. it('should check ng-repeat', function() {
2.
var r = using('.doc-example-live').repeater('ul li');
3.
expect(r.count()).toBe(2);
4.
expect(r.row(0)).toEqual(["1","John","25"]);
5.
expect(r.row(1)).toEqual(["2","Mary","28"]);
6. });
ngSelected
HTML ,
selected. ( , , true, - false)
angular .
ngSelected.
1. <OPTION ng-selected
2.
expression="{string}">
3.
...
4. </OPTION>
expression {string} Angular .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
Check me to select: <input type="checkbox" ng-model="selected"><br/>
8.
9.
<select>
<option>Hello!</option>
10.
11.
<option id="greet" ng-selected="selected">Greetings!</option>

</select>
12. </body>
13. </html>
End to end test

1. it('should select Greetings!', function() {
2.
3.
expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy();
input('selected').check();
4.
expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
5. });
ngShow
ngShow ngHide DOM.
1. <ANY ng-show="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-show: {expression};">

2.
...
3. </ANY>
ngShow {expression} true, ,

.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
Click me: <input type="checkbox" ng-model="checked"><br/>
8.
9.
10.
Show: <span ng-show="checked">I show up when your checkbox is checked.</span>

<br/>
Hide: <span ng-hide="checked">I hide when your checkbox is checked.</span>
</body>
11. </html>
End to end test

1. it('should check ng-show / ng-hide', function() {
2.
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
3.
4.
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
5.
6.
7.
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
8.
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
9. });
ngSrc
Angular {{hash}} src :

, , URL
{{hash}} . ngSrc .
:
1. <img src="http://www.gravatar.com/avatar/{{hash}}"/>
1. <img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
1. <IMG ng-src="{template}">
2.
...
3. </IMG>
ngSrc {template} , {{}}.
ngStyle
ngStyle CSS HTML

.
1. <ANY ng-style="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-style: {expression};">

2.
...
3. </ANY>
ngStyle {expression} ,
CSS,
CSS.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
<input type="button" value="set" ng-click="myStyle={color:'red'}">

<input type="button" value="clear" ng-click="myStyle={}">
9.
10.
<br/>
<span ng-style="myStyle">Sample Text</span>
11.
12.
<pre>myStyle={{myStyle}}</pre>
</body>
13. </html>
Style.css
1. span {
2.
color: black;
3. }
End to end test

1. it('should check ng-style', function() {
2.
expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
3.
4.
element('.doc-example-live :button[value=set]').click();
5.
6.
element('.doc-example-live :button[value=clear]').click();
7. });
ngSubmit
angular onsubmit ( ).
(
).
1. <form ng-submit="{expression}">
2.
...
3. </form>
1. <form class="ng-submit: {expression};">

2.
...
3. </form>
ngSubmit {expression} .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.
<form ng-submit="submit()" ng-controller="Ctrl">

Enter text and hit enter:
10.
11.
<input type="text" ng-model="text" name="text" />

<input type="submit" id="submit" value="Submit" />
12.
13.
<pre>list={{list}}</pre>
</form>
14. </body>
15. </html>
Script.js
2.
3.
$scope.list = [];
$scope.text = 'hello';
4.
5.
$scope.submit = function() {
if (this.text) {
6.
7.
8.
9.
10. }
this.list.push(this.text);
this.text = '';
}
};
End to end test

1. it('should check ng-submit', function() {
2.
3.
expect(binding('list')).toBe('[]');
element('.doc-example-live #submit').click();
4.
5.
expect(binding('list')).toBe('["hello"]');
expect(input('text').val()).toBe('');
6. });
7. it('should ignore empty strings', function() {
8.
9.
expect(binding('list')).toBe('[]');
10.
11.
expect(binding('list')).toBe('["hello"]');
12. });
ngSwitch
DOM.
, IE:
<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
...
<ANY ng-switch-default>...</ANY>
</ANY>
ngSwitch|on {*} , ngswitch-when.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
</head>
7.
<body>
8.
9.
10.
<select ng-model="selection" ng-options="item for item in items">

</select>
11.
12.
<tt>selection={{selection}}</tt>
<hr/>
13.
14.
<div ng-switch on="selection" >

<div ng-switch-when="settings">Settings Div</div>
15.
16.
<span ng-switch-when="home">Home Span</span>

<span ng-switch-default>default</span>
17.
18.
</div>
</div>
19. </body>
20. </html>
Script.js
2.
3.
$scope.items = ['settings', 'home', 'other'];

$scope.selection = $scope.items[0];
4. }
End to end test

1. it('should start in settings', function() {
2. expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/);
3. });
4. it('should change to home', function() {
5. select('selection').option('home');
6. expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/);
7. });
8. it('should select deafault', function() {
9. select('selection').option('other');
10. expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/);
11. });
ngTransclude
DOM .
1. <ANY ng-transclude>
2.
...
3. </ANY>
1. <ANY class="ng-transclude">
2.
...
3. </ANY>
Index.html
1. <!doctype html>
2. <html ng-app="transclude">
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
11.
12.
<pane title="{{title}}">{{text}}</pane>
</div>
13. </body>
14. </html>
Script.js
2.
3.
$scope.title = 'Lorem Ipsum';

$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
4. }
5.
6. angular.module('transclude', [])
7. .directive('pane', function(){
8.
9.
return {
restrict: 'E',
10.
11.
transclude: true,
scope: 'isolate',
12.
13.
locals: { title:'bind' },
template: '<div style="border: 1px solid black;">' +
14.
15.
16.
17.
'<div style="background-color: gray">{{title}}</div>' +

'<div ng-transclude></div>' +
'</div>'
};
18. });
End to end test

1. it('should have transcluded', function() {
2.
input('title').enter('TITLE');
3.
input('text').enter('TEXT');
4.
5.
expect(binding('title')).toEqual('TITLE');
expect(binding('text')).toEqual('TEXT');
6. });
ngView
ngView $route,
(index.html). , ,
, $route.
, IE:
1. <ng-view>
2. </ng-view>
1. <ANY ng-view>
2.
...
3. </ANY>
1. <ANY class="ng-view">
2.
...
3. </ANY>
$viewContentLoaded
, ngView .
:
: ngView

Index.html
1. <!doctype html>
2. <html ng-app="ngView">
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
<div ng-controller="MainCntl">
9.
10.
Choose:
<a href="Book/Moby">Moby</a> |
11.
12.
<a href="Book/Moby/ch/1">Moby: Ch1</a> |

<a href="Book/Gatsby">Gatsby</a> |
13.
14.
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |

<a href="Book/Scarlet">Scarlet Letter</a><br/>
15.
16.
<div ng-view></div>
17.
18.
<hr />
19.
20.
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
21.
22.
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
23.
24.
<pre>$routeParams = {{$routeParams}}</pre>
</div>
25. </body>
26. </html>
Book.html
1. controller: {{name}}<br />
2. Book Id: {{params.bookId}}<br />
Chapter.html
3. Chapter Id: {{params.chapterId}}
Script.js
1. angular.module('ngView', [], function($routeProvider, $locationProvider) {
2.
3.
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
4.
5.
controller: BookCntl
});
6.
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
7.
templateUrl: 'chapter.html',
8.
9.
controller: ChapterCntl
});
10.
11.
// configure html5 to get links working on jsfiddle
12. $locationProvider.html5Mode(true);
13. });
14.
15. function MainCntl($scope, $route, $routeParams, $location) {
16.
17.
$scope.$route = $route;
$scope.$location = $location;
18. $scope.$routeParams = $routeParams;

19. }
20.
21. function BookCntl($scope, $routeParams) {
22.
23.
$scope.name = "BookCntl";
$scope.params = $routeParams;
24. }
25.
26. function ChapterCntl($scope, $routeParams) {
27. $scope.name = "ChapterCntl";
28. $scope.params = $routeParams;
29. }
End to end test

1. it('should load and compile correct template', function() {
2.
3.
element('a:contains("Moby: Ch1")').click();
var content = element('.doc-example-live [ng-view]').text();
4.
5.
expect(content).toMatch(/controller\: ChapterCntl/);
expect(content).toMatch(/Book Id\: Moby/);
6.
7.
expect(content).toMatch(/Chapter Id\: 1/);
8.
9.
element('a:contains("Scarlet")').click();
content = element('.doc-example-live [ng-view]').text();
10.
11.
expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/);
12. });
script
script, text/ng-template,
$templateCache, ngInclude, ngView
.
, IE:
1. <script
2.
type="text/ng-template">
3. </script>
type {'text/ng-template'} 'text/ng-template'
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
</head>
6.
7.
<body>
<script type="text/ng-template" id="/tpl.html">
8.
9.
Content of the template.

</body>
10. </html>
End to end test

1. it('should load template defined inside script tag', function() {
2.
element('#tpl-link').click();
3.
expect(element('#tpl-content').text()).toMatch(/Content of the template/);
4. });
select
HTML SELECT angular .
ngOptions
ngOptions
<option> <select> ,
ngOptions . select ,
,
ngModel selected.
, <option>,
, <select>.
null "not selected". .
: ngOptions <option>
ngRepeat select
. , option
.

, IE:
1. <select
2.
ngModel="{string}"
3.
[name="{string}"]
4.
5.
[required]
[ngRequired="{string}"]
6.
[ngOptions="{comprehension_expression}"]>
7. </select>
ngModel {string} angular .
name(optional) {string=} ,
.
, .
ngRequired(optional) {string=} required

required , ngRequired true.
ngRequired required
required.
ngOptions(optional) {comprehension_expression=}
:
- :
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array
- :
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object
array / object: , / .
value: ,
array object .
key: ,
object .
label: ,
<option>.
value (, value.propertyName).
select: ,
<select> . ,
select value.
group: ,
option DOM <optgroup>.

Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
<div ng-controller="MyCntrl">
9.
10.
<ul>
<li ng-repeat="color in colors">
11.
12.
Name: <input ng-model="color.name">

[<a href ng-click="colors.splice($index, 1)">X</a>]
13.
14.
</li>
<li>
15.
16.
[<a href ng-click="colors.push({})">add</a>]

</li>
17.
18.
</ul>
<hr/>
19.
20.
Color (null not allowed):

<select ng-model="color" ng-options="c.name for c in colors"></select><br>
21.
22.
Color (null allowed):
23.
24.
<span class="nullable">
<select ng-model="color" ng-options="c.name for c in colors">
25.
26.
<option value="">-- chose color --</option>

</select>
27.
28.
</span><br/>
29.
30.
Color grouped by shade:

<select ng-model="color" ng-options="c.name group by c.shade for c in colors
">
31.
</select><br/>
32.
33.
34.
35.
Select <a href ng-click="color={name:'not in list'}">bogus</a>.<br>

<hr/>
36.
37.
Currently selected: {{ {selected_color:color} }}

<div style="border:solid 1px black; height:20px"
38.
39.
ng-style="{'background-color':color.name}">
</div>
40.
41.
</div>
</body>
42. </html>
Script.js
1. function MyCntrl($scope) {
2.
$scope.colors = [
3.
{name:'black', shade:'dark'},
4.
5.
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
6.
7.
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
8.
9.
];
$scope.color = $scope.colors[2]; // red
10. }
End to end test

1. it('should check ng-options', function() {
2.
expect(binding('{selected_color:color}')).toMatch('red');
3.
4.
select('color').option('0');
expect(binding('{selected_color:color}')).toMatch('black');
5.
6.
using('.nullable').select('color').option('');
expect(binding('{selected_color:color}')).toMatch('null');
7. });
textarea
HTML textarea angular .

, input .
, IE:
1. <textarea
2.
ngModel="{string}"
3.
4.
[name="{string}"]
[required]
5.
6.
[ngRequired="{string}"]
[ngMinlength="{number}"]
7.
8.
[ngMaxlength="{number}"]
[ngPattern="{string}"]
9.
[ngChange="{string}"]>
10. </textarea>
Parameters
ngModel {string} angular .

name(optional) {string=} ,
.
required(optional) {string=} required

, .
ngRequired(optional) {string=}
required required , ngRequired
true. ngRequired required
required.
ngMinlength(optional) {number=} minlength

, .
ngMaxlength(optional) {number=} maxlength

, .
ngPattern(optional) {string=} pattern

/regexp/ regexp
.
ngChange(optional) {string=} Angular ,

.
currency
($1,234.56). ,
, .
HTML
{{ currency_expression | currency[:symbol] }}
JavaScript
$filter('currency')(amount[, symbol])
amount {number} .
symbol(optional) {string=} .
{string} .
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
<body>
8.
9.
<input type="number" ng-model="amount"> <br>
10.
11.
default currency symbol ($): {{amount | currency}}<br>

custom currency identifier (USD$): {{amount | currency:"USD$"}}
12.
13.
</div>
</body>
14. </html>
Script.js
2.
$scope.amount = 1234.56;
3. }
End to end test

1. it('should init with 1234.56', function() {
2.
3.
expect(binding('amount | currency')).toBe('$1,234.56');
expect(binding('amount | currency:"USD$"')).toBe('USD$1,234.56');
4. });
5. it('should update', function() {
6.
7.
input('amount').enter('-1234');
expect(binding('amount | currency')).toBe('($1,234.00)');
8.
expect(binding('amount | currency:"USD$"')).toBe('(USD$1,234.00)');
9. });
date
.
:
'yyyy': 4 (, 1 => 0001, 2010 => 2010)

'yy': 2 (00-99). (, 2001 => 01, 2010 => 10)
'y': 1 (, 1 => 1, 199 => 199)
'MMMM': (January-December)
'MMM': (Jan-Dec)
'MM': , (01-12)
'M': , (1-12)
'dd': , (01-31)
'd': , (1-31)
'EEEE': ,(Sunday-Saturday)
'EEE': , (Sun-Sat)
'HH': , (00-23)
'H': (0-23)
'hh': , 12- (01-12)
'h': 12- (1-12)
'mm': (00-59)
'm': (0-59)
'ss': (00-59)
's': (0-59)
'a': am/pm 12- .
'Z': 4 ( ), ( ) (-1200+1200)
'medium': 'MMM d, y h:mm:ss a' en_US (, Sep 3, 2010

12:05:08 pm)
'short': 'M/d/yy h:mm a' en_US (, 9/3/10 12:05 pm)
'fullDate': 'EEEE, MMMM d,y' en_US (, Friday,
September 3, 2010)
'longDate': 'MMMM d, y' en_US (, September 3, 2010)
'mediumDate': 'MMM d, y' en_US (, Sep 3, 2010)
'shortDate': 'M/d/yy' en_US (, 9/3/10)
'mediumTime': 'h:mm:ss a' en_US (, 12:05:08 pm)
'shortTime': 'h:mm a' en_US ( 12:05 pm)
.
(, "h 'in the morning'").
, (, "h
o''clock").
HTML
{{ date_expression | date[:format] }}
JavaScript
$filter('date')(date[, format])
date {(Date|number|string)} : Date,

( ) ISO
8601 (, yyyy-MM-ddTHH:mm:ss.SSSZ yyyy-MM-ddTHH:mmZ, yyyyMM-dd yyyyMMddTHHmmssZ). ( )
, .
format(optional) {string=} ( ).
, mediumDate.
{string} ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
</head>
<body>
7.
8.
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:

{{1288323623006 | date:'medium'}}<br>
9.
10.
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
11.
12.
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:

{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}<br>
13. </body>
14. </html>
End to end test

1. it('should format date', function() {
2.
3.
expect(binding("1288323623006 | date:'medium'")).
toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/);
4.
5.
expect(binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).

toMatch(/2010\-10\-2\d \d{2}:\d{2}:\d{2} (\-|\+)?\d{4}/);
6.
7.
expect(binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).

toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/);
8. });
filter
.
: Array Angular.
ng.$filter Angular .
HTML
{{ filter_expression | filter:expression }}
JavaScript
$filter('filter')(array, expression)
array {Array} .
expression {string|Object|function()}
.
:
: ,
.
,
. , !.
: -,
. , {name:"M", phone:"1"}
, name "M"
phone "1". $ (
{$:"text"})
. ,
.
:
. .
,
true.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
<div ng-init="friends = [{name:'John', phone:'555-1276'},

{name:'Mary', phone:'800-BIG-MARY'},
9.
10.
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
11.
12.
{name:'Julie', phone:'555-8765'}]"></div>
13.
14.
15.
16.
Search: <input ng-model="searchText">

<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
17.
18.
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
19.
20.
</tr>
</table>
21.
22.
<hr>
Any: <input ng-model="search.$"> <br>
23.
24.
Name only <input ng-model="search.name"><br>

Phone only <input ng-model="search.phone"><br>
25.
26.
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr>
27.
28.
<tr ng-repeat="friend in friends | filter:search">

29.
30.
</tr>
31.
32.
</table>
</body>
33. </html>
End to end test

1. it('should search across all fields when filtering with a string', function() {
2.
3.
input('searchText').enter('m');
expect(repeater('#searchTextResults tr', 'friend in friends').column('friend.nam
e')).
toEqual(['Mary', 'Mike', 'Adam']);
4.
5.
6.
input('searchText').enter('76');
7.
expect(repeater('#searchTextResults tr', 'friend in friends').column('friend.nam

e')).
8.
toEqual(['John', 'Julie']);
9. });
10.
11. it('should search in specific fields when filtering with a predicate object', func
12.
13.
tion() {
input('search.$').enter('i');
expect(repeater('#searchObjResults tr', 'friend in friends').column('friend.name
')).
14.
toEqual(['Mary', 'Mike', 'Julie']);
15. });
json
JavaScript JSON.
.
JSON.
HTML
{{ json_expression | json }}
JavaScript
$filter('json')(object)
object {*} JavaScript ( )

.
{string} JSON.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
</head>
<body>
7.
8.
<pre>{{ {'name':'value'} | json }}</pre>

</body>
9. </html>
End to end test

1. it('should jsonify filtered objects', function() {
2.
expect(binding("{'name':'value'}")).toMatch(/\{\n
"name": ?"value"\n}/);
3. });
limitTo
.
,
( ) limit.
: Array Angular.
ng.$filter Angular.
1. filter:limitTo(array, limit);
array {Array} .
limit {string|Number} .
limit , .
. limit ,
.
{Array} , ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
5.
<head>
6.
</head>
7.
<body>
8.
9.
Limit {{numbers}} to: <input type="integer" ng-model="limit">
10.
11.
<p>Output: {{ numbers | limitTo:limit }}</p>

</div>
12. </body>
13. </html>
Script.js
2.
3.
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.limit = 3;
4. }
End to end test

1. it('should limit the numer array to first three items', function() {
2.
3.
expect(element('.doc-example-live input[ng-model=limit]').val()).toBe('3');
expect(binding('numbers | limitTo:limit')).toEqual('[1,2,3]');
4. });
5.
6. it('should update the output when -3 is entered', function() {
7.
input('limit').enter(-3);
8.
expect(binding('numbers | limitTo:limit')).toEqual('[7,8,9]');
9. });
10.
11. it('should not exceed the maximum size of input array', function() {
12.
13.
input('limit').enter(100);
expect(binding('numbers | limitTo:limit')).toEqual('[1,2,3,4,5,6,7,8,9]');
14. });
lowercase
HTML
{{ lowercase_expression | lowercase }}
JavaScript
$filter('lowercase')()
number
.
, .
HTML
{{ number_expression | number[:fractionSize] }}
JavaScript
$filter('number')(number[, fractionSize])
number {number|string} .
fractionSize(optional=2) {(number|string)=}
.
{string} ,
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
Enter number: <input ng-model='val'><br>

Default formatting: {{val | number}}<br>
11.
12.
No fractions: {{val | number:0}}<br>

Negative number: {{-val | number:4}}
13.
14.
</div>
</body>
15. </html>
Script.js
2.
$scope.val = 1234.56789;
3. }
End to end test

1. it('should format numbers', function() {
2.
3.
expect(binding('val | number')).toBe('1,234.568');
expect(binding('val | number:0')).toBe('1,235');
4.
expect(binding('-val | number:4')).toBe('-1,234.5679');
5. });
6.
8.
9.
input('val').enter('3374.333');
expect(binding('val | number')).toBe('3,374.333');
10.
11.
expect(binding('val | number:0')).toBe('3,374');
expect(binding('-val | number:4')).toBe('-3,374.3330');
12. });
orderBy
.
: Array Angular .
ng.$filter Angular.
1. filter:orderBy(array, expression[, reverse]);
array {Array}
expression {function(*)|string|Array.<(function(*)|string)>} ,
.
:
: .
<, =, >.
: , ,
'name' 'name'. +
(, +name -name).
: .
, ,
, ..
reverse(optional) {boolean=} .
{Array} .

Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>

<hr/>
11.
12.
[ <a href="" ng-click="predicate=''">unsorted</a> ]

<table class="friend">
13.
14.
<tr>
<th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
15.
16.
(<a href ng-click="predicate = '-name'; reverse=false">^</a>)</th>

<th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Nu
17.
mber</a></th>
<th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></t
h>
18.
</tr>
19.
20.
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">

21.
22.
<td>{{friend.age}}</td>
23.
24.
25.
26.
</tr>
</table>
</div>
</body>
27. </html>
Script.js
2.
3.
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
4.
5.
{name:'Mary', phone:'555-9876', age:19},

{name:'Mike', phone:'555-4321', age:21},
6.
7.
{name:'Adam', phone:'555-5678', age:35},

{name:'Julie', phone:'555-8765', age:29}]
8.
$scope.predicate = '-age';
9. }
End to end test

1. it('should be reverse ordered by aged', function() {
2.
expect(binding('predicate')).toBe('-age');
3.
expect(repeater('table.friend', 'friend in friends').column('friend.age')).
4.
toEqual(['35', '29', '21', '19', '10']);
5.
6.
expect(repeater('table.friend', 'friend in friends').column('friend.name')).

toEqual(['Adam', 'Julie', 'Mike', 'Mary', 'John']);
7. });
8.
9. it('should reorder the table when user selects different predicate', function() {
10. element('.doc-example-live a:contains("Name")').click();
11.
12.

toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']);
13.
14.
expect(repeater('table.friend', 'friend in friends').column('friend.age')).

toEqual(['35', '10', '29', '19', '21']);
15.
16.
element('.doc-example-live a:contains("Phone")').click();
17.
18.
expect(repeater('table.friend', 'friend in friends').column('friend.phone')).

toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']);
19.
20.

toEqual(['Mary', 'Julie', 'Adam', 'Mike', 'John']);
21. });
uppercase
HTML
{{ uppercase_expression | uppercase }}
JavaScript
$filter('uppercase')()
$anchorScroll
, $location.hash()
, Html5.
$location.hash()
.
$anchorScrollProvider.disableAutoScrolling().
$window
$location
$rootScope

1. $anchorScroll();
$cacheFactory
1. $cacheFactory(cacheId[, options]);
cacheId {string} .
options(optional) {object=} ,
. :
{number=} capacity LRU.
{object} :
{object} info() , .
{void} put({string} key, {*} value) - .
{{*}} get({string} key) undefined
.
{void} remove({string} key) - .
{void} removeAll() , -.
{void} destroy() $cacheFactory.
$compile
HTML DOM ,
.
DOM DOM
.
, .
, ,
,
DOM.
Index.html
1. <!doctype html>
2. <html ng-app="compile">
3.
<head>
4.
5.
6.
</head>
7.
8.
<body>
9.
10.
<input ng-model="name"> <br>

<textarea ng-model="html"></textarea> <br>
11.
12.
<div compile="html"></div>
</div>
13. </body>
14. </html>
Script.js
1. // $compileProvider
2. angular.module('compile', [], function($compileProvider) {
3.
// 'compile',
4.
5.
// . '$compile'
$compileProvider.directive('compile', function($compile) {
//
return function(scope, element, attrs) {
6.
7.
8.
9.
scope.$watch(
function(scope) {
// 'compile'
return scope.$eval(attrs.compile);
10.
11.
12.
13.
},
function(value) {
14.
15.
// 'compile'
// DOM
16.
17.
element.html(value);
18.
19.
// DOM
// .
// : .childNodes
//
20.
21.
22.
23.
$compile(element.contents())(scope);
}
24.
25.
);
};
26. })
27. });
28.
30.
31.
32. }
$scope.name = 'Angular';
$scope.html = 'Hello {{name}}';
End to end test

1. it('should auto compile', function() {
2.
3.
expect(element('div[compile]').text()).toBe('Hello Angular');
input('html').enter('{{name}}!');
4.
expect(element('div[compile]').text()).toBe('Angular!');
5. });
1. $compile(element, transclude, maxPriority);
element {string|DOMElement} HTML

.
transclude {function(angular.Scope[, cloneAttachFn]}

.
maxPriority {number} (
, )
{function(scope[, cloneAttachFn])} ,
. ( DOM ) . :
scope - .
cloneAttachFn - cloneAttachFn ,
cloneAttachFn
DOM .
cloneAttachFn :
cloneAttachFn(clonedElement, scope) :
clonedElement .
scope .
.
, , cloneAttachFn.
, $digest,
Angular .
, :
, ()
DOM .
1. var element = $compile('<p>{{total}}</p>')(scope);
,
.
cloneAttachFn:
1. var templateHTML = angular.element('<p>{{total}}</p>'),
2.
scope = ....;
3.
4. var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scop
e) {
5.
// DOM ,
6. });
7.
8. // DOM `clone`
, HTML Angular
.
$controller
$controller .
$injector, ,
BC .
$injector
1. $controller(constructor, locals);
Parameters
constructor {Function|string} ,
. , ,
, :
,
$controllerProvider
, ,

window[constructor] window
locals {Object} .
{Object} .
$document
jQuery (lite)-, window.document.
$window
$exceptionHandler
angular .
$log.error,
.
, angular-mocks.js, mock
$exceptionHandler .
$log
1. $exceptionHandler(exception[, cause]);
exception {Error} , .
cause(optional) {string=}
.
$filter
.
:
{{ expression [| filter_name[:parameter_value] ... ] }}
1. $filter(name);
name {String}
{Function}
$http
$http Angular,
HTTP XMLHttpRequest JSONP.
$http, $httpBackend
mock.
, $resource.
$http API deferred/promise APIs $q.
API ,
, ,
.
$http ,
HTTP , promise $http
: success error.
1. $http({method: 'GET', url: '/someUrl'}).

2.
success(function(data, status, headers, config) {
3.
4.
5.
6.
7.
8.
9.
//
//
}).
error(function(data, status, headers, config) {
// ,
//
});
$http promise,
then ,
. API
.
200 299 ,
success. ,
, XMLHttpRequest ,
error .
$http HTTP URL,

POST/PUT ,
:
1. $http.get('/someUrl').success(successCallback);
2. $http.post('/someUrl', data).success(successCallback);
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
HTTP
$http HTTP .

$httpProvider.defaults.headers, :
$httpProvider.defaults.headers.common ( ):
Accept: application/json, text/plain, * / *
X-Requested-With: XMLHttpRequest
$httpProvider.defaults.headers.post: ( POST )
Content-Type: application/json
$httpProvider.defaults.headers.put ( PUT )
Content-Type: application/json
,
. HTTP ,
POST PUT, HTTP
, , $httpProvider.defaults.headers.get['MyHeader']='value'.
,
$http.defaults , .
, .
, Angular :
:
data , JSON.
XSRF, ( ).
JSON, JSON.
,
$httpProvider.defaults.transformRequest
$httpProvider.defaults.transformResponse.
, push
unshift .
,
, .
, /,
$http transformRequest / transformResponse
.
, cache true.
, $http .
.
, , ,
.
GET URL , ,
, .
, $q and deferred/promise APIs.

, ,
,
http , ,
. promise apis
, .
, $httpProvider
$httpProvider.responseInterceptors.
( ) promise
promise.
1. //
2. $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
3.
4.
return function(promise) {
return promise.then(function(response) {
// -
}, function(response) {
5.
6.
// -
if (canRecover(response)) {
7.
8.
9.
10.
return responseOrNewPromise
}
11.
12.
return $q.reject(response);
});
13. }
14. });
15.
16. $httpProvider.responseInterceptors.push('myHttpInterceptor');
17.
18.
19. //
20. $httpProvider.responseInterceptors.push(function($q, dependency1, dependency2) {
21.
22.
return function(promise) {
// -
23. }
24. });
-, :
JSON
XSRF
, , . Angular
, ,
.
JSON
JSON - URL JSON,
JSONP . ,
")]}',\n" JSON. Angular
JSON.
, :
1. ['one','two']
, :
1. )]}',
2. ['one','two']
Angular , JSON.
Cross Site Request Forgery (XSRF)

XSRF ,
. Angular XSRF.
XHR , $http XSRF-TOKEN
HTTP X-XSRF-TOKEN. JavaScript,
, , XHR JavaScript
.
,
JavaScript XSRF-TOKEN HTTP GET .
XHR , HTTP
X-XSRF-TOKEN, .
( ,
JavaScript ).
.
$httpBackend
$browser
$cacheFactory
$rootScope
$q
$injector
1. $http(config);
config {object} .
:
method {string} HTTP (, 'GET', 'POST', ..)

url {string} URL
.
params {Object.<string|Object>} ,
?key1=value1&key2=value2 url. ,
JSON.
data {string|Object} .
headers {Object} , HTTP ,
.
transformRequest {function(data, headersGetter)|Array.<function(data,
headersGetter)>} .
http (
) .
transformResponse {function(data, headersGetter)|Array.<function(data,
headersGetter)>} .
http (
) .
cache {boolean|Cache} true, $http
GET ,
$cacheFactory, .
timeout {number} .
withCredentials - {boolean} withCredentials
XHR .
{HttpPromise} promise then

:success error. then ,
, ,
, . success error
,
.
then. :
data {string|Object}
.
status {number} HTTP .
headers {function([headerName])} .
config {Object} ,
.
delete(url, config)
DELETE.
:
url {string} URL
config(optional) {Object=}
:
{HttpPromise}
get(url, config)
GET.
:
url {string} URL
:
{HttpPromise}
head(url, config)
HEAD.
:
url {string} URL
:
{HttpPromise}
jsonp(url, config)
JSONP.
:
url {string} URL

. JSON_CALLBACK.
:
{HttpPromise}
post(url, data, config)
POST.
:
url {string} URL
data {*}
{HttpPromise} Future object
put(url, data, config)
PUT.
:
url {string} URL

data {*}
{HttpPromise}
Properties
defaults
$httpProvider.defaults.
.
" HTTP " " ".
pendingRequests
.
.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
<div ng-controller="FetchCtrl">
9.
10.
<select ng-model="method">
<option>GET</option>
11.
12.
<option>JSONP</option>
</select>
13.
14.
<input type="text" ng-model="url" size="80"/>

<button ng-click="fetch()">fetch</button><br>
15.
16.
<button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>

<button ng-click="updateModel('JSONP', 'http://angularjs.org/greet.php?callb
17.
ack=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button>
<button ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&cal
18.
lback=JSON_CALLBACK')">Invalid JSONP</button>
<pre>http status code: {{status}}</pre>
19.
<pre>http response data: {{data}}</pre>
20.
21.
</div>
</body>
22. </html>
http-hello.html
1. Hello, $http!
Script.js
1. function FetchCtrl($scope, $http, $templateCache) {
2.
3.
$scope.method = 'GET';
$scope.url = 'http-hello.html';
4.
5.
$scope.fetch = function() {
6.
7.
$scope.code = null;
$scope.response = null;
8.
9.
$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
10.
11.
success(function(data, status) {
$scope.status = status;
12.
13.
$scope.data = data;
}).
14.
15.
error(function(data, status) {
$scope.data = data || "Request failed";
16.
17.
$scope.status = status;
});
18.
19.
};
20.
21.
$scope.updateModel = function(method, url) {

$scope.method = method;
22.
23.
$scope.url = url;
};
24. }
End to end test

1. it('should make an xhr GET request', function() {
2.
element(':button:contains("Sample GET")').click();
3.
4.
element(':button:contains("fetch")').click();
expect(binding('status')).toBe('200');
5.
expect(binding('data')).toMatch(/Hello, \$http!/);
6. });
7.
8. it('should make a JSONP request to angularjs.org', function() {
9.
10.
element(':button:contains("Sample JSONP")').click();
11.
12.
expect(binding('data')).toMatch(/Super Hero!/);
13. });
14.
15. it('should make JSONP request to invalid URL and invoke the error handler',
16.
function() {
17.
18.
element(':button:contains("Invalid JSONP")').click();
19.
20.
expect(binding('data')).toBe('Request failed');
21. });
$httpBackend
HTTP backend
XMLHttpRequest JSONP .
,
: $http $resource.
mock
.
$httpBackend
$browser
$window
$document
$interpolate
.
HTML $compile . $interpolateProvider
.
var $interpolate = ...; // injected
var exp = $interpolate('Hello {{name}}!');
expect(exp({name:'Angular'}).toEqual('Hello Angular!');
$parse
1. $interpolate(text[, mustHaveExpression]);
text {string} .
mustHaveExpression(optional) {boolean=} true,

, .
, ,
null.
{function(context)} ,
. :
context: , .
endSymbol()
, . }}.
$interpolateProvider#endSymbol .
:
{string} .
startSymbol()
, . {{.
$interpolateProvider#startSymbol .
:
{string} .
$locale
$locale Angular.
api:
id {string} (, en-us)
$location
$location URL ( window.location)

URL . URL
$location $location .
$location:
URL ,
URL.
URL.
URL ,

( ).
.
URL (protocol, host, port, path, search,
hash).
Angular: $location
$browser
$sniffer
$rootElement
absUrl()
.
url
RFC 3986.
:
{string} url
hash(hash)
.
.
, $location.
:
hash(optional) {string=}
{string}
host()
.
url.
:
{string} url.
path(path)
.
url .
, , $location.
: (/),
, .
:
path(optional) {string=}
:
{string}
port()
, url.
:
{Number}
protocol()
url.
:
{string} url
replace()
, $location $digest
, .
search(search, paramValue)
.
( ) url .
, $location.
:
search(optional) {string|object<string,string>=} ,

paramValue(optional) {string=} search ,

paramValue .
null, .
:
{string}
url(url)
url.
url (, /path?a=b#hash) .
, ,
$location.
:
url(optional) {string=} url
(, /path?a=b#hash)
:
{string} url
$log
.
( ).
.
$window
error()
info()
log()
warn()
Index.html
1. <!doctype html>
2. <html ng-app>
3.
<head>
4.
5.
6.
7.
</head>
<body>
8.
9.
<div ng-controller="LogCtrl">
<p>Reload this page with open console, enter text and hit the log button...<
/p>
10.
Message:
11.
12.
<input type="text" ng-model="message"/>

<button ng-click="$log.log(message)">log</button>
13.
<button ng-click="$log.warn(message)">warn</button>
14.
<button ng-click="$log.info(message)">info</button>
15.
<button ng-click="$log.error(message)">error</button>
16.
17.
</div>
</body>
18. </html>
Script.js
1. function LogCtrl($scope, $log) {
2.
$scope.$log = $log;
3.
$scope.message = 'Hello World!';
4. }
$parse
Angular .
1. var getter = $parse('user.name');
2. var setter = getter.assign;
3. var context = {user:{name:'angular'}};
4. var locals = {user:{name:'local'}};
5.
6. expect(getter(context)).toEqual('angular');
7. setter(context, 'newValue');
8. expect(context.user.name).toEqual('newValue');
9. expect(getter(context, locals)).toEqual('local');
1. $parse(expression);
expression {string} .
{function(context, locals)} ,
:
context {object} ,
( ).
locals {object=} ,
context.
assign, ,
.
$q
promise/deferred , Kris
Kowal's Q.
CommonJS Promise promise ,

,
.
, deferred promise API
try, catch throw .
1. // , `$q` `scope`,
2. // (
).
3.
4. function asyncGreet(name) {
5.
6.
var deferred = $q.defer();
7.
8.
setTimeout(function() {
// ,
// $apply .
scope.$apply(function() {
9.
10.
11.
12.
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
13.
14.
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
15.
16.
17.
18.
}
});
}, 1000);
19. return deferred.promise;

20. }
21.
22. var promise = asyncGreet('Robin Hood');
23. promise.then(function(greeting) {
24. alert('Success: ' + greeting);
25. }, function(reason) {
26. alert('Failed: ' + reason);
27. });
, .
promise deferred API.
promise api ,
(CPS) .
Q ,
promise.
Deferred API
deferred $q.defer().
deferred Promise
.
resolve(value) promise value. value

$q.reject, promise .
reject(reason) promise reason.
$q.reject.
promise {Promise} promise deferred.
Promise API
promise
deferred.promise.
promise
(deferred) , .
then(successCallback, errorCallback) , promise

, ,
.
.
promise,
successCallback errorCallback.
promise
then promise,
promise:
1. promiseB = promiseA.then(function(result) {
2.
return result + 1;
3. });
4.
5. // promiseB promiseA
6. // promiseA 1
promise
promise ( ), /
promise . api
$http.
Q $q
:
$q ng.$rootScope.Scope
, ,
,
.
$q promise angular, ,
promise , , .
Q , $q, . $q ,
.
1. it('should simulate promise', inject(function($q, $rootScope) {

2.
3.
var deferred = $q.defer();

var promise = deferred.promise;
4.
5.
var resolvedValue;
6.
7.
promise.then(function(value) { resolvedValue = value; });

expect(resolvedValue).toBeUndefined();
8.
9.
// promise
10.
11.
deferred.resolve(123);
// , 'then' .
12.
13.
// , promise API ,
// .
14.
15.
expect(resolvedValue).toBeUndefined();
16.
17.
// promise 'then' $apply().

$rootScope.$apply();
18. expect(resolvedValue).toEqual(123);
19. });
$rootScope
all(promises)
promise promise, promise

.
:
promises {Array.<Promise>} promise.
{Promise} promise,
, promise ,
promises. promise , promise
.
defer()
Deferred , .
:
{Deferred}
deferred.
reject(reason)
promise reason.
promise. promise ,
.
deferred/promise try/catch/throw,
reject throw JavaScript. ,
promise
promise, "throw" ,
reject.
1. promiseB = promiseA.then(function(result) {
2.
// success: - promiseB
3.
//

4.
return result;
5. }, function(reason) {
// error: , ,
//
promiseB newPromiseOrValue,
6.
7.
//
promiseB
if (canHandle(reason)) {
8.
9.
//
return newPromiseOrValue;
10.
11.
12.
13.
}
return $q.reject(reason);
14. });
reason {*} , , ,
.
:
{Promise} promise reason.
when(value)
, promise $q promise.
, , promise,
promise , .
:
value {*} promise
{Promise} promise promise
$rootElement
Angular. ngApp
, angular.bootstrap.
$injector , $rootElement.injector().
$rootScope
.
.
.
: .
$route
URL (HTML ).
$location.url()
.
$routeProvider API.
$route ngView $routeParams.
$location
$routeParams
reload()
, $location .
ngView , .
current
. :
controller: , .
locals: , $controller
. locals resolve.
locals :
routes
$scope .
$template HTML .
Events
$routeChangeError
, promise .
:
:
:
current {Route} .
previous {Route} .
rejection {Route} promise. promise.
$routeChangeStart
. route
, .
, ,
resolve. ,
$routeChangeSuccess.
:
:
:
next {Route} .
current {Route} .
$routeChangeSuccess
. ngView
.
:
:
:
angularEvent {Object} .
current {Route} .
previous {Route|Undefined} ,
undefined, .
$routeUpdate
reloadOnSearch false,
.
:
:
Example
URL $route
URL, ngView .
, ,
.
Index.html
1. <!doctype html>
2. <html ng-app="ngView">
3.
<head>
4.
5.
6.
7.
8.
9.
</head>
<body>
<div ng-controller="MainCntl">
Choose:
10.
11.
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
12.
13.
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
14.
15.
<a href="Book/Scarlet">Scarlet Letter</a><br/>
16.
17.
<div ng-view></div>
<hr />
18.
19.
<pre>$location.path() = {{$location.path()}}</pre>
20.
21.
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
22.
23.
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
24.
25.
</div>
</body>
26. </html>
Book.html
Chapter.html
3. Chapter Id: {{params.chapterId}}
Script.js
1. angular.module('ngView', [], function($routeProvider, $locationProvider) {
2.
3.
4.
5.
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCntl,
resolve: {
6.
7.
// I will cause a 1 second delay

delay: function($q, $timeout) {
8.
9.
var delay = $q.defer();

$timeout(delay.resolve, 1000);
10.
11.
return delay.promise;
}
12.
13.
}
});
14.
15.
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
16.
17.
controller: ChapterCntl
});
18.
19.
// configure html5 to get links working on jsfiddle
20. $locationProvider.html5Mode(true);
21. });
22.
23. function MainCntl($scope, $route, $routeParams, $location) {
24.
25.
$scope.$route = $route;
$scope.$location = $location;
26. $scope.$routeParams = $routeParams;

27. }
28.
29. function BookCntl($scope, $routeParams) {
30.
31.
$scope.name = "BookCntl";
$scope.params = $routeParams;
32. }
33.
34. function ChapterCntl($scope, $routeParams) {
35. $scope.name = "ChapterCntl";
36. $scope.params = $routeParams;
37. }
End to end test

1. it('should load and compile correct template', function() {
2.
3.
element('a:contains("Moby: Ch1")').click();
var content = element('.doc-example-live [ng-view]').text();
4.
5.
expect(content).toMatch(/controller\: ChapterCntl/);
expect(content).toMatch(/Book Id\: Moby/);
6.
7.
expect(content).toMatch(/Chapter Id\: 1/);
8.
9.
element('a:contains("Scarlet")').click();
sleep(2); // promises are not part of scenario waiting
10.
content = element('.doc-example-live [ng-view]').text();
11.
expect(content).toMatch(/controller\: BookCntl/);
12. expect(content).toMatch(/Book Id\: Scarlet/);

13. });
$routeParams
. ,
$location search(), path(). path , $route.
, path search.
$routeParams (
) .
$route
$templateCache
html .
$cacheFactory.
$timeout
Angular window.setTimeout. fn
try/catch $exceptionHandler.
promise
, .
, $timeout.cancel(promise).
$timeout.flush()
.
$browser
1. $timeout(fn[, delay][, invokeApply]);
Parameters
fn {function()} .
delay(optional=0) {number=} .
invokeApply(optional=true) {boolean=} false

, fn $apply.
{Promise} Promise . promise

fn.
Methods
cancel(promise)
, promise. promise
.
:
promise(optional) {Promise=} Promise $timeout.
:
{boolean} true, .
$window
window. window JavaScript,

, ..
. angular $window, ..
, .
,
window.
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
<body>
7.
8.
9.
<input ng-init="$window = $service('$window'); greeting='Hello World!'" type="

text" ng-model="greeting" />
<button ng-click="$window.alert(greeting)">ALERT</button>
</body>
10. </html>
Module
modules Angular.
config(configFn)
,
.
:
configFn {Function} .
.
constant(name, object)
,
. $provide.constant().
:
name {string}
object {*} .
controller(name, constructor)
$controllerProvider.register().
:
name {string} .
constructor {Function} .
directive(name, directiveFactory)
$compileProvider.directive().
:
name {string}
directiveFactory {Function}
.
factory(name, providerFunction)
$provide.factory().
:
name {string}
providerFunction {Function}
.
filter(name, filterFactory)
$filterProvider.register().
:
name {string} .
filterFactory {Function}
.
provider(name, providerType)
$provide.provider().
:
name {string}
providerType {Function}
.
run(initializationFn)
,
.
:
initializationFn {Function}
. .
service(name, constructor)
$provide.service().
:
name {string}
constructor {Function}
.
value(name, object)
$provide.value().
:
name {string}
object {*} .
name
:
{string} .
requires
, .
:
{Array.<string>} ,
.
Attributes
/ ,
DOM.
{{ }}. , .. Angular
:
<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">
$set(name, value)
DOM .
:
name {string} .
$attr .
value {string} .
$attr
:
{object} DOM
. ,
.
Scope
$rootScope
$injector. $new().
( , HTML .)
, ,
.
1. angular.injector(['ng']).invoke(function($rootScope) {
2.
var scope = $rootScope.$new();
3.
scope.salutation = 'Hello';
4.
5.
scope.name = 'World';
6.
7.
expect(scope.greeting).toEqual(undefined);
8.
9.
scope.$watch('name', function() {
scope.greeting = scope.salutation + ' ' + scope.name + '!';
10.
11.
}); //
12.
13.
scope.name = 'Misko';
14.
// , .. watch
15.
16.
17.
18.
scope.$digest(); // () watches
expect(scope.greeting).toEqual('Hello Misko!');
19. });
,
:
1. var parent = $rootScope;

2. var child = parent.$new();
3.
4. parent.salutation = "Hello";
5. child.name = "World";
6. expect(child.salutation).toEqual('Hello');
7.
8. child.salutation = "Welcome";
9. expect(child.salutation).toEqual('Welcome');
10. expect(parent.salutation).toEqual('Hello');
1. Scope([providers][, instanceCache]);
providers(optional) {Object.<string, function()>=}

, .
ng.
instanceCache(optional) {Object.<string, *>=}

, / ,
providers. -,
.
:
{Object} .
$apply(exp)
$apply() angular angular .

( , DOM , setTimeout, XHR ).
angular ,
, ,
.

$apply()
1. function $apply(expr) {
2.
try {
3.
4.
return $eval(expr);
} catch (e) {
5.
6.
$exceptionHandler(e);
} finally {
7.
8.
$root.$digest();
}
9. }
$apply() :
1. $eval().
2.
$exceptionHandler.
3. watch
$digest().
:
exp(optional) {(string|function())=} angular .
string: .
function(scope):
.
:
{*} .
$broadcast(name, args)
name , (
), ,
ng.$rootScope.Scope#$on.
,
$broadcast. listeners name
.
,
. .
,
listeners $exceptionHandler.
:
name {string} .
args {...*} ,
.
:
{Object} , ng.$rootScope.Scope#$on
$destroy()
( )
. , $digest()
,
. ,
.
$destroy() , ngRepeat
.
$destroy
.
$destroy,
.
$digest()
watchers
. watcher , (
$digest()) $digest() watchers ,
. , .
' ',
10.
$digest() .
$apply()( ), $digest().
, $digest(),
watchExpression $watch() .
$digest() -,
.
:
1. var scope = ...;
2. scope.name = 'misko';
3. scope.counter = 0;
4.
5. expect(scope.counter).toEqual(0);
6. scope.$watch('name', function(newValue, oldValue) {
7.
scope.counter = scope.counter + 1;
8. });
10.
11. scope.$digest();
12. // no variable change
14.
15. scope.name = 'adam';
$emit(name, args)
name ,
ng.$rootScope.Scope#$on .
, $emit.
listeners name
. ,
. ,
.
, listeners
$exceptionHandler .
:
name {string} .
args {...*} ,
.
:
{Object} , , ng.$rootScope.Scope#$on
$eval(expression)
expression
. , , ().
Angular.
:
1. var scope = ng.$rootScope.Scope();
2. scope.a = 1;
3. scope.b = 2;
4.
5. expect(scope.$eval('a+b')).toEqual(3);
6. expect(scope.$eval(function(scope){ return scope.a + scope.b; })).toEqual(3);
expression(optional) {(string|function())=} angular,

.
string: , .
function(scope): ,
.
:
{*} .
$evalAsync(expression)
.
$evalAsync , , :
(
DOM).
$digest expression.
, ,
$exceptionHandler.
:
expression(optional) {(string|function())=} angular

.
string: .
function(scope): ,
.
$new(isolate)
.
$digest() $digest().
$destroy().
$destroy() ,
, ,
, .
:
isolate {boolean} true,

.
.
, ,
.
:
{Object} .
$on(name, listener)
. $emit
.
: function(event, args...).
event :
targetScope - {Scope}: , :
$emit $broadcast.
currentScope - {Scope}: ,
.
name - {string}: .
stopPropagation - {function=}: stopPropagation
(
$emit).
preventDefault - {function}: preventDefault
defaultPrevented true.
defaultPrevented - {boolean}: true preventDefault .
name {string} .
listener {function(event, args...)} .
:
{function()} ,
.
$watch(watchExpression, listener, objectEquality)
listener,
watchExpression.
watchExpression $digest()
, .
( $digest() ,
watchExpression )
listener
watchExpression
( , ).
angular.equals. ,
, angular.copy.
, ,
.
listener ,
listener. ,
.
10, .
$digest,
watchExpression listener. (..
watchExpression $digest,
, .)
, listener
( $evalAsync) .
, .. watchExpression
. listener,
newVal oldVal. (===),
.
:
1. // , $rootScope
2. var scope = $rootScope;
3. scope.name = 'misko';
4. scope.counter = 0;
5.
7. scope.$watch('name', function(newValue, oldValue) { scope.counter = scope.coun
ter + 1; });
9.
11. //
13.
14. scope.name = 'adam';
watchExpression {(function()|string)} ,
$digest.
, listener.
string:
function(scope): ,
.
listener(optional) {(function()|string)=} ,

watchExpression.
string:
function(newValue, oldValue, scope):
, .
objectEquality(optional) {boolean=} ,
.
:
{function()}
.
$id
:
{number} (
) .
$destroy
, ,
.
:
: ,
FormController
FormController ,
, valid/invalid dirty/pristine.
form FormController.

$pristine
True, .
$dirty
True, .
$valid
True,
( ).
$invalid
True,
( ).
$error
,
, :
, ( ) required, url email),

, ,
.
NgModelController
NgModelController API ng-model.

, , CSS, .
DOM DOM.
NgModelController ,
DOM, NgModelController .
NgModelController
. ,
(contenteditable, ng-model, required)
.
Index.html
1. <!doctype html>
2. <html ng-app="customControl">
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
<form name="myForm">
9.
10.
11.
12.
13.
<div contenteditable
name="myWidget" ng-model="userContent"
required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr>
14.
<textarea ng-model="userContent"></textarea>
15.
</form>
16. </body>
17. </html>
Style.css
1. [contenteditable] {
2.
3.
border: 1px solid black;

background-color: white;
4.
min-height: 20px;
5. }
6.
7. .ng-invalid {
8.
border: 1px solid red;
9. }
Script.js
1. angular.module('customControl', []).
2.
directive('contenteditable', function() {
3.
4.
return {
restrict: 'A', // only activate on element attribute
5.
6.
require: '?ngModel', // get a hold of NgModelController

link: function(scope, element, attrs, ngModel) {
7.
8.
if(!ngModel) return; // do nothing if no ng-model
9.
10.
// Specify how UI should be updated

ngModel.$render = function() {
11.
12.
};
13.
14.
// Listen for change events to enable binding
15.
16.
element.bind('blur keyup change', function() {

scope.$apply(read);
17.
18.
});
read(); // initialize
19.
20.
// Write data to the model
21.
22.
function read() {
ngModel.$setViewValue(element.html());
element.html(ngModel.$viewValue || '');
23.
24.
25.
26.
}
}
};
});
End to end test

1. it('should data-bind and become invalid', function() {
2.
var contentEditable = element('[contenteditable]');
3.
4.
5.
expect(contentEditable.text()).toEqual('Change me!');
input('userContent').enter('');
6.
7.
expect(contentEditable.text()).toEqual('');
expect(contentEditable.prop('className')).toMatch(/ng-invalid-required/);
8. });
$render()
.
ng-model.
$setValidity(validationErrorKey, isValid)
,
. ( ,
- invalid).

.
:
validationErrorKey {string} . validationErrorKey

$error[validationErrorKey]=isValid,
. validationErrorKey
, CSS.
: myError ng-valid-my-error ng-invalid-my-error
, {{someForm.someControl.$error.myError}} .
isValid {boolean} true, valid, false invalid.
$setViewValue(value)
.
DOM.
input select .
formatters ,
.
:
value {string} .
$viewValue
$modelValue
, .
$parsers
DOM, /
.
$formatters
,
.
$error
, .
$pristine
True, .
$dirty
True, .
$valid
True, .
$invalid
True, .
API
angular.bind
, fn self (self
this fn). args .
function currying.
1. angular.bind(self, fn, args);
self {Object} , fn .
fn {function()} .
args {...*} , fn.
{function()} , fn
.
angular.bootstrap
angular.
: Bootstrap
1. angular.bootstrap(element[, modules]);
element {Element} DOM , angular.
modules(optional) {Array<String|Function>=}
. : modules
{AUTO.$injector} .
angular.copy
source, .
destination,
.
, ( ) (
) , /
source.
source , .
: Angular.
ng.$filter Angular.
1. angular.copy(source[, destination]);
source {*} , .
, null undefined.
destination(optional) {(Object|Array)=} ,
source. , , source.
{*} destination, destination .
angular.element
DOM HTML jQuery. angular.element

jQuery, jQuery , ,
Angular jQuery ( jqLite).
jQuery jqLite,
DOMContentLoaded.
jqLite , API- jQuery , Angular
DOM. jqLite -
, jQuery API - ,
.
: , Angular jQuery
jqLite; DOM .
Angular jQuery lite :
addClass()
after()
append()
attr()
bind() - Does not support namespaces
children() - Does not support selectors
clone()
contents()
css()
data()
eq()
find() - Limited to lookups by tag name
hasClass()
html()
next() - Does not support selectors
parent() - Does not support selectors
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler() - Doesn't pass native event objects to handlers.
unbind() - Does not support namespaces
val()
wrap()
, Angular
jQuery jQuery lite:
controller(name) .
, ngController.
name ,
(, 'ngModel').
injector() .
scope() .
inheritedData() , data(), DOM

.
1. angular.element(element);
element {string|DOMElement} HTML DOM ,

jQuery.
{Object} jQuery .
angular.equals
, . ,
.
,
:
(===).

(=== ).
NaN. ( JavasScript, NaN == NaN => false. NaN
)
, function ,
$ - .
DOM Window (===).
1. angular.equals(o1, o2);
o1 {*} .
o2 {*} .
{boolean} True, .
angular.extend
dst src
dst. src.

1. angular.extend(dst, src);
dst {Object} .
src {...Object} .
angular.forEach
iterator obj,
. iterator iterator(value, key),
value , key
. context
.
: angular.foreach.
1. var values = {name: 'misko', gender: 'male'};

2. var log = [];
3. angular.forEach(values, function(value, key){
4.
this.push(key + ': ' + value);
5. }, log);
6. expect(log).toEqual(['name: misko', 'gender:male']);
1. angular.forEach(obj, iterator[, context]);
obj {Object|Array} .
iterator {Function} .
context(optional) {Object=} ,
( this).
{Object|Array} obj.
angular.fromJson
JSON.

1. angular.fromJson(json);
json {string} JSON .
{Object|Array|Date|string|number} .
angular.identity
.
.
1. function transformer(transformationFn, value) {

2.
return (transformationFn || identity)(value);
3. };
1. angular.identity();
angular.injector
,
( ).
1. angular.injector(modules);
modules {Array.<string|Function>} .
angular.module. ng .
{function()} . $injector.
:
1. //
2. var $injector = angular.injector(['ng']);
3.
4. //
5. //
6. $injector.invoke(function($rootScope, $compile, $document){
7.
8.
$compile($document)($rootScope);
$rootScope.$digest();
9. });
angular.isArray
, .
1. angular.isArray(value);
value {*} .
{boolean} True, value .
angular.isDate
, value .
1. angular.isDate(value);
value {*} .
angular.isDefined
, .
1. angular.isDefined(value);
value {*} .
angular.isElement
, DOM ( jQuery ).
1. angular.isElement(value);
value {*} .
{boolean} True, value DOM ( jQuery ).
angular.isFunction
, .
1. angular.isFunction(value);
value {*} .
angular.isNumber
, .
1. angular.isNumber(value);
value {*} .
angular.isObject
, . typeof JavaScript, null

.
1. angular.isObject(value);
value {*} .
{boolean} True, value , null.
angular.isString
, .
1. angular.isString(value);
value {*} .
angular.isUndefined
, .
1. angular.isUndefined(value);
value {*} .
angular.lowercase
1. angular.lowercase(string);
string {string} .
{string} .
angular.mock
'angular-mocks.js'
.
angular.module
angular.module Angular .
( angular )
.
, , .
$injector.
1. //
2. var myModule = angular.module('myModule', []);
3.
4. //
5. myModule.value('appName', 'MyCoolApp');
6.
7. // .
8. myModule.config(function($locationProvider) {
9.
//
10. $locationProvider.hashPrefix('!');
11. });
, ::
1. var injector = angular.injector(['ng', 'MyModule'])
, ngApp angular.bootstrap
.

1. angular.module(name[, requires], configFn);
name {!string} .
requires(optional) {Array.<string>=} ,
. , .
configFn {Function} .
Module#config().
{module} angular.Module api.
angular.noop
().
.
1. function foo(callback) {
2.
var result = calculateResult();
3.
(callback || angular.noop)(result);
4. }
1. angular.noop();
angular.toJson
JSON.
1. angular.toJson(obj[, pretty]);
obj {Object|Array|Date|string|number} JSON.
pretty(optional) {boolean=} true, JSON

.
{string} JSON, obj.
angular.uppercase
1. angular.uppercase(string);
string {string} .
{string} .
angular.version
, AngularJS.
:
full {string} , "0.9.18".
major {number} , "0".
minor {number} , "9".
dot {number} , "18".
codeName {string} , "jiggling-armfat".
1. angular.version
ng-mock
$exceptionHandler
ng.$exceptionHandler,
, . $exceptionHandlerProvider
.
1. describe('$exceptionHandlerProvider', function() {
2.
3.
4.
it('should capture log messages and exceptions', function() {
5.
module(function($exceptionHandlerProvider) {
6.
$exceptionHandlerProvider.mode('log');
7.
8.
});
9.
10.
inject(function($log, $exceptionHandler, $timeout) {

$timeout(function() { $log.log(1); });
11.
12.
$timeout(function() { $log.log(2); throw 'banana peel'; });

$timeout(function() { $log.log(3); });
13.
14.
expect($exceptionHandler.errors).toEqual([]);
expect($log.assertEmpty());
15.
16.
$timeout.flush();
expect($exceptionHandler.errors).toEqual(['banana peel']);
17.
18.
expect($log.log.logs).toEqual([[1], [2], [3]]);

});
19. });
20. });
$httpBackend
HTTP, ,
$http.
: HTTP end-to-end
,
e2e $httpBackend mock.
,
, XHR JSONP
. , ,
, , ,
, ,
.
,
expect when apis , (expectGET, whenPOST, ..).
Angular - , $http,
$httpBackend.
$httpBackend ( API
$httpBackend) ,
.
() ,
http , :
$httpBackend.expect
$httpBackend.when
,
. , ,
.
,
, ,
, . ,
.
.expect(...).respond(...)
.when(...).respond(...)
strict unit tests
loose (black-box) unit testing
(. )
, ,
.
,
.
,
, ,
. .
HTTP
$httpBackend .
,
, , .
, , .
$httpBackend flush(),
,
api , .
$httpBackend
1. //
2. function MyController($scope, $http) {

3.
$http.get('/auth.py').success(function(data) {
4.
5.
$scope.user = data;
});
6.
7.
this.saveMessage = function(message) {
8.
$scope.status = 'Saving...';
9.
$http.post('/add-msg.py', message).success(function(response) {
10.
$scope.status = '';
11.
12.
13.
14.
}).error(function() {
$scope.status = 'ERROR!';
});
};
15. }
16.
17. //
18. var $httpBackend;
19.
20. beforeEach(inject(function($injector) {
21.
22.
$httpBackend = $injector.get('$httpBackend');
23.
24.
//
$httpBackend.when('GET', '/auth.py').respond({userId: 'userX'}, {'A-Token': 'xxx
'});
25. }));
26.
27.
28. afterEach(function() {
29. $httpBackend.verifyNoOutstandingExpectation();
30. $httpBackend.verifyNoOutstandingRequest();
31. });
32.
33.
34. it('should fetch authentication token', function() {
35. $httpBackend.expectGET('/auth.py');
36.
37.
var controller = scope.$new(MyController);

$httpBackend.flush();
38. });
39.
40.
41. it('should send msg to server', function() {
42.
43.
// ,
//
44.
45.
// $httpBackend ,
//
46.
47.
$httpBackend.expectPOST('/add-msg.py', 'message content').respond(201, '');
48.
49.

50.
51.
controller.saveMessage('message content');
expect(controller.status).toBe('Saving...');
52.
53.
expect(controller.status).toBe('');
54. });
55.
56.
57. it('should send auth header', function() {
58.
59.
60.
$httpBackend.expectPOST('/add-msg.py', undefined, function(headers) {

// , ,
//
61.
return headers['Authorization'] == 'xxx';
62.
}).respond(201, '');
63.
64.
65.
66.
controller.saveMessage('whatever');
67. });
Methods
expect(method, url, data, headers)
.
:
method {string} HTTP .
url {string|RegExp} HTTP url.
data(optional) {(string|RegExp)=} HTTP .
headers(optional) {(Object|function(Object))=} HTTP

http true
.
:
{requestHandler} , respond,
.
respond {function([status,] data[, headers])|function(function(method,

url, data, headers)} respond
, , ,
(), () ().
expectDELETE(url, headers)
DELETE.
expect().
:
headers(optional) {Object=} HTTP .
:
{requestHandler} respond,
.
expectGET(url, headers)
GET. expect().
:
:
.
expectHEAD(url, headers)
HEAD. expect().
:
:
.
expectJSONP(url)
JSONP. expect().
:
:
.
expectPATCH(url, data, headers)
PATCH. expect().
:
:
.
expectPOST(url, data, headers)
POST. expect().
:
:
.
expectPUT(url, data, headers)
PUT. expect().
:
:
.
flush(count)
.
:
count(optional) {number=} (
). , .
, (
).
resetExpectations()
, . ,
resetExpectations ,
$httpBackend.
verifyNoOutstandingExpectation()
, , expect api, .
, verifyNoOutstandingExpectation .
, ,
"afterEach".
1. afterEach($httpBackend.verifyExpectations);
verifyNoOutstandingRequest()
.
, ,
"afterEach".
1. afterEach($httpBackend.verifyNoOutstandingRequest);
when(method, url, data, headers)

http true,
.
:
.

url, data, headers)} respond
,
(), () ().
whenDELETE(url, headers)
DELETE.
when().
:
headers(optional) {(Object|function(Object))=} HTTP .
:
.
whenGET(url, headers)
GET.
when().
:
:
.
whenHEAD(url, headers)
HEAD.
when().
:
:
.
whenJSONP(url)
JSONP.
when().
:
:
.
whenPOST(url, data, headers)
POST.
when().
:
:
.
whenPUT(url, data, headers)
PUT.
when().
:
:
.
$log
ng.$log (
). logs
,
$log.error.logs.
assertEmpty()
, . ,
.
reset()
logs
$timeout
ng.$timeout "flush".
1. $timeout();
flush()
API
angular.mock.dump
: ,
.
angular ( , , ..)
, .
window,
.

1. angular.mock.dump(object);
object {*} .
{string} .
angular.mock.inject
: window .
: jasmine.
,
. inject() $injector ,
.

jasmine inject.
1. angular.module('myApplicationModule', [])
2.
.value('mode', 'app')
3.
4.
.value('version', 'v1.0.1');
5.
6. describe('MyApp', function() {
7.
8.
// , ,
// "ng".
beforeEach(module('myApplicationModule'));
9.
10.
11.
12.
// inject() -
it('should provide a version', inject(function(mode, version) {
13.
14.
15.
16.
expect(version).toEqual('v1.0.1');
expect(mode).toEqual('app');
17.
18.
}));
19.
20.
// inject module ,
// it beforeEach
it('should override a version and test the new version is injected', function()
21.
22.
{
23.
// module() ( )
24.
25.
module(function($provide) {
$provide.value('version', 'overridden'); //
26.
});
27.
28.
inject(function(version) {
29.
30.
expect(version).toEqual('overridden');
});
31. ));
32. });
1. angular.mock.inject(fns);
fns {...Function} ,
injector.
angular.mock.module
: , window.
: jasmine.
.
, inject.
inject .
1. angular.mock.module(fns);
fns {...(string|Function)} ,
.
. 'ng' 'ngMock'
.
angular.mock.TzDate
: , Date.
Date, .
, ,
,
.

1. TzDate(offset, timestamp);
offset {number} (
)
timestamp {(number|string)} UNIX
UTC
!!!! !!!!! Date

, . , TzDate Date
.
, , ..
, .
: "Date.prototype.foo
Object".
1. var newYearInBratislava = new TzDate(-1, '2009-12-31T23:00:00Z');

2. newYearInBratislava.getTimezoneOffset() => -60;
3. newYearInBratislava.getFullYear() => 2010;
4. newYearInBratislava.getMonth() => 0;
5. newYearInBratislava.getDate() => 1;
6. newYearInBratislava.getHours() => 0;
7. newYearInBratislava.getMinutes() => 0;
auto
$injector
$injector provider,
, .
:
1. var $injector = angular.injector();

2. expect($injector.get('$injector')).toBe($injector);
3. expect($injector.invoke(function($injector){
4.
return $injector;
5. }).toBe($injector);
JavaScript , .
. .
1. // ( / )
2. $injector.invoke(function(serviceA){});
3.
4. //
5. function explicit(serviceA) {};
6. explicit.$inject = ['serviceA'];
7. $injector.invoke(explicit);
8.
9. //
10. $injector.invoke(['serviceA', function(serviceA){}]);
JavaScript toString() .
. :
, .. .
$inject
$inject .
,
.
annotate(fn)
, . API
, .
, .

.
toString()
.
1. //
2. function MyController($scope, $route) {
3.
// ...
4. }
5.
6. //
7. expect(injector.annotate(MyController)).toEqual(['$scope', '$route']);
/ .
.
$inject
$inject ,
.
8. //
9. var MyController = function(obfuscatedScope, obfuscatedRoute) {
10. // ...
11. }
12. //
13. MyController.$inject = ['$scope', '$route'];
14.
15. //
16. expect(injector.annotate(MyController)).toEqual(['$scope', '$route']);

,
$inject .
, :
17. // ( minification / obfuscation)
18. injector.invoke(function($compile, $rootScope) {
19. // ...
20. });
21.
22. // $inject
23. var tmpFn = function(obfuscatedCompile, obfuscatedRootScope) {
24. // ...
25. };
26. tmpFn.$inject = ['$compile', '$rootScope'];
27. injector.invoke(tmpFn);
28.
29. //
30. injector.invoke(['$compile', '$rootScope', function(obfCompile, obfRootScope)
{
31.
// ...
32. }]);
33.
34. //
35. expect(injector.annotate(
36.
['$compile', '$rootScope', function(obfus_$compile, obfus_$rootScope) {}])
37. ).toEqual(['$compile', '$rootScope']);
fn {function|Array.<string|Function>} ,
, , .
:
{Array.<string>} , .
get(name)
.
:
name {string} .
:
{*} .
instantiate(Type, locals)
JS.
new, , .
:
Type {function} .
locals(optional) {Object=} . ,
, $injector,
.
:
{Object} .
invoke(fn, self, locals)
$injector.
:
fn {!function} .
.
self(optional) {Object=} this .
locals(optional) {Object=} . ,
$injector,
.
:
{*} , .
$provide
$provide $injector. ,
.
Provider.
$get(). $get
. ,
.
1. function GreetProvider() {
2.
var salutation = 'Hello';
3.
4.
5.
this.salutation = function(text) {
salutation = text;
6.
7.
};
8.
9.
this.$get = function() {
return function (name) {
10.
11.
return salutation + ' ' + name + '!';

};
12. };
13. }
14.
15. describe('Greeter', function(){
16.
17.
beforeEach(module(function($provide) {
18.
19.
$provide.provider('greet', GreetProvider);
}));
20.
21.
it('should greet', inject(function(greet) {
22.
23.
expect(greet('angular')).toEqual('Hello angular!');
}));
24.
25.
it('should allow configuration of salutation', function() {
26.
27.
module(function(greetProvider) {
greetProvider.salutation('Ahoj');
28.
29.
});
inject(function(greet) {
30.
31.
expect(greet('angular')).toEqual('Ahoj angular!');
});
32.
});
constant(name, value)
, value
( ) can be injected into configuration function (other modules)
decorator.
:
name {string} .
value {*} .
:
{Object}
decorator(name, decorator)
, .
, ,
.
name {string} .
decorator {function()}
. injector.invoke
.
:
$delegate , api,
, , .
factory(name, $getFn)
, $get.
:
name {string} .
$getFn {function()} $getFn .

$provide.provider(name, {$get: $getFn}).
:
{Object}
provider(name, provider)
.
.
:
name {string} . :
name + 'Provider'.
provider {(Object|function())} :
Object: $get. $get

$injector.invoke(), .
Constructor:
$injector.instantiate(), object.
:
{Object}
service(name, constructor)
.
:
name {string} .
constructor {Function} ( ),
.
:
{Object}
value(name, value)
, $get.
:
name {string} .
value {*} .
:
{Object}
ngCookie
$cookies
/ .
, ,
/ $eval.
$browser
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
</body>
9. </html>
Script.js
1. function ExampleController($cookies) {
2.
3.
//
var favoriteCookie = $cookies.myFavorite;
4.
5.
//
$cookies.myFavorite = 'oatmeal';
6. }
$cookieStore
- (-) , .
,
angular: toJson fromJson.
$cookies
get(key)
.
:
key {string} .
:
{Object} .
put(key, value)
.
:
key {string} .
value {Object} .
remove(key)
.
:
key {string} .
ngMockE2E
$httpBackend
HTTP end-to-end backend-less

$http.
: ,
unit-testing $httpBackend mock.

when api (whenGET, whenPOST, ..)
$httpBackend (,
).
, end-to-end , ,
, api ,
, (,
).
passThrough when respond.
, ,
. e2e $httpBackend
, XMLHttpRequest.
http ,
ngMockE2E :
1. myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);

2. myAppDev.run(function($httpBackend) {
3.
phones = [{name: 'phone1'}, {name: 'phone2'}];
4.
5.
//
6.
7.
$httpBackend.whenGET('/phones').respond(phones);
8.
9.
//
$httpBackend.whenPOST('/phones').respond(function(method, url, data) {
10.
11.
phones.push(angular.fromJSON(data));
});
12.
13.
$httpBackend.whenGET(/^\/templates\//).passThrough();
//...
14. });
, .
Methods
when(method, url, data, headers)
.
:

http true,
.
{requestHandler} , respond passThrough,

.

url, data, headers)}
, , (),
() ().
passThrough {function()} ,
passThrough, ( XHR
).
whenDELETE(url, headers)
DELETE.
when().
:
:
.
whenGET(url, headers)
GET.
when().
:
:
.
whenHEAD(url, headers)
HEAD.
when().
:
:
.
whenJSONP(url)
JSONP.
when().
:
:
.
whenPATCH(url, data, headers)
PATCH.
when().
:
:
.
whenPOST(url, data, headers)
POST.
when().
:
:
.
whenPUT(url, data, headers)
PUT.
when().
:

.
ngResource
$resource
, ,
RESTful.
,
, $http.
$resource angular-resource.js
Angular. Google CDN,
code.angularjs.org.
:
angular.module('app', ['ngResource']);
!
$http
1. $resource(url[, paramDefaults][, actions]);
url {string} URL

:, /user/:username. URL
(, http://example.com:8080/api),
, : $resource('http://example.com\\:8080/api').
paramDefaults(optional) {Object=} url.

.
url, - url
?, url .
/path/:verb {verb:'greet', salutation:'Hello'}
URL /path/greet?salutation=Hello. @,
( GET
).
actions(optional) {Object.<Object>=}
, .
:
{action1: {method:?, params:?, isArray:?},
action2: {method:?, params:?, isArray:?},
...}
:
action {string} . ,
.
method {string} HTTP . : GET, POST, PUT, DELETE,
JSONP
params {object=} , .
isArray {boolean=} true,
, .
{Object}
. :
{ 'get':
{method:'GET'},
'save':
{method:'POST'},
'query':
{method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
ng.$http http ,
. ,
. save, remove delete , $.
CRUD (create, read, update, delete)
:
1. var User = $resource('/user/:userId', {userId:'@id'});

2. var user = User.get({userId:123}, function() {
3.
user.abc = true;
4.
user.$save();
5. });
, $resource, (
isArray). ,
. , ..
, . ,
, , ,
. ,
.
HTTP GET "" : Resource.([parameters], [success], [error])

-GET "" : Resource.([parameters], postData, [success],
[error])
-GET : .$action([parameters], [success],
[error])

1. // CreditCard
2. var CreditCard = $resource('/user/:userId/card/:cardId',

3. {userId:123, cardId:'@id'}, {
4.
5.
charge: {method:'POST', params:{charge:true}}

});
6.
7. //
8. var cards = CreditCard.query(function() {
9.
// GET: /user/123/card
10.
11.
// : [ {id:456, number:'1234', name:'Smith'} ];
12.
13.
var card = cards[0];

// CreditCard
14.
15.
expect(card instanceof CreditCard).toEqual(true);

card.name = "J. Smith";
16.
17.
// GET
card.$save();
18.
19.
// POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'}

// : {id:456, number:'1234', name: 'J. Smith'};
20.
21.
22.
23.
//
card.$charge({amount:9.99});
// POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name
:'J. Smith'}
24. });
25.
26. //
27. var newCard = new CreditCard({number:'0123'});
28. newCard.name = "Mike Smith";
29. newCard.$save();
30. // POST: /user/123/card {number:'0123', name:'Mike Smith'}
31. // : {id:789, number:'01234', name: 'Mike Smith'};
32. expect(newCard.id).toEqual(789);

.
$http url method
params. ,
, -GET ,
$ . CRUD (create, read, update,
delete) .

2. var user = User.get({userId:123}, function() {
3.
4.
user.abc = true;
user.$save();
5. });
, get, query ,
, ,
$http ,
:

2. User.get({userId:123}, function(u, getResponseHeaders){
3.
u.abc = true;
4.
5.
6.
7.
u.$save(function(u, putResponseHeaders) {
//u =>
//putResponseHeaders => $http

});
8. });

, , $resource:
Index.html
1. <!doctype html>
2. <html ng-app>
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
<div ng-controller="BuzzController">
9.
10.
<input ng-model="userId"/>
<button ng-click="fetch()">fetch</button>
11.
12.
<hr/>
<div ng-repeat="item in activities.data.items">
13.
14.
<h1 style="font-size: 15px;">

<img src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:
30px;"/>
15.
16.
<a href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
<a href ng-click="expandReplies(item)" style="float: right;">Expand repl
ies: {{item.links.replies[0].count}}</a>
17.
18.
</h3>
{{item.object.content | html}}
19.
<div ng-repeat="reply in item.replies.data.items" style="margin-left: 20px

;">
20.
<img src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width

:30px;"/>
21.
<a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: {{reply.c

ontent | html}}
22.
23.
24.
25.
</div>
</div>
</div>
</body>
26. </html>
Script.js
1. function BuzzController($resource) {
2.
this.userId = 'googlebuzz';
3.
4.
5.
6.
this.Activity = $resource(
'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId
/:comments',
{alt:'json', callback:'JSON_CALLBACK'},
{get:{method:'JSONP', params:{visibility:'@self'}}, replies: {method:'JSONP',
params:{visibility:'@self', comments:'@comments'}}}
7.
);
8. }
9.
10. BuzzController.prototype = {
11.
12.
fetch: function() {
this.activities = this.Activity.get({userId:this.userId});
13.
14.
},
expandReplies: function(activity) {
15.
activity.replies = this.Activity.replies({userId:this.userId, activityId:activ

ity.id});
16. }
17. };
18. BuzzController.$inject = ['$resource'];
ngSanitize
ngBindHtml
, expression
$sanitize innerHTML .
$sanitize.
1. <ANY ng-bind-html="{expression}">
2.
...
3. </ANY>
1. <ANY class="ng-bind-html: {expression};">

2.
...
3. </ANY>
ngBindHtml {expression} .
linky
html.
http/https/ftp/mailto email .
HTML
<span ng-bind-html="linky_expression | linky"></span>
JavaScript
$filter('linky')(text)
text {string} .
{string} Html.
Index.html
1. <!doctype html>
2. <html ng-app="ngSanitize">
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
11.
Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>

<table>
<tr>
12.
<td>Filter</td>
13.
<td>Source</td>
14.
15.
<td>Rendered</td>
</tr>
16.
17.
<tr id="linky-filter">
<td>linky filter</td>
18.
19.
<td>
<pre><div ng-bind-html="snippet | linky"><br></div></pre>
20.
21.
</td>
<td>
22.
23.
<div ng-bind-html="snippet | linky"></div>

</td>
24.
25.
</tr>
<tr id="escaped-html">
26.
27.
<td>no filter</td>
<td><pre><div ng-bind="snippet"><br></div></pre></td>
28.
29.
<td><div ng-bind="snippet"></div></td>
</tr>
30.
31.
</table>
</body>
32. </html>
Script.js
2.
$scope.snippet =
3.
4.
'Pretty text with some links:\n'+

'http://angularjs.org/,\n'+
5.
6.
'mailto:us@somewhere.org,\n'+
'another@somewhere.org,\n'+
7.
8. }
'and one more: ftp://127.0.0.1/.';
End to end test

1. it('should linkify the snippet with urls', function() {
2.
expect(using('#linky-filter').binding('snippet | linky')).
3.
4.
toBe('Pretty text with some links:
' +

'<a href="http://angularjs.org/">http://angularjs.org/</a>,
' +
5.
6.
'<a href="mailto:us@somewhere.org">us@somewhere.org</a>,
' +
'<a href="mailto:another@somewhere.org">another@somewhere.org</a>,
'
+
7.
'and one more: <a href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>.');
8. });
9.
10. it ('should not linkify snippet without the linky filter', function() {
11. expect(using('#escaped-html').binding('snippet')).
12.
13.
14.
toBe("Pretty text with some links:\n" +

"http://angularjs.org/,\n" +
"mailto:us@somewhere.org,\n" +
15.
"another@somewhere.org,\n" +
16.
"and one more: ftp://127.0.0.1/.");
17. });
18.
20. input('snippet').enter('new http://link.');
21.
22.
expect(using('#linky-filter').binding('snippet | linky')).
toBe('new <a href="http://link">http://link</a>.');
23. expect(using('#escaped-html').binding('snippet')).toBe('new http://link.');

24. });
$sanitize
html. ( )
html. ,
, , ,
, , ,
HTML , .
1. $sanitize(html);
html {string} Html .
{string} html.
Index.html
1. <!doctype html>
2. <html ng-app="ngSanitize">
3.
4.
<head>
5.
6.
</head>
7.
8.
<body>
9.
10.
Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>

<table>
11.
12.
<tr>
<td>Filter</td>
13.
<td>Source</td>
14.
<td>Rendered</td>
15.
</tr>
16.
17.
<tr id="html-filter">
<td>html filter</td>
18.
19.
<td>
<pre><div ng-bind-html="snippet"><br/></div></pre>
20.
21.
</td>
<td>
22.
23.
<div ng-bind-html="snippet"></div>
</td>
24.
25.
</tr>
<tr id="escaped-html">
26.
27.
<td>no filter</td>
<td><pre><div ng-bind="snippet"><br/></div></pre></td>
28.
29.
<td><div ng-bind="snippet"></div></td>
</tr>
30.
31.
<tr id="html-unsafe-filter">
<td>unsafe html filter</td>
32.
<td><pre><div ng-bind-html-unsafe="snippet"><br/></div></p
re></td>
33.
34.
<td><div ng-bind-html-unsafe="snippet"></div></td>
</tr>
35.
36.
</table>
</div>
37. </body>
38. </html>
Script.js
2.
3.
$scope.snippet =
'<p style="color:blue">an html\n' +
4.
5.
'<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +

'snippet</p>';
6. }
End to end test

1. it('should sanitize the html snippet ', function() {
2.
3.
expect(using('#html-filter').element('div').html()).
toBe('<p>an html\n<em>click here</em>\nsnippet</p>');
4. });
5.
6. it('should escape snippet without any filter', function() {
7.
expect(using('#escaped-html').element('div').html()).
8.
9.
toBe("<p style=\"color:blue\">an html\n" +

"<em onmouseover=\"this.textContent='PWN3D!'\">click here</em&gt
;\n" +
10.
11. });
"snippet</p>");
12.
13. it('should inline raw snippet if filtered as unsafe', function() {
14.
15.
expect(using('#html-unsafe-filter').element("div").html()).
toBe("<p style=\"color:blue\">an html\n" +
16.
17.
"<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" +

"snippet</p>");
18. });
19.
21. input('snippet').enter('new <b>text</b>');
22.
23.
expect(using('#html-filter').binding('snippet')).toBe('new <b>text</b>');
expect(using('#escaped-html').element('div').html()).toBe("new <b>text<
24.
/b>");
expect(using('#html-unsafe-filter').binding("snippet")).toBe('new <b>text</b>');
25. });

Туловский А. Документация По API Angular.js (2013)

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Туловский А. Документация По API Angular.js (2013)

Загружено:

Авторское право:

Доступные форматы

API Angular

userType: <input name="input" ng-model="userType" required>

<span class="error" ng-show="myForm.input.$error.required">Required!</span><

End to end test

HTML angular . HTML5

User name: <input type="text" name="userName" ng-model="user.name" require

<span class="error" ng-show="myForm.userName.$error.required">

Last name: <input type="text" name="lastName" ng-model="user.last"

<span class="error" ng-show="myForm.lastName.$error.minlength">

<span class="error" ng-show="myForm.lastName.$error.maxlength">

End to end test

input('user.last').enter('some ridiculously long name');

Value1: <input type="checkbox" ng-model="value1"> <br/>

ng-true-value="YES" ng-false-value="NO"> <br/>

End to end test

<form name="myForm" ng-controller="Ctrl">

<span class="error" ng-show="myForm.input.$error.required">

<span class="error" ng-show="myForm.input.$error.email">

End to end test

min="0" max="99" required>

Not valid number!</span>

End to end test

<input type="radio" ng-model="color" value="red"> Red <br/>

<input type="radio" ng-model="color" value="blue"> Blue <br/>

End to end test

<form name="myForm" ng-controller="Ctrl">

Single word only!</span>

End to end test

6. it('should be invalid if empty', function() {

URL: <input type="url" name="input" ng-model="text" required>

Not valid url!</span>

End to end test

1. <ANY class="ng-app: {angular.Module};">

1. <ANY class="ng-bind: {expression};">

Hello <span ng-bind="name"></span>!

End to end test

1. <ANY class="ng-bind-html-unsafe: {expression};">

1. <ANY class="ng-bind-template: {string};">

ngBindTemplate {string} {{ expression }} .

<pre ng-bind-template="{{salutation}} {{name}}!"></pre>

End to end test

<label for="ng-change-example2">Confirmed</label><br />

End to end test

ngChecked {expression} Angular .

<input id="checkSlave" type="checkbox" ng-checked="master">

End to end test

ngClass CSS HTML ,

1. <ANY class="ng-class: {expression};">

<input type="button" value="clear" ng-click="myVar=''">

End to end test

ngClassOdd ngClassEven , ngClass, ,

1. <ANY class="ng-class-even: {expression};">

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">

<span ng-class-odd="'odd'" ng-class-even="'even'">

End to end test

ngClassOdd ngClassEven , ngClass, ,

4. <ANY class="ng-class-odd: {expression};">

<li ng-repeat="name in names">

{{name}} &nbsp; &nbsp; &nbsp;

End to end test

expect(element('.doc-example-live li:first span').prop('className')).

expect(element('.doc-example-live li:last span').prop('className')).

1. <ANY class="ng-click: {expression};">

End to end test

{{name}}