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

API Angular API, .

ng

a html A, href.

ngClick , : Save

, , IE:

1. 2.

form FormController.

name , , .

: ngForm angular . , , , . , angular ngForm, , , .

CSS

ng-valid . ng-invalid . ng-pristine . ng-dirty .

http://docs.angularjs.org/api/ng.directive:form.FormControllerhttp://docs.angularjs.org/api/ng.directive:ngFormhttp://docs.angularjs.org/api/ng.directive:ngForm

Angular , , . JavaScript, .

Angular ( ) 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. 3.

name(optional) {string=}

. , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8.

http://docs.angularjs.org/api/ng.directive:ngSubmithttp://docs.angularjs.org/api/ng.directive:ngClickhttp://docs.angularjs.org/guide/ie

9. userType: 10. Required!

11. userType = {{userType}} 12. myForm.input.$valid = {{myForm.input.$valid}} 13. myForm.input.$error = {{myForm.input.$error}} 14. myForm.$valid = {{myForm.$valid}} 15. myForm.$error.required = {{!!myForm.$error.required}} 16. 17. 18.

Script.js

1. function Ctrl($scope) { 2. $scope.userType = 'guest'; 3. }

End to end test

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

input

HTML angular . HTML5 .

, IE:

1.

9. [ngChange="{string}"]> 10.

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. 2. 3.

4. 5. 6. 7. 8. 9. 10. User name:

11. 12. Required! 13. Last name: 15. 16. Too short! 17. 18. Too long! 19. 20. 21. user = {{user}} 22. myForm.userName.$valid = {{myForm.userName.$valid}} 23. myForm.userName.$error = {{myForm.userName.$error}} 24. myForm.lastName.$valid = {{myForm.lastName.$valid}} 25. myForm.userName.$error = {{myForm.lastName.$error}} 26. myForm.$valid = {{myForm.$valid}} 27. myForm.$error.required = {{!!myForm.$error.required}} 28. myForm.$error.minlength = {{!!myForm.$error.minlength}} 29. myForm.$error.maxlength = {{!!myForm.$error.maxlength}} 30. 31. 32.

Script.js

1. function Ctrl($scope) { 2. $scope.user = {name: 'guest', last: 'visitor'}; 3. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}'); 3. expect(binding('myForm.userName.$valid')).toEqual('true'); 4. expect(binding('myForm.$valid')).toEqual('true'); 5. }); 6. 7. it('should be invalid if empty when required', function() { 8. input('user.name').enter(''); 9. expect(binding('user')).toEqual('{"last":"visitor"}'); 10. 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. expect(binding('user')).toEqual('{"name":"guest","last":""}'); 17. 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. input('user.last').enter('xx'); 23. expect(binding('user')).toEqual('{"name":"guest"}'); 24. expect(binding('myForm.lastName.$valid')).toEqual('false'); 25. 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. input('user.last').enter('some ridiculously long name'); 31. expect(binding('user')) 32. .toEqual('{"name":"guest"}'); 33. expect(binding('myForm.lastName.$valid')).toEqual('false'); 34. expect(binding('myForm.lastName.$error')).toMatch(/maxlength/); 35. expect(binding('myForm.$valid')).toEqual('false'); 36. });

input [checkbox]

HTML .

1.

ngModel {string}

angular .


, .

ngTrueValue(optional) {string=}

, , .

ngFalseValue(optional) {string=}

, , .


Angular , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Value1: 10. Value2: 12. value1 = {{value1}} 13. value2 = {{value2}} 14. 15. 16.

Script.js

1. function Ctrl($scope) { 2. $scope.value1 = true; 3. $scope.value2 = 'YES' 4. }

End to end test

1. it('should change state', function() { 2. expect(binding('value1')).toEqual('true'); 3. 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.

ngModel {string}

angular .


, .


required , .


required, true


minlength , , .


maxlength , , .



Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Email: 10. 11. Required! 12. 13. Not valid email! 14. text = {{text}} 15. myForm.input.$valid = {{myForm.input.$valid}} 16. myForm.input.$error = {{myForm.input.$error}} 17. myForm.$valid = {{myForm.$valid}} 18. myForm.$error.required = {{!!myForm.$error.required}} 19. myForm.$error.email = {{!!myForm.$error.email}} 20. 21. 22.

Script.js

1. function Ctrl($scope) { 2. $scope.text = '[email protected]'; 3. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('text')).toEqual('[email protected]'); 3. expect(binding('myForm.input.$valid')).toEqual('true'); 4. }); 5. 6. it('should be invalid if empty', function() { 7. input('text').enter(''); 8. expect(binding('text')).toEqual('');

9. expect(binding('myForm.input.$valid')).toEqual('false'); 10. }); 11. 12. it('should be invalid if not email', function() { 13. input('text').enter('xxx'); 14. expect(binding('myForm.input.$valid')).toEqual('false'); 15. });

input [number] . number , .

1.

ngModel {string}

angular .


, .

min(optional) {string=}

min , min.

max(optional) {string=}

max , max.


required , .


required, true


minlength , , .


maxlength , , .




Angular , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Number: 11. 12. Required! 13. 14. Not valid number! 15. value = {{value}} 16. myForm.input.$valid = {{myForm.input.$valid}} 17. myForm.input.$error = {{myForm.input.$error}} 18. myForm.$valid = {{myForm.$valid}} 19. myForm.$error.required = {{!!myForm.$error.required}} 20. 21.

22.

Script.js

1. function Ctrl($scope) { 2. $scope.value = 12; 3. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('value')).toEqual('12'); 3. expect(binding('myForm.input.$valid')).toEqual('true'); 4. }); 5. 6. it('should be invalid if empty', function() { 7. input('value').enter(''); 8. expect(binding('value')).toEqual(''); 9. expect(binding('myForm.input.$valid')).toEqual('false'); 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.

ngModel {string}

angular .


, .

value {string}

, , .


Angular , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Red 10. Green 11. Blue 12. color = {{color}} 13. 14. 15.

Script.js

1. function Ctrl($scope) { 2. $scope.color = 'blue'; 3. }

End to end test

1. it('should change state', function() { 2. expect(binding('color')).toEqual('blue'); 3. 4. input('color').select('red'); 5. expect(binding('color')).toEqual('red'); 6. });

input [text]

HTML angular.

1.

ngModel {string}

angular .


, .


required , .


required, true


minlength , , .


maxlength , , .


pattern , RegExp. ,

/regexp/, , .


Angular , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Single word: 11. 12. Required! 13. 14. Single word only! 15. 16. text = {{text}} 17. myForm.input.$valid = {{myForm.input.$valid}} 18. myForm.input.$error = {{myForm.input.$error}} 19. myForm.$valid = {{myForm.$valid}} 20. myForm.$error.required = {{!!myForm.$error.required}} 21. 22. 23.

Script.js

1. function Ctrl($scope) { 2. $scope.text = 'guest'; 3. $scope.word = /^\w*$/; 4. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('text')).toEqual('guest'); 3. expect(binding('myForm.input.$valid')).toEqual('true'); 4. }); 5.

6. it('should be invalid if empty', function() { 7. input('text').enter(''); 8. expect(binding('text')).toEqual(''); 9. expect(binding('myForm.input.$valid')).toEqual('false'); 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.

ngModel {string}

angular .


, .


required , .


required, true


minlength , , .


maxlength , , .




Angular , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. URL: 10. 11. Required! 12. 13. Not valid url! 14. text = {{text}} 15. myForm.input.$valid = {{myForm.input.$valid}} 16. myForm.input.$error = {{myForm.input.$error}} 17. myForm.$valid = {{myForm.$valid}} 18. myForm.$error.required = {{!!myForm.$error.required}} 19. myForm.$error.url = {{!!myForm.$error.url}} 20. 21. 22.

Script.js

1. function Ctrl($scope) { 2. $scope.text = 'http://google.com';

3. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('text')).toEqual('http://google.com'); 3. expect(binding('myForm.input.$valid')).toEqual('true'); 4. }); 5. 6. it('should be invalid if empty', function() { 7. input('text').enter(''); 8. expect(binding('text')).toEqual(''); 9. expect(binding('myForm.input.$valid')).toEqual('false'); 10. }); 11. 12. it('should be invalid if not url', function() { 13. input('text').enter('xxx'); 14. expect(binding('myForm.input.$valid')).toEqual('false'); 15. });

ngApp . HTML. , .

, ngApp html, {{ 1+2 }} 3.

ngApp .

Index.html

1. 2. 3. 4. 5. 6. 7. I can add: 1 + 2 = {{ 1+2 }} 8. 9.

1. 2. ...

3.

1. 2. ... 3.

ngApp {angular.Module} ,

.

ngBind ngBind Angular, , , .

, ngBind , , .

, .. ngBind, {{ expression }} . ngBind , , .

ngCloak .

1. 2. ... 3.

1. 2. ... 3.

ngBind {expression} .

; , .

http://docs.angularjs.org/api/ng.directive:ngCloak

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Enter name: 10. Hello ! 11. 12. 13.

Script.js

1. function Ctrl($scope) { 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. using('.doc-example-live').input('name').enter('world'); 4. expect(using('.doc-example-live').binding('name')).toBe('world'); 5. });

ngBindHtmlUnsafe innerHTML expression . innerHTML ! , ngBindHtml, .

. $sanitize .

1. 2. ... 3.

http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtmlhttp://docs.angularjs.org/api/ngSanitize.$sanitize

1. 2. ... 3.

ngBindHtmlUnsafe {expression} .

ngBindTemplate ngBindTemplate , ngBindTemplate. ngBind, ngBindTemplate {{ }} . ( , HTML SPAN, TITLE, OPTION).

1. 2. ... 3.

1. 2. ... 3.

ngBindTemplate {string} {{ expression }} .

.

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Salutation: 10. Name:

http://docs.angularjs.org/guide/expression

11. 12. 13. 14.

Script.js

1. function Ctrl($scope) { 2. $scope.salutation = 'Hello'; 3. $scope.name = 'World'; 4. }

End to end test

1. it('should check ng-bind', function() { 2. expect(using('.doc-example-live').binding('salutation')). 3. toBe('Hello'); 4. expect(using('.doc-example-live').binding('name')). 5. toBe('World'); 6. using('.doc-example-live').input('salutation').enter('Greetings'); 7. using('.doc-example-live').input('name').enter('user'); 8. expect(using('.doc-example-live').binding('salutation')). 9. toBe('Greetings'); 10. expect(using('.doc-example-live').binding('name')). 11. toBe('user'); 12. });

ngChange , . , .

, ngModel .

, IE:

1. 2.

Index.html

1. 2. 3.

http://docs.angularjs.org/guide/ie

4. 5. 6. 7. 8. 9.

10. 11. Confirmed 12. debug = {{confirmed}} 13. counter = {{counter}} 14. 15. 16.

Script.js

1. function Controller($scope) { 2. $scope.counter = 0; 3. $scope.change = function() { 4. $scope.counter++; 5. }; 6. }

End to end test

1. it('should evaluate the expression if changing from view', function() { 2. expect(binding('counter')).toEqual('0'); 3. element('#ng-change-example1').click(); 4. expect(binding('counter')).toEqual('1'); 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. expect(binding('counter')).toEqual('0'); 11. expect(binding('confirmed')).toEqual('true'); 12. });

ngChecked HTML , checked. ( true, false). angular . ngChecked.

1. 2. ... 3.

ngChecked {expression} Angular .

Index.html

1. 2. 3. 4. 5. 6. 7. Check me to check both: 8. 9. 10.

End to end test

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

ngClass ngClass CSS HTML , .

, .

, , .

1. 2. ... 3.

1. 2. ... 3.

ngClass {expression} .

, , , , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Sample Text 11. 12.

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. toMatch(/my-class/); 4. 5. using('.doc-example-live').element(':button:first').click(); 6. 7. expect(element('.doc-example-live span').prop('className')). 8. toMatch(/my-class/); 9. 10. using('.doc-example-live').element(':button:last').click(); 11. 12. expect(element('.doc-example-live span').prop('className')).not(). 13. toMatch(/my-class/); 14. });


ngClassEven ngClassOdd ngClassEven , ngClass, , ngRepeat, () .

ngRepeat.

1. 2. ... 3.

1. 2. ... 3.

ngClassEven {expression} .

, , .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. {{name}} 11. 12. 13. 14. 15.

Style.css

1. .odd {

http://docs.angularjs.org/api/ng.directive:ngClasshttp://docs.angularjs.org/api/ng.directive:ngRepeathttp://docs.angularjs.org/guide/expression

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. toMatch(/odd/); 4. expect(element('.doc-example-live li:last span').prop('className')). 5. toMatch(/even/); 6. });

ngClassOdd ngClassOdd ngClassEven , ngClass, , ngRepeat, () .

ngRepeat.

4. 5. ... 6.

4. 5. ... 6.

ngClassOdd {expression} .

, , .

Index.html

16. 17. 18.

http://docs.angularjs.org/api/ng.directive:ngClasshttp://docs.angularjs.org/api/ng.directive:ngRepeathttp://docs.angularjs.org/guide/expression

19. 20. 21. 22. 23. 24. 25. {{name}} 26. 27. 28. 29. 30.

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. expect(element('.doc-example-live li:first span').prop('className')). 9. toMatch(/odd/); 10. expect(element('.doc-example-live li:last span').prop('className')). 11. toMatch(/even/); 12. });

ngClick ngClick , , .

1. 2. ... 3.

1.

2. ... 3.

ngClick {expression} . (

$event)

Index.html

1. 2. 3. 4. 5. 6. 7. 8. Increment 9. 10. count: {{count}} 11. 12.

End to end test

1. it('should check ng-click', function() { 2. expect(binding('count')).toBe('0'); 3. element('.doc-example-live :button').click(); 4. expect(binding('count')).toBe('1'); 5. });

ngCloak ngCloak Angular . , , html .

, , .

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. 2. ... 3.

1. 2. ... 3.

Index.html

1. 2. 3. 4. 5. 6. 7. {{ 'hello' }} 8. {{ 'hello IE7' }} 9. 10.

End to end test

1. it('should remove the template directive and css class', function() { 2. expect(element('.doc-example-live #template1').attr('ng-cloak')). 3. not().toBeDefined(); 4. expect(element('.doc-example-live #template2').attr('ng-cloak')). 5. not().toBeDefined(); 6. });

ngController ngController . angular Model-View-Controller.

MVC angular:

Model , ; DOM.

View (HTML ) . Controller ngController ;

.

, , $route.

1. 2. ... 3.

1. 2. ... 3.

.

ngController {expression}

, .

. , , . Angular . , this . . .

Index.html

1. 2.

http://docs.angularjs.org/api/ng.$routehttp://docs.angularjs.org/guide/expression

3. 4. 5. 6. 7. 8. 9. Name: 10. [ greet ] 11. Contact: 12. 13. 14. 15. phone 16. email 17. 18. 19. [ clear 20. | X ] 21. 22. [ add ] 23. 24. 25. 26.

Script.js

1. function SettingsController($scope) { 2. $scope.name = "John Smith"; 3. $scope.contacts = [ 4. {type:'phone', value:'408 555 1212'}, 5. {type:'email', value:'[email protected]'} ]; 6. 7. $scope.greet = function() { 8. alert(this.name); 9. }; 10. 11. $scope.addContact = function() { 12. this.contacts.push({type:'email', value:'[email protected]'}); 13. }; 14. 15. $scope.removeContact = function(contactToRemove) { 16. var index = this.contacts.indexOf(contactToRemove); 17. this.contacts.splice(index, 1); 18. }; 19. 20. $scope.clearContact = function(contact) { 21. contact.type = 'phone'; 22. contact.value = ''; 23. }; 24. }

End to end test

1. it('should check controller', function() { 2. expect(element('.doc-example-live div>:input').val()).toBe('John Smith'); 3. expect(element('.doc-example-live li:nth-child(1) input').val()) 4. .toBe('408 555 1212'); 5. expect(element('.doc-example-live li:nth-child(2) input').val()) 6. .toBe('[email protected]'); 7. 8. element('.doc-example-live li:first a:contains("clear")').click(); 9. expect(element('.doc-example-live li:first input').val()).toBe(''); 10. 11. element('.doc-example-live li:last a:contains("add")').click(); 12. expect(element('.doc-example-live li:nth-child(3) input').val()) 13. .toBe('[email protected]'); 14. });

ngCsp CSP (Content Security Policy). ( , ngApp).

, , .

1. 2. ... 3.

1. 2. ... 3.

1000.

ngDblclick ngDblclick dblclick.

https://developer.mozilla.org/en/Security/CSPhttp://docs.angularjs.org/api/ng.directive:ngApp

1. 2. ... 3.

1. 2. ... 3.

ngDblclick {expression} dblclick. (

$event)

. ngClick

ngDisabled Chrome/Firefox, IE8 IE:

1. 2. Disabled 3.

HTML , disabled. ( true, false) angular . , ngDisabled.

1. 2. ... 3.

ngDisabled {expression} Angular .

http://docs.angularjs.org/guide/expressionhttp://docs.angularjs.org/api/ng.directive:ngClick

Index.html

1. 2. 3. 4. 5. 6. 7. Click me to toggle: 8. Button 9. 10.

End to end test

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

ngForm form . HTML . , , .

, IE:

1. 3.

1. 3. ... 4.

1.

http://docs.angularjs.org/api/ng.directive:formhttp://docs.angularjs.org/guide/ie

2. ... 3.

name|ngForm(optional) {string=} . ,

, .

ngHide ngHide ngShow DOM.

1. 2. ... 3.

1. 2. ... 3.

ngHide {expression} true,

, .

Index.html

1. 2. 3. 4. 5. 6. 7. Click me: 8. Show: I show up when you checkbox is checked?

9. Hide: I hide when you checkbox is checked? 10. 11.


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. expect(element('.doc-example-live span:last:visible').count()).toEqual(1); 4. 5. input('checked').check(); 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.

:

1.

1. 2. ... 3.

ngHref {template} , {{}}.

link href:

Index.html

1. 2. 3. 4. 5.

6. 7. 8. link 1 (link, don't reload) 9. link 2 (link, don't reload)

10. link 3 (link, reload!) 11. anchor (link, don't

reload)

12. anchor (no link) 13. link (link, change location) 14. 15.

End to end test

1. it('should execute ng-click but not reload when href without value', function() { 2. element('#link-1').click(); 3. 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. element('#link-2').click(); 9. expect(input('value').val()).toEqual('2'); 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. expect(element('#link-3').attr('href')).toBe("/123"); 15. 16. element('#link-3').click(); 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. element('#link-4').click(); 22. expect(input('value').val()).toEqual('4'); 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. expect(input('value').val()).toEqual('5'); 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. expect(element('#link-6').attr('href')).toBe('6'); 35.

36. element('#link-6').click(); 37. expect(browser().location().url()).toEqual('/6'); 38. });

ngInclude , HTML .

(Same Origin Policy) ( , ngInclude - file://).

, IE:

1. 5.

1. 4. ... 5.

1. 2. ... 3.

.

ngInclude|src {string} angular , URL.

, , src="'myPartialTemplate.html'".

onload(optional) {string=} , , .


autoscroll(optional) {string=} ngInclude $anchorScroll .

, . , . ,

true.

$includeContentLoaded

ngInclude.

:

:

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. (blank) 11. 12. url of the template: {{template.url}} 13. 14. 15. 16. 17.

Template1.html

1. Content of template1.html

Template2.html

1. Content of template2.html

Script.js

1. function Ctrl($scope) {

http://docs.angularjs.org/api/ng.$anchorScroll

2. $scope.templates = 3. [ { name: 'template1.html', url: 'template1.html'} 4. , { name: 'template2.html', url: 'template2.html'} ]; 5. $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. expect(element('.doc-example-live [ng-include]').text()). 8. 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. 2. ... 3.

1. 2. ... 3.

ngInit {expression} .


Index.html

1. 2. 3. 4. 5. 6. 7. 8. {{greeting}} {{person}}! 9. 10. 11.

End to end test

1. it('should check greeting', function() { 2. expect(binding('greeting')).toBe('Hello'); 3. expect(binding('person')).toBe('World'); 4. });

ngList , , .

1. 2. ... 3.

1. 2. ... 3.

ngList(optional) {string=} ,

. /something/, .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. List: 10. 11. Required! 12. names = {{names}} 13. myForm.namesInput.$valid = {{myForm.namesInput.$valid}} 14. myForm.namesInput.$error = {{myForm.namesInput.$error}} 15. myForm.$valid = {{myForm.$valid}} 16. myForm.$error.required = {{!!myForm.$error.required}} 17. 18. 19.

Script.js

1. function Ctrl($scope) { 2. $scope.names = ['igor', 'misko', 'vojta']; 3. }

End to end test

1. it('should initialize to model', function() { 2. expect(binding('names')).toEqual('["igor","misko","vojta"]'); 3. expect(binding('myForm.namesInput.$valid')).toEqual('true'); 4. }); 5. 6. it('should be invalid if empty', function() { 7. input('names').enter(''); 8. expect(binding('names')).toEqual('[]'); 9. 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, ng-

pristine), form.

ngModel, :

input text checkbox radio number email url

select textarea

1. 2. ... 3.

1. 2. ... 3.

ngMousedown ngMousedown , mousedown ( ).

1. 2. ... 3.

http://docs.angularjs.org/api/ng.directive:formhttp://docs.angularjs.org/api/ng.directive:inputhttp://docs.angularjs.org/api/ng.directive:input.texthttp://docs.angularjs.org/api/ng.directive:input.checkboxhttp://docs.angularjs.org/api/ng.directive:input.radiohttp://docs.angularjs.org/api/ng.directive:input.numberhttp://docs.angularjs.org/api/ng.directive:input.emailhttp://docs.angularjs.org/api/ng.directive:input.urlhttp://docs.angularjs.org/api/ng.directive:selecthttp://docs.angularjs.org/api/ng.directive:textarea

1. 2. ... 3.

ngMousedown {expression}

mousedown. ( $event)

ngClick

ngMouseenter mouseenter ( ).

1. 2. ... 3.

1. 2. ... 3.

ngMouseenter {expression} mouseenter. (

$event)

ngClick

ngMouseleave mouseleave ( ).

1. 2. ... 3.

http://docs.angularjs.org/guide/expressionhttp://docs.angularjs.org/api/ng.directive:ngClickhttp://docs.angularjs.org/guide/expressionhttp://docs.angularjs.org/api/ng.directive:ngClick

1. 2. ... 3.

ngMouseleave {expression} mouseleave. (

$event)

ngClick

ngMousemove mousemove ( ).

1. 2. ... 3.

1. 2. ... 3.

ngMousemove {expression} mousemove. (

$event)

ngClick

ngMouseover mouseover ( ).

1. 2. ...


3.

1. 2. ... 3.

ngMouseover {expression} mouseover. (

$event)

ngClick

ngMouseup mouseup.

1. 2. ... 3.

1. 2. ... 3.

ngMouseup {expression} mouseup. (

$event)

ngClick

ngMultiple HTML , multiple. ( true, false) angular . ngMultiple.


1. 2. ... 3.

ngMultiple {expression} Angular .

Index.html

1. 2. 3. 4. 5. 6. 7. Check me check multiple: 8. 9. Misko 10. Igor 11. Vojta 12. Di 13. 14. 15.

End to end test

1. it('should toggle multiple', function() { 2. expect(element('.doc-example-live #select').prop('multiple')).toBeFalsy(); 3. input('checked').check(); 4. expect(element('.doc-example-live #select').prop('multiple')).toBeTruthy(); 5. });

ngNonBindable , angular, , . ngNonBindable angular HTML.

1. 2. ... 3.

1. 2. ... 3.

1000.

Index.html

1. 2. 3. 4. 5. 6. 7. Normal: {{1 + 2}} 8. Ignored: {{1 + 2}} 9. 10.

End to end test

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

ngPluralize ngPluralize en-US. angular.js ( Angular i18n ). ngPluralize , .

http://docs.angularjs.org/guide/i18nhttp://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html

Angular , en-US: "one " ( ) "other " ( ).

( en-US, "other" 1), . , "3" 3. .

ngPluralize ngPluralize 2 : count when. offset.

count Angular, .

when . JSON, Angular .

ngPluralize:

1. 5.

, "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.

7.


(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. 5.

1. 5. ... 6.

count {string|expression} .

when {string} , .

offset(optional) {number=} .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Person 1: 10. Person 2: 11. Number of People:


12. 13. 14. Without Offset: 15. 19. 20. 21. 22. With Offset(2): 23.

29. 30. 31. 32.

Script.js

1. function Ctrl($scope) { 2. $scope.person1 = 'Igor'; 3. $scope.person2 = 'Misko'; 4. $scope.personCount = 1; 5. }

End to end test

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

17. toBe('Igor and Misko are viewing.'); 18. 19. using('.doc-example-live').input('personCount').enter('3'); 20. expect(element('.doc-example-live ng-pluralize:first').text()). 21. toBe('3 people are viewing.'); 22. expect(element('.doc-example-live ng-pluralize:last').text()). 23. toBe('Igor, Misko and one other person are viewing.'); 24. 25. using('.doc-example-live').input('personCount').enter('4'); 26. expect(element('.doc-example-live ng-pluralize:first').text()). 27. toBe('4 people are viewing.'); 28. expect(element('.doc-example-live ng-pluralize:last').text()). 29. toBe('Igor, Misko and 2 other people are viewing.'); 30. }); 31. 32. it('should show data-binded names', function() { 33. using('.doc-example-live').input('personCount').enter('4'); 34. expect(element('.doc-example-live ng-pluralize:last').text()). 35. toBe('Igor, Misko and 2 other people are viewing.'); 36. 37. using('.doc-example-live').input('person1').enter('Di'); 38. using('.doc-example-live').input('person2').enter('Vojta'); 39. expect(element('.doc-example-live ng-pluralize:last').text()). 40. toBe('Di, Vojta and 2 other people are viewing.'); 41. });

ngReadonly HTML , , readonly. ( , true, , , false) angular . ngReadonly.

1. 3. ... 4.

expression {string} Angular .

Index.html

1.

2. 3. 4. 5. 6. 7. Check me to make text readonly:

8. 9. 10.

End to end test

1. it('should toggle readonly attr', function() { 2. expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy(); 3. input('checked').check(); 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. 2. ... 3.

1. 2. ...

3.

. 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. 2. 3. 4. 5. 6. 7. 8. I have {{friends.length}} friends. They are: 9. 10. 11. [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 12. 13. 14. 15. 16.

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. 3. ... 4.

expression {string} Angular .

Index.html

1. 2. 3. 4. 5. 6. 7. Check me to select: 8. 9. Hello! 10. Greetings! 11. 12. 13.

End to end test

1. it('should select Greetings!', function() { 2. expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy(); 3. input('selected').check(); 4. expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy(); 5. });

ngShow ngShow ngHide DOM.

1. 2. ... 3.

1. 2. ... 3.

ngShow {expression} true, ,

.

Index.html

1. 2. 3. 4. 5. 6. 7. Click me: 8. Show: I show up when your checkbox is checked.

9. Hide: I hide when your checkbox is checked. 10. 11.

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. expect(element('.doc-example-live span:last:visible').count()).toEqual(1); 4. 5. input('checked').check(); 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.

:

1.

1. 2. ... 3.

ngSrc {template} , {{}}.

ngStyle ngStyle CSS HTML .

1. 2. ... 3.

1. 2. ... 3.

ngStyle {expression} ,

CSS, CSS.

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Sample Text 11. myStyle={{myStyle}} 12. 13.

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. element('.doc-example-live :button[value=set]').click(); 4. expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)'); 5. element('.doc-example-live :button[value=clear]').click(); 6. expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); 7. });

ngSubmit angular onsubmit ( ).

( ).


1. 2. ... 3.

1. 2. ... 3.

ngSubmit {expression} .

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Enter text and hit enter: 10. 11. 12. list={{list}} 13. 14. 15.

Script.js

1. function Ctrl($scope) { 2. $scope.list = []; 3. $scope.text = 'hello'; 4. $scope.submit = function() { 5. if (this.text) { 6. this.list.push(this.text); 7. this.text = ''; 8. } 9. }; 10. }


End to end test

1. it('should check ng-submit', function() { 2. expect(binding('list')).toBe('[]'); 3. element('.doc-example-live #submit').click(); 4. expect(binding('list')).toBe('["hello"]'); 5. expect(input('text').val()).toBe(''); 6. }); 7. it('should ignore empty strings', function() { 8. expect(binding('list')).toBe('[]'); 9. element('.doc-example-live #submit').click(); 10. element('.doc-example-live #submit').click(); 11. expect(binding('list')).toBe('["hello"]'); 12. });

ngSwitch DOM.

, IE:

...

...

...

...

.

ngSwitch|on {*} , ng-

switch-when.

Index.html

1. 2. 3. 4. 5. 6.


7. 8. 9. 10. 11. selection={{selection}} 12. 13. 14. Settings Div 15. Home Span 16. default 17. 18. 19. 20.

Script.js

1. function Ctrl($scope) { 2. $scope.items = ['settings', 'home', 'other']; 3. $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. 2. ... 3.

1. 2. ... 3.

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. {{text}} 12. 13. 14.

Script.js

1. function Ctrl($scope) { 2. $scope.title = 'Lorem Ipsum'; 3. $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...'; 4. } 5. 6. angular.module('transclude', []) 7. .directive('pane', function(){ 8. return { 9. restrict: 'E', 10. transclude: true, 11. scope: 'isolate', 12. locals: { title:'bind' }, 13. template: '' + 14. '{{title}}' + 15. '' + 16. '' 17. }; 18. });

End to end test

1. it('should have transcluded', function() {

2. input('title').enter('TITLE'); 3. input('text').enter('TEXT'); 4. expect(binding('title')).toEqual('TITLE'); 5. expect(binding('text')).toEqual('TEXT'); 6. });

ngView ngView $route, (index.html). , , , $route.

, IE:

1. 2.

1. 2. ... 3.

1. 2. ... 3.

.

$viewContentLoaded

, ngView .

:

: ngView

http://docs.angularjs.org/api/ng.$routehttp://docs.angularjs.org/guide/ie

Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Choose: 10. Moby | 11. Moby: Ch1 | 12. Gatsby | 13. Gatsby: Ch4 | 14. Scarlet Letter 15. 16. 17. 18. 19. $location.path() = {{$location.path()}} 20. $route.current.templateUrl = {{$route.current.templateUrl}} 21. $route.current.params = {{$route.current.params}} 22. $route.current.scope.name = {{$route.current.scope.name}} 23. $routeParams = {{$routeParams}} 24. 25. 26.

Book.html

1. controller: {{name}} 2. Book Id: {{params.bookId}}

Chapter.html

1. controller: {{name}} 2. Book Id: {{params.bookId}} 3. Chapter Id: {{params.chapterId}}

Script.js

1. angular.module('ngView', [], function($routeProvider, $locationProvider) { 2. $routeProvider.when('/Book/:bookId', { 3. templateUrl: 'book.html', 4. controller: BookCntl 5. });

6. $routeProvider.when('/Book/:bookId/ch/:chapterId', { 7. templateUrl: 'chapter.html', 8. controller: ChapterCntl 9. }); 10. 11. // configure html5 to get links working on jsfiddle 12. $locationProvider.html5Mode(true); 13. }); 14. 15. function MainCntl($scope, $route, $routeParams, $location) { 16. $scope.$route = $route; 17. $scope.$location = $location; 18. $scope.$routeParams = $routeParams; 19. } 20. 21. function BookCntl($scope, $routeParams) { 22. $scope.name = "BookCntl"; 23. $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. element('a:contains("Moby: Ch1")').click(); 3. var content = element('.doc-example-live [ng-view]').text(); 4. expect(content).toMatch(/controller\: ChapterCntl/); 5. expect(content).toMatch(/Book Id\: Moby/); 6. expect(content).toMatch(/Chapter Id\: 1/); 7. 8. element('a:contains("Scarlet")').click(); 9. content = element('.doc-example-live [ng-view]').text(); 10. expect(content).toMatch(/controller\: BookCntl/); 11. expect(content).toMatch(/Book Id\: Scarlet/); 12. });

script script, text/ng-template, $templateCache, ngInclude, ngView .

, IE:


1. 3.

type {'text/ng-template'} 'text/ng-template'

Index.html

1. 2. 3. 4. 5. 6. 7. 8. Content of the template. 9. 10.

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 , ngOptions . select , , ngModel selected.

, , , . null "not selected". .

: ngOptions ngRepeat select . , option .

http://docs.angularjs.org/api/ng.directive:ngRepeat

, IE:

1. 7.

ngModel {string} angular .

name(optional) {string=} , .

required(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: ,

. value (, value.propertyName).

select: , . , select value.

group: , option DOM .


Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Name: 12. [X] 13. 14. 15. [add] 16. 17. 18. 19. Color (null not allowed): 20. 21. 22. Color (null allowed): 23. 24. 25. -- chose color -- 26. 27. 28. 29. Color grouped by shade: 30.

31. 32. 33. 34. Select bogus. 35. 36. Currently selected: {{ {selected_color:color} }} 37. 39. 40. 41. 42.

Script.js

1. function MyCntrl($scope) {

2. $scope.colors = [ 3. {name:'black', shade:'dark'}, 4. {name:'white', shade:'light'}, 5. {name:'red', shade:'dark'}, 6. {name:'blue', shade:'dark'}, 7. {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. select('color').option('0'); 4. expect(binding('{selected_color:color}')).toMatch('black'); 5. using('.nullable').select('color').option(''); 6. expect(binding('{selected_color:color}')).toMatch('null'); 7. });

textarea HTML textarea angular . , input .

, IE:

1. 10.

Parameters

ngModel {string} angular . name(optional) {string=} ,

.

required(optional) {string=} required , .

http://docs.angularjs.org/api/ng.directive:inputhttp://docs.angularjs.org/guide/ie

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. 2. 3. 4. 5. 6. 7.

8. 9. 10. default currency symbol ($): {{amount | currency}} 11. custom currency identifier (USD$): {{amount | currency:"USD$"}} 12. 13. 14.

Script.js

1. function Ctrl($scope) { 2. $scope.amount = 1234.56; 3. }

End to end test

1. it('should init with 1234.56', function() { 2. expect(binding('amount | currency')).toBe('$1,234.56'); 3. expect(binding('amount | currency:"USD$"')).toBe('USD$1,234.56'); 4. }); 5. it('should update', function() { 6. input('amount').enter('-1234'); 7. 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, yyyy-MM-dd yyyyMMddTHHmmssZ). ( ) , .

format(optional) {string=} ( ). , mediumDate.

{string} , .

Index.html

1. 2.

http://docs.angularjs.org/guide/i18nhttp://docs.angularjs.org/guide/i18n

3. 4. 5. 6. 7. {{1288323623006 | date:'medium'}}: 8. {{1288323623006 | date:'medium'}} 9. {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 10. {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}} 11. {{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 12. {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}} 13. 14.

End to end test

1. it('should format date', function() { 2. expect(binding("1288323623006 | date:'medium'")). 3. toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/); 4. expect(binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")). 5. toMatch(/2010\-10\-2\d \d{2}:\d{2}:\d{2} (\-|\+)?\d{4}/); 6. expect(binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")). 7. 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()} .

:

: , . , . , !.

http://docs.angularjs.org/api/ng.$filter

: -, . , {name:"M", phone:"1"} , name "M" phone "1". $ ( {$:"text"}) . , .

: . . , true.

Index.html

1. 2. 3. 4. 5. 6. 7. 12. 13. Search: 14. 15. NamePhone 16. 17. {{friend.name}} 18. {{friend.phone}} 19. 20. 21. 22. Any: 23. Name only 24. Phone only 25. 26. NamePhone 27. 28. {{friend.name}} 29. {{friend.phone}} 30. 31. 32. 33.

End to end test

1. it('should search across all fields when filtering with a string', function() { 2. input('searchText').enter('m'); 3. expect(repeater('#searchTextResults tr', 'friend in friends').column('friend.nam

e')).

4. toEqual(['Mary', 'Mike', 'Adam']); 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

tion() {

12. input('search.$').enter('i'); 13. 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. 2.

3. 4. 5. 6. 7. {{ {'name':'value'} | json }} 8. 9.

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. 2. 3. 4. 5.


6. 7. 8. 9. Limit {{numbers}} to: 10. Output: {{ numbers | limitTo:limit }} 11. 12. 13.

Script.js

1. function Ctrl($scope) { 2. $scope.numbers = [1,2,3,4,5,6,7,8,9]; 3. $scope.limit = 3; 4. }

End to end test

1. it('should limit the numer array to first three items', function() { 2. expect(element('.doc-example-live input[ng-model=limit]').val()).toBe('3'); 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. input('limit').enter(100); 13. 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. 2. 3. 4. 5. 6. 7. 8. 9. Enter number: 10. Default formatting: {{val | number}} 11. No fractions: {{val | number:0}} 12. Negative number: {{-val | number:4}} 13. 14. 15.

Script.js

1. function Ctrl($scope) { 2. $scope.val = 1234.56789; 3. }

End to end test

1. it('should format numbers', function() { 2. expect(binding('val | number')).toBe('1,234.568'); 3. expect(binding('val | number:0')).toBe('1,235'); 4. expect(binding('-val | number:4')).toBe('-1,234.5679'); 5. }); 6. 7. it('should update', function() { 8. input('val').enter('3374.333'); 9. expect(binding('val | number')).toBe('3,374.333'); 10. expect(binding('val | number:0')).toBe('3,374'); 11. 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.} , .

:

: . .

: , , 'name' 'name'. + (, +name -name).

: . , , , ..

reverse(optional) {boolean=} .

{Array} .


Index.html

1. 2. 3. 4. 5. 6. 7. 8. 9. Sorting predicate = {{predicate}}; reverse = {{reverse}} 10. 11. [ unsorted ] 12. 13. 14. Name 15. (^) 16. Phone Nu

mber

17. Age

18. 19. 20. {{friend.name}} 21. {{friend.phone}} 22. {{friend.age}} 23. 24. 25. 26. 27.

Script.js

1. function Ctrl($scope) { 2. $scope.friends = 3. [{name:'John', phone:'555-1212', age:10}, 4. {name:'Mary', phone:'555-9876', age:19}, 5. {name:'Mike', phone:'555-4321', age:21}, 6. {name:'Adam', phone:'555-5678', age:35}, 7. {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. expect(repeater('table.friend', 'friend in friends').column('friend.name')). 6. 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. expect(repeater('table.friend', 'friend in friends').column('friend.name')). 12. toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']); 13. expect(repeater('table.friend', 'friend in friends').column('friend.age')). 14. toEqual(['35', '10', '29', '19', '21']); 15. 16. element('.doc-example-live a:contains("Phone")').click(); 17. expect(repeater('table.friend', 'friend in friends').column('friend.phone')). 18. toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']); 19. expect(repeater('table.friend', 'friend in friends').column('friend.name')). 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

http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-documenthttp://docs.angularjs.org/api/ng.$windowhttp://docs.angularjs.org/api/ng.$locationhttp://docs.angularjs.org/api/ng.$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. 2.

http://docs.angularjs.org/api/ng.$rootScope.Scopehttp://docs.angularjs.org/api/ng.$compileProvider#directivehttp://docs.angularjs.org/api/ng.directive:ngRepeat

3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Script.js

1. // $compileProvider 2. angular.module('compile', [], function($compileProvider) { 3. // 'compile', 4. // . '$compile' 5. $compileProvider.directive('compile', function($compile) { 6. // 7. return function(scope, element, attrs) { 8. scope.$watch( 9. function(scope) { 10. // 'compile' 11. return scope.$eval(attrs.compile); 12. }, 13. function(value) { 14. // 'compile' 15. // DOM 16. element.html(value); 17. 18. // DOM 19. // . 20. // : .childNodes 21. // 22. $compile(element.contents())(scope); 23. } 24. ); 25. }; 26. }) 27. }); 28. 29. function Ctrl($scope) { 30. $scope.name = 'Angular'; 31. $scope.html = 'Hello {{name}}'; 32. }

End to end test

1. it('should auto compile', function() { 2. expect(element('div[compile]').text()).toBe('Hello Angular'); 3. 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('{{total}}')(scope);

, . cloneAttachFn:

1. var templateHTML = angular.element('{{total}}'),

http://docs.angularjs.org/api/ng.$rootScope.Scope

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.

http://docs.angularjs.org/guide/compilerhttp://docs.angularjs.org/api/AUTO.$injectorhttps://gist.github.com/1649788http://docs.angularjs.org/api/ng.$injectorhttp://docs.angularjs.org/api/angular.element

$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://docs.angularjs.org/api/ng.$windowhttp://docs.angularjs.org/api/ngMock.$exceptionHandlerhttp://docs.angularjs.org/api/ngMock.$exceptionHandlerhttp://docs.angularjs.org/api/ng.$log

$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. error(function(data, status, headers, config) { 7. // , 8. // 9. });

$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

https://developer.mozilla.org/en/xmlhttprequesthttp://en.wikipedia.org/wiki/JSONPhttp://docs.angularjs.org/api/ngMock.$httpBackendhttp://docs.angularjs.org/api/ngMock.$httpBackendhttp://docs.angularjs.org/api/ngResource.$resourcehttp://docs.angularjs.org/api/ng.$qhttp://docs.angularjs.org/api/ng.$qhttp://docs.angularjs.org/api/ng.$http#gethttp://docs.angularjs.org/api/ng.$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['My-Header']='value'.

, $http.defaults , .

, . , Angular :

:

data , JSON.

:

XSRF, ( ). JSON, JSON.

, $httpProvider.defaults.transformRequest $httpProvider.defaults.transformResponse. , push unshift . , , .

, /, $http transformRequest / transformResponse .

http://docs.angularjs.org/api/ng.$http#posthttp://docs.angularjs.org/api/ng.$http#puthttp://docs.angularjs.org/api/ng.$http#deletehttp://docs.angularjs.org/api/ng.$http#jsonp

, 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. return function(promise) { 4. return promise.then(function(response) { 5. // - 6. }, function(response) { 7. // - 8. if (canRecover(response)) { 9. return responseOrNewPromise 10. } 11. return $q.reject(response); 12. }); 13. } 14. }); 15. 16. $httpProvider.responseInterceptors.push('myHttpInterceptor'); 17. 18. 19. // 20. $httpProvider.responseInterceptors.push(function($q, dependency1, dependency2) { 21. return function(promise) { 22. // - 23. } 24. });

-, :

JSON

http://docs.angularjs.org/api/ng.$qhttp://docs.angularjs.org/api/ng.$qhttp://docs.angularjs.org/api/ng.$qhttp://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx

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

http://en.wikipedia.org/wiki/Cross-site_request_forgeryhttp://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspxhttp://en.wikipedia.org/wiki/JSONPhttp://en.wikipedia.org/wiki/Cross-site_request_forgeryhttps://en.wikipedia.org/wiki/Salt_(cryptography)http://docs.angularjs.org/api/ng.$httpBackendhttp://docs.angularjs.org/api/ng.$browserhttp://docs.angularjs.org/api/ng.$cacheFactoryhttp://docs.angularjs.org/api/ng.$rootScopehttp://docs.angularjs.org/api/ng.$qhttp://docs.angularjs.org/api/ng.$injector

config {object} .

:

method {string} HTTP (, 'GET', 'POST', ..) url {string} URL

. params {Object.} ,

?key1=value1&key2=value2 url. , JSON.

data {string|Object} . headers {Object} , HTTP ,

. transformRequest {function(data, headersGetter)|Array.} . http ( ) .

transformResponse {function(data, headersGetter)|Array.} . 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=}

http://docs.angularjs.org/api/ng.$cacheFactoryhttps://developer.mozilla.org/en/http_access_control#section_5http://docs.angularjs.org/api/ng.$q

:

{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. 2. 3. 4. 5. 6. 7. 8. 9. 10. GET 11. JSONP 12. 13. 14. fetch 15. Sample GET 16. Sample JSONP

17. Invalid JSONP

18. http status code: {{status}} 19. http response data: {{data}}

20. 21. 22.

http-hello.html

1. Hello, $http!

Script.js

1. function FetchCtrl($scope, $http, $templateCache) { 2. $scope.method = 'GET'; 3. $scope.url = 'http-hello.html'; 4. 5. $scope.fetch = function() { 6. $scope.code = null; 7. $scope.response = null; 8. 9. $http({method: $scope.method, url: $scope.url, cache: $templateCache}). 10. success(function(data, status) { 11. $scope.status = status; 12. $scope.data = data; 13. }). 14. error(function(data, status) { 15. $scope.data = data || "Request failed"; 16. $scope.status = status; 17. }); 18. }; 19. 20. $scope.updateModel = function(method, url) { 21. $scope.method = method; 22. $scope.url = url; 23. }; 24. }

End to end test

1. it('should make an xhr GET request', function() { 2. element(':button:contains("Sample GET")').click(); 3. element(':button:contains("fetch")').click(); 4. 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. element(':button:contains("Sample JSONP")').click(); 10. element(':button:contains("fetch")').click(); 11. expect(binding('status')).toBe('200'); 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. element(':button:contains("Invalid JSONP")').click(); 18. element(':button:contains("fetch")').click(); 19. expect(binding('status')).toBe('0'); 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]);

http://docs.angularjs.org/api/ng.$httphttp://docs.angularjs.org/api/ng.$httphttp://docs.angularjs.org/api/ngResource.$resourcehttp://docs.angularjs.org/api/ngMock.$httpBackendhttp://docs.angularjs.org/api/ng.$browserhttp://docs.angularjs.org/api/ng.$windowhttp://docs.angularjs.org/api/ng.$documenthttp://docs.angularjs.org/api/ng.$compilehttp://docs.angularjs.org/api/ng.$interpolateProviderhttp://docs.angularjs.org/api/ng.$parse

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.

http://docs.angularjs.org/api/ng.$interpolateProvider#endSymbolhttp://docs.angularjs.org/api/ng.$interpolateProvider#startSymbolhttps://developer.mozilla.org/en/window.location

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 .

http://docs.angularjs.org/guide/dev_guide.services.$locationhttp://docs.angularjs.org/guide/dev_guide.services.$locationhttp://docs.angularjs.org/api/ng.$browserhttp://docs.angularjs.org/api/ng.$snifferhttp://docs.angularjs.org/api/ng.$rootElementhttp://www.ietf.org/rfc/rfc3986.txt

, , $location.

: (/), , .

:

path(optional) {string=}

:

{string}

port() , url.

:

{Number}

protocol() url.

:

{string} url

replace() , $location $digest , .

search(search, paramValue) .

( ) url .

, $location.

:

search(optional) {string|object=} ,

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. 2. 3. 4. 5. 6. 7. 8. 9. Reload this page with open console, enter text and hit the log button...

10. Message: 11. 12. log 13. warn

http://docs.angularjs.org/api/ng.$window

14. info 15. error 16. 17. 18.

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. var deferred = $q.defer(); 6. 7. setTimeout(function() { 8. // , 9. // $apply . 10. scope.$apply(function() { 11. if (okToGreet(name)) { 12. deferred.resolve('Hello, ' + name + '!'); 13. } else { 14. deferred.reject('Greeting ' + name + ' is not allowed.'); 15. } 16. }); 17. }, 1000); 18. 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().

https://github.com/kriskowal/qhttp://wiki.commonjs.org/wiki/Promiseshttps://github.com/kriskowal/uncommonjs/blob/master/promises/specification.mdhttp://en.wikipedia.org/wiki/Continuation-passing_stylehttps://github.com/kriskowal/q

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 , ,

http://docs.angularjs.org/api/ng.$rootScope.Scope

, .

$q promise angular, , promise , , .

Q , $q, . $q , .

1. it('should simulate promise', inject(function($q, $rootScope) { 2. var deferred = $q.defer(); 3. var promise = deferred.promise; 4. var resolvedValue; 5. 6. promise.then(function(value) { resolvedValue = value; }); 7. expect(resolvedValue).toBeUndefined(); 8. 9. // promise 10. deferred.resolve(123); 11. // , 'then' . 12. // , promise API , 13. // . 14. expect(resolvedValue).toBeUndefined(); 15. 16. // promise 'then' $apply(). 17. $rootScope.$apply(); 18. expect(resolvedValue).toEqual(123); 19. });

$rootScope

all(promises)

promise promise, promise .

:

promises {Array.} promise.

{Promise} promise, , promise , promises. promise , promise .

defer() Deferred , .

http://docs.angularjs.org/api/ng.$rootScope

:

{Deferred}

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

Documents