Compare commits

..

No commits in common. "master" and "v1.2.9" have entirely different histories.

109 changed files with 3614 additions and 1562 deletions

View file

@ -1,3 +0,0 @@
{
"disallowKeywords": ["with"]
}

View file

@ -1,22 +0,0 @@
// This is an incomplete TODO list of checks we want to start enforcing
//
// The goal is to enable these checks one by one by moving them to .jscs.json along with commits
// that correct the existing code base issues and make the new check pass.
{
"requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"disallowRightStickedOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireRightStickedOperators": ["!"],
"requireLeftStickedOperators": [","],
"disallowImplicitTypeConversion": ["string"],
"disallowMultipleLineBreaks": true,
"disallowKeywordsOnNewLine": ["else"],
"disallowTrailingWhitespace": true,
"requireLineFeedAtFileEnd": true,
"validateJSDoc": {
"checkParamNames": true,
"requireParamTypes": true
}
}

View file

@ -9,6 +9,8 @@ env:
global: global:
- SAUCE_USERNAME=angular-ci - SAUCE_USERNAME=angular-ci
- SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987 - SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987
- BROWSER_STACK_USERNAME=VojtaJina
- BROWSER_STACK_ACCESS_KEY=HAfHZaypxAc3PEUrUU9a
- LOGS_DIR=/tmp/angular-build/logs - LOGS_DIR=/tmp/angular-build/logs
- BROWSER_PROVIDER_READY_FILE=/tmp/sauce-connect-ready - BROWSER_PROVIDER_READY_FILE=/tmp/sauce-connect-ready

View file

@ -1,54 +1,3 @@
<a name="1.2.11"></a>
# 1.2.11 cryptocurrency-hyperdeflation (2014-02-03)
## Bug Fixes
- **$compile:** retain CSS classes added in cloneAttachFn on asynchronous directives
([5ed721b9](https://github.com/angular/angular.js/commit/5ed721b9b5e95ae08450e1ae9d5202e7f3f79295),
[#5439](https://github.com/angular/angular.js/issues/5439), [#5617](https://github.com/angular/angular.js/issues/5617))
- **$http:** update httpBackend to use ActiveXObject on IE8 if necessary
([ef210e5e](https://github.com/angular/angular.js/commit/ef210e5e119db4f5bfc9d2428b19f9b335c4f976),
[#5677](https://github.com/angular/angular.js/issues/5677), [#5679](https://github.com/angular/angular.js/issues/5679))
- **$q:** make $q.reject support `finally` and `catch`
([074b0675](https://github.com/angular/angular.js/commit/074b0675a1f97dce07f520f1ae6198ed3c604000),
[#6048](https://github.com/angular/angular.js/issues/6048), [#6076](https://github.com/angular/angular.js/issues/6076))
- **filterFilter:** don't interpret dots in predicate object fields as paths
([339a1658](https://github.com/angular/angular.js/commit/339a1658cd9bfa5e322a01c45aa0a1df67e3a842),
[#6005](https://github.com/angular/angular.js/issues/6005), [#6009](https://github.com/angular/angular.js/issues/6009))
- **mocks:** refactor currentSpec to work w/ Jasmine 2
([95f0bf9b](https://github.com/angular/angular.js/commit/95f0bf9b526fda8964527c6d4aef1ad50a47f1f3),
[#5662](https://github.com/angular/angular.js/issues/5662))
- **ngResource:** don't append number to '$' in url param value when encoding URI
([ce1f1f97](https://github.com/angular/angular.js/commit/ce1f1f97f0ebf77941b2bdaf5e8352d33786524d),
[#6003](https://github.com/angular/angular.js/issues/6003), [#6004](https://github.com/angular/angular.js/issues/6004))
<a name="1.2.10"></a>
# 1.2.10 augmented-serendipity (2014-01-24)
## Bug Fixes
- **$parse:** do not use locals to resolve object properties
([f09b6aa5](https://github.com/angular/angular.js/commit/f09b6aa5b58c090e3b8f8811fb7735e38d4b7623),
[#5838](https://github.com/angular/angular.js/issues/5838), [#5862](https://github.com/angular/angular.js/issues/5862))
- **a:** don't call preventDefault on click when a SVGAElement has an xlink:href attribute
([e0209169](https://github.com/angular/angular.js/commit/e0209169bf1463465ad07484421620748a4d3908),
[#5896](https://github.com/angular/angular.js/issues/5896), [#5897](https://github.com/angular/angular.js/issues/5897))
- **input:** use Chromium's email validation regexp
([79e519fe](https://github.com/angular/angular.js/commit/79e519fedaec54390a8bdacfb1926bfce57a1eb6),
[#5899](https://github.com/angular/angular.js/issues/5899), [#5924](https://github.com/angular/angular.js/issues/5924))
- **ngRoute:** pipe preceding route param no longer masks ? or * operator
([fd6bac7d](https://github.com/angular/angular.js/commit/fd6bac7de56f728a89782dc80c78f7d5c21bbc65),
[#5920](https://github.com/angular/angular.js/issues/5920))
## Features
- **$animate:** provide support for a close callback
([ca6b7d0f](https://github.com/angular/angular.js/commit/ca6b7d0fa2e355ebd764230260758cee9a4ebe1e),
[#5685](https://github.com/angular/angular.js/issues/5685), [#5053](https://github.com/angular/angular.js/issues/5053), [#4993](https://github.com/angular/angular.js/issues/4993))
<a name="1.2.9"></a> <a name="1.2.9"></a>
# 1.2.9 enchanted-articulacy (2014-01-15) # 1.2.9 enchanted-articulacy (2014-01-15)
@ -71,6 +20,9 @@
- **$rootScope:** prevent infinite $digest by checking if asyncQueue is empty when decrementing ttl - **$rootScope:** prevent infinite $digest by checking if asyncQueue is empty when decrementing ttl
([2cd09c9f](https://github.com/angular/angular.js/commit/2cd09c9f0e7766bcd191662841b7b1ffc3b6dc3f), ([2cd09c9f](https://github.com/angular/angular.js/commit/2cd09c9f0e7766bcd191662841b7b1ffc3b6dc3f),
[#2622](https://github.com/angular/angular.js/issues/2622)) [#2622](https://github.com/angular/angular.js/issues/2622))
- **$route:** update current route upon $route instantiation
([2b344dbd](https://github.com/angular/angular.js/commit/2b344dbd20777fb1283b3a5bcf35a6ae8d09469d),
[#4957](https://github.com/angular/angular.js/issues/4957))
## Features ## Features
@ -82,30 +34,6 @@
([4ae3184c](https://github.com/angular/angular.js/commit/4ae3184c5915aac9aa00889aa2153c8e84c14966), ([4ae3184c](https://github.com/angular/angular.js/commit/4ae3184c5915aac9aa00889aa2153c8e84c14966),
[#4278](https://github.com/angular/angular.js/issues/4278), [#4225](https://github.com/angular/angular.js/issues/4225)) [#4278](https://github.com/angular/angular.js/issues/4278), [#4225](https://github.com/angular/angular.js/issues/4225))
## Breaking Changes
- **$http:** due to [e1cfb195](https://github.com/angular/angular.js/commit/e1cfb1957feaf89408bccf48fae6f529e57a82fe),
it is now necessary to seperately specify default HTTP headers for PUT, POST and PATCH requests, as these no longer share a single object.
To migrate your code, follow the example below:
Before:
// Will apply to POST, PUT and PATCH methods
$httpProvider.defaults.headers.post = {
"X-MY-CSRF-HEADER": "..."
};
After:
// POST, PUT and PATCH default headers must be specified seperately,
// as they do not share data.
$httpProvider.defaults.headers.post =
$httpProvider.defaults.headers.put =
$httpProviders.defaults.headers.patch = {
"X-MY-CSRF-HEADER": "..."
};
<a name="1.2.8"></a> <a name="1.2.8"></a>
# 1.2.8 interdimensional-cartography (2014-01-10) # 1.2.8 interdimensional-cartography (2014-01-10)

View file

@ -4,8 +4,17 @@ var path = require('path');
module.exports = function(grunt) { module.exports = function(grunt) {
//grunt plugins //grunt plugins
require('load-grunt-tasks')(grunt); grunt.loadNpmTasks('grunt-bump');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.loadNpmTasks('grunt-ddescribe-iit');
grunt.loadNpmTasks('grunt-merge-conflict');
grunt.loadNpmTasks('grunt-parallel');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadTasks('lib/grunt'); grunt.loadTasks('lib/grunt');
var NG_VERSION = util.getVersion(); var NG_VERSION = util.getVersion();
@ -78,7 +87,9 @@ module.exports = function(grunt) {
jqlite: 'karma-jqlite.conf.js', jqlite: 'karma-jqlite.conf.js',
jquery: 'karma-jquery.conf.js', jquery: 'karma-jquery.conf.js',
docs: 'karma-docs.conf.js', docs: 'karma-docs.conf.js',
modules: 'karma-modules.conf.js' modules: 'karma-modules.conf.js',
//NOTE run grunt test:e2e instead and it will start a webserver for you
end2end: 'karma-e2e.conf.js'
}, },
@ -136,13 +147,6 @@ module.exports = function(grunt) {
} }
}, },
jscs: {
src: ['src/**/*.js', 'test/**/*.js'],
options: {
config: ".jscs.json"
}
},
build: { build: {
scenario: { scenario: {
dest: 'build/angular-scenario.js', dest: 'build/angular-scenario.js',
@ -284,14 +288,15 @@ module.exports = function(grunt) {
//alias tasks //alias tasks
grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['jshint', 'package','test:unit','test:promises-aplus', 'tests:docs', 'test:protractor']); grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['jshint', 'package','test:unit','test:promises-aplus', 'tests:docs', 'test:e2e', 'webdriver', 'runprotractor:normal']);
grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']); grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']);
grunt.registerTask('test:jquery', 'Run the jQuery unit tests with Karma', ['tests:jquery']); grunt.registerTask('test:jquery', 'Run the jQuery unit tests with Karma', ['tests:jquery']);
grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', ['tests:modules']); grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', ['tests:modules']);
grunt.registerTask('test:docs', 'Run the doc-page tests with Karma', ['package', 'tests:docs']); grunt.registerTask('test:docs', 'Run the doc-page tests with Karma', ['package', 'tests:docs']);
grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['tests:jqlite', 'tests:jquery', 'tests:modules']); grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['tests:jqlite', 'tests:jquery', 'tests:modules']);
grunt.registerTask('test:e2e', 'Run the end to end tests with Karma and keep a test server running in the background', ['connect:testserver', 'tests:end2end']);
// This should eventually replace test:e2e
grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', ['webdriver', 'connect:testserver', 'runprotractor:normal']); grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', ['webdriver', 'connect:testserver', 'runprotractor:normal']);
grunt.registerTask('test:e2e', 'Alias for test:protractor', ['test:protractor']);
grunt.registerTask('test:docgen', ['jasmine_node']); grunt.registerTask('test:docgen', ['jasmine_node']);
grunt.registerTask('test:promises-aplus',['build:promises-aplus-adapter','shell:promises-aplus-tests']); grunt.registerTask('test:promises-aplus',['build:promises-aplus-adapter','shell:promises-aplus-tests']);
@ -299,6 +304,6 @@ module.exports = function(grunt) {
grunt.registerTask('webserver', ['connect:devserver']); grunt.registerTask('webserver', ['connect:devserver']);
grunt.registerTask('package', ['bower','clean', 'buildall', 'minall', 'collect-errors', 'docs', 'copy', 'write', 'compress']); grunt.registerTask('package', ['bower','clean', 'buildall', 'minall', 'collect-errors', 'docs', 'copy', 'write', 'compress']);
grunt.registerTask('package-without-bower', ['clean', 'buildall', 'minall', 'collect-errors', 'docs', 'copy', 'write', 'compress']); grunt.registerTask('package-without-bower', ['clean', 'buildall', 'minall', 'collect-errors', 'docs', 'copy', 'write', 'compress']);
grunt.registerTask('ci-checks', ['ddescribe-iit', 'merge-conflict', 'jshint', 'jscs']); grunt.registerTask('ci-checks', ['ddescribe-iit', 'merge-conflict', 'jshint']);
grunt.registerTask('default', ['package']); grunt.registerTask('default', ['package']);
}; };

View file

@ -1,6 +1,6 @@
The MIT License The MIT License
Copyright (c) 2010-2014 Google, Inc. http://angularjs.org Copyright (c) 2010-2012 Google, Inc. http://angularjs.org
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

View file

@ -1,23 +0,0 @@
Using AngularJS with the Closure Compiler
=========================================
The Closure Compiler project contains externs definitions for AngularJS
JavaScript in its `contrib/externs` directory.
The definitions contain externs for use with the Closure compiler (aka
JSCompiler). Passing these files to the --externs parameter of a compiler
pass allows using type annotations for AngularJS objects. For example,
Angular's $scope objects can be annotated as:
```js
/** @type {angular.Scope} */
var scope = $scope;
```
This allows JSCompiler to type check accesses to scope, give warnings about
missing methods or incorrect arguments, and also prevents renaming of property
accesses with advanced compilation.
The externs are incomplete and maintained on an as-needed basis, but strive to
be correct. Externs for individual modules should be added in separate files.
See https://developers.google.com/closure/compiler/

View file

@ -7,7 +7,7 @@ syntax to express your applications components clearly and succinctly. It au
synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data
binding. To help you structure your application better and make it easy to test, AngularJS teaches binding. To help you structure your application better and make it easy to test, AngularJS teaches
the browser how to do dependency injection and inversion of control. Oh yeah and it also helps with the browser how to do dependency injection and inversion of control. Oh yeah and it also helps with
server-side communication, taming async callbacks with promises and deferreds; and makes client-side server-side communication, taming async callbacks with promises and deferreds; and make client-side
navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. The best of all: navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. The best of all:
it makes development fun! it makes development fun!

View file

@ -27,7 +27,7 @@ The following is done automatically and should not be done manually:
* 1.2.x - everything else * 1.2.x - everything else
1. Label "GH: *" (to be automated via Mary Poppins) 1. Label "GH: *" (to be automated via Mary Poppins)
* PR - issue is a PR * PR - issue is a PR
* issue - otherwise * issue - otherwise
1. Bugs: 1. Bugs:
* Label "Type: Bug" * Label "Type: Bug"
* Label "Type: Regression" - if the bug is a regression * Label "Type: Regression" - if the bug is a regression
@ -43,7 +43,7 @@ The following is done automatically and should not be done manually:
* Goals of angular core? - Often new features should be implemented as a third-party module rather than an addition to the core. * Goals of angular core? - Often new features should be implemented as a third-party module rather than an addition to the core.
1. Label "component: *" 1. Label "component: *"
* In rare cases, it's ok to have multiple components. * In rare cases, it's ok to have multiple components.
1. Label "impact: *" 1. Label "impact: *"
* small - obscure issue affecting one or handful of developers * small - obscure issue affecting one or handful of developers
* medium - impacts some usage patterns * medium - impacts some usage patterns
@ -52,7 +52,7 @@ The following is done automatically and should not be done manually:
* small - trivial change * small - trivial change
* medium - non-trivial but straightforward change * medium - non-trivial but straightforward change
* large - changes to many components in angular or any changes to $compile, ngRepeat or other "fun" components * large - changes to many components in angular or any changes to $compile, ngRepeat or other "fun" components
1. Label "PRs plz!" for "GH: issue" 1. Label "PRs welcome" for "GH: issue"
* if complexity is small or medium and the problem as well as solution are well captured in the issue * if complexity is small or medium and the problem as well as solution are well captured in the issue
1. Label "origin: google" for issues from Google 1. Label "origin: google" for issues from Google
1. Label "high priority" for security issues, major performance regressions or memory leaks 1. Label "high priority" for security issues, major performance regressions or memory leaks

17
closure/README.md Normal file
View file

@ -0,0 +1,17 @@
This file contains externs for use with the Closure compiler (aka JSCompiler).
Passing these files to the --externs parameter of a compiler pass allows using
type annotations for AngularJS objects. For example, Angular's $scope objects
can be annotated as:
```js
/** @type {angular.Scope} */
var scope = $scope;
```
This allows JSCompiler to type check accesses to scope, give warnings about
missing methods or incorrect arguments, and also prevents renaming of property
accesses with advanced compilation.
The externs are incomplete and maintained on an as-needed basis, but strive to
be correct. Externs for individual modules should be added in separate files.
See https://developers.google.com/closure/compiler/

1975
closure/angular.js vendored Normal file

File diff suppressed because it is too large Load diff

View file

@ -13,7 +13,8 @@ describe("docsSearch", function() {
results[0] = { section: 'tutorial', shortName: 'item one', keywords: 'item, one, 1' }; results[0] = { section: 'tutorial', shortName: 'item one', keywords: 'item, one, 1' };
results[1] = { section: 'tutorial', shortName: 'item man', keywords: 'item, man' }; results[1] = { section: 'tutorial', shortName: 'item man', keywords: 'item, man' };
results[2] = { section: 'api', shortName: 'item other', keywords: 'item, other' }; results[2] = { section: 'api', shortName: 'item other', keywords: 'item, other' };
results[3] = { section: 'api', shortName: 'ngRepeat', keywords: 'item, other' }; results[3] = { section: 'cookbook', shortName: 'item cookbook', keywords: 'item, other' };
results[4] = { section: 'api', shortName: 'ngRepeat', keywords: 'item, other' };
$provide.value('NG_PAGES', results); $provide.value('NG_PAGES', results);
$provide.factory('lunrSearch', function() { $provide.factory('lunrSearch', function() {
@ -40,14 +41,19 @@ describe("docsSearch", function() {
expect(items['api'].length).toBe(2); expect(items['api'].length).toBe(2);
})); }));
it("should place cookbook items in the tutorial", inject(function(docsSearch) {
var items = docsSearch('item');
expect(items['tutorial'].length).toBe(3);
}));
it("should return all results without a search", inject(function(docsSearch) { it("should return all results without a search", inject(function(docsSearch) {
var items = docsSearch(); var items = docsSearch();
expect(items['tutorial'].length).toBe(2); expect(items['tutorial'].length).toBe(3);
expect(items['api'].length).toBe(2); expect(items['api'].length).toBe(2);
})); }));
it("should store values with and without a ng prefix", inject(function(docsSearch) { it("should store values with and without a ng prefix", inject(function(docsSearch) {
expect(interceptedLunrResults[3].title).toBe('ngRepeat repeat'); expect(interceptedLunrResults[4].title).toBe('ngRepeat repeat');
})); }));
}); });

View file

@ -5,8 +5,8 @@
# AngularJS API Docs # AngularJS API Docs
Welcome to the AngularJS API docs page. These pages contain the AngularJS reference materials for version <strong ng-bind="version"></strong>. Welcome to the AngularJS API docs page. These pages contain the AngularJS reference materials for version <strong ng-bind="version"></strong>.
The documentation is organized into **{@link guide/module modules}** which contain various components of an AngularJS application. The documentation is organized into **modules** which contain various components of an AngularJS application.
These components are {@link guide/directive directives}, {@link guide/dev_guide.services services}, {@link guide/filter filters}, {@link guide/providers providers}, {@link guide/templates types}, global APIs and testing mocks. These components are directives, services, filters, providers, types, global APIs and testing mocks.
<div class="alert alert-info"> <div class="alert alert-info">
**Angular Namespaces `$` and `$$`** **Angular Namespaces `$` and `$$`**

View file

@ -0,0 +1,122 @@
@ngdoc overview
@name Cookbook: Advanced Form
@description
Here we extend the basic form example to include common features such as reverting, dirty state
detection, and preventing invalid form submission.
<doc:example>
<doc:source>
<script>
function UserForm($scope) {
var master = {
name: 'John Smith',
address:{
line1: '123 Main St.',
city:'Anytown',
state:'AA',
zip:'12345'
},
contacts:[
{type:'phone', value:'1(234) 555-1212'}
]
};
$scope.state = /^\w\w$/;
$scope.zip = /^\d\d\d\d\d$/;
$scope.cancel = function() {
$scope.form = angular.copy(master);
};
$scope.save = function() {
master = $scope.form;
$scope.cancel();
};
$scope.addContact = function() {
$scope.form.contacts.push({type:'', value:''});
};
$scope.removeContact = function(index) {
$scope.form.contacts.splice(index, 1);
};
$scope.isCancelDisabled = function() {
return angular.equals(master, $scope.form);
};
$scope.isSaveDisabled = function() {
return $scope.myForm.$invalid || angular.equals(master, $scope.form);
};
$scope.cancel();
}
</script>
<div ng-controller="UserForm">
<form name="myForm">
<label>Name:</label><br/>
<input type="text" ng-model="form.name" required/> <br/><br/>
<label>Address:</label> <br/>
<input type="text" ng-model="form.address.line1" size="33" required/> <br/>
<input type="text" ng-model="form.address.city" size="12" required/>,
<input type="text" ng-model="form.address.state" size="2"
ng-pattern="state" required/>
<input type="text" ng-model="form.address.zip" size="5"
ng-pattern="zip" required/><br/><br/>
<label>Contacts:</label>
[ <a href="" ng-click="addContact()">add</a> ]
<div ng-repeat="contact in form.contacts">
<select ng-model="contact.type">
<option>email</option>
<option>phone</option>
<option>pager</option>
<option>IM</option>
</select>
<input type="text" ng-model="contact.value" required/>
[ <a href="" ng-click="removeContact($index)">X</a> ]
</div>
<button ng-click="cancel()" ng-disabled="isCancelDisabled()">Cancel</button>
<button ng-click="save()" ng-disabled="isSaveDisabled()">Save</button>
</form>
<hr/>
Debug View:
<pre>form={{form}}</pre>
</div>
</doc:source>
<doc:scenario>
it('should enable save button', function() {
expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
input('form.name').enter('');
expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
input('form.name').enter('change');
expect(element(':button:contains(Save)').attr('disabled')).toBeFalsy();
element(':button:contains(Save)').click();
expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy();
});
it('should enable cancel button', function() {
expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
input('form.name').enter('change');
expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy();
element(':button:contains(Cancel)').click();
expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
expect(element(':input[ng\\:model="form.name"]').val()).toEqual('John Smith');
});
</doc:scenario>
</doc:example>
#Things to notice
* Cancel & save buttons are only enabled if the form is dirty — there is something to cancel or
save.
* Save button is only enabled if there are no validation errors on the form.
* Cancel reverts the form changes back to original state.
* Save updates the internal model of the form.
* Debug view shows the two models. One presented to the user form and the other being the pristine
copy master.

View file

@ -0,0 +1,63 @@
@ngdoc overview
@name Cookbook: Resources - Buzz
@description
External resources are URLs that provide JSON data, which are then rendered with the help of
templates. Angular has a resource factory that can be used to give names to the URLs and then
attach behavior to them. For example you can use the
{@link http://code.google.com/apis/buzz/v1/getting_started.html#background-operations| Google Buzz
API}
to retrieve Buzz activity and comments.
<doc:example>
<doc:source>
<script>
BuzzController.$inject = ['$scope', '$resource'];
function BuzzController($scope, $resource) {
$scope.userId = 'googlebuzz';
$scope.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'}}
});
$scope.fetch = function() {
$scope.activities = $scope.Activity.get({userId:this.userId});
}
$scope.expandReplies = function(activity) {
activity.replies = $scope.Activity.replies({userId: this.userId, activityId: activity.id});
}
};
</script>
<div ng-controller="BuzzController">
<input ng-model="userId"/>
<button ng-click="fetch()">fetch</button>
<hr/>
<div class="buzz" ng-repeat="item in activities.data.items">
<h1 style="font-size: 15px;">
<img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
<a href ng-click="expandReplies(item)" style="float: right;">
Expand replies: {{item.links.replies[0].count}}
</a>
</h1>
{{item.object.content | html}}
<div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
<img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
<a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
{{reply.content | html}}
</div>
</div>
</div>
</doc:source>
<doc:scenario>
xit('fetch buzz and expand', function() {
element(':button:contains(fetch)').click();
expect(repeater('div.buzz').count()).toBeGreaterThan(0);
element('.buzz a:contains(Expand replies):first').click();
expect(repeater('div.reply').count()).toBeGreaterThan(0);
});
</doc:scenario>
</doc:example>

View file

@ -0,0 +1,151 @@
@ngdoc overview
@name Cookbook: Deep Linking
@description
Deep linking allows you to encode the state of the application in the URL so that it can be
bookmarked and the application can be restored from the URL to the same state.
While Angular does not force you to deal with bookmarks in any particular way, it has services
which make the common case described here very easy to implement.
# Assumptions
Your application consists of a single HTML page which bootstraps the application. We will refer
to this page as the chrome.
Your application is divided into several screens (or views) which the user can visit. For example,
the home screen, settings screen, details screen, etc. For each of these screens, we would like to
assign a URL so that it can be bookmarked and later restored. Each of these screens will be
associated with a controller which define the screen's behavior. The most common case is that the
screen will be constructed from an HTML snippet, which we will refer to as the partial. Screens can
have multiple partials, but a single partial is the most common construct. This example makes the
partial boundary visible using a blue line.
You can make a routing table which shows which URL maps to which partial view template and which
controller.
# Example
In this example we have a simple app which consist of two screens:
* Welcome: url `welcome` Show the user contact information.
* Settings: url `settings` Show an edit screen for user contact information.
<example module="deepLinking" deps="angular-route.js, angular-sanitize.js">
<file name="script.js">
angular.module('deepLinking', ['ngRoute', 'ngSanitize'])
.config(function($routeProvider) {
$routeProvider.
when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}).
when("/settings", {templateUrl:'settings.html', controller:SettingsCntl});
});
AppCntl.$inject = ['$scope', '$route']
function AppCntl($scope, $route) {
$scope.$route = $route;
// initialize the model to something useful
$scope.person = {
name:'anonymous',
contacts:[{type:'email', url:'anonymous@example.com'}]
};
}
function WelcomeCntl($scope) {
$scope.greet = function() {
alert("Hello " + $scope.person.name);
};
}
function SettingsCntl($scope, $location) {
$scope.cancel = function() {
$scope.form = angular.copy($scope.person);
};
$scope.save = function() {
angular.copy($scope.form, $scope.person);
$location.path('/welcome');
};
$scope.cancel();
}
</file>
<file name="style.css">
[ng-view] {
border: 1px solid blue;
margin: 0;
padding:1em;
}
.partial-info {
background-color: blue;
color: white;
padding: 3px;
}
</file>
<file name="index.html">
<div ng-controller="AppCntl">
<h1>Your App Chrome</h1>
[ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ]
<hr/>
<span class="partial-info">
Partial: {{$route.current.template}}
</span>
<div ng-view></div>
<small>Your app footer </small>
</div>
</file>
<file name="settings.html">
<label>Name:</label>
<input type="text" ng:model="form.name" required>
<div ng:repeat="contact in form.contacts">
<select ng:model="contact.type">
<option>url</option>
<option>email</option>
<option>phone</option>
</select>
<input type="text" ng:model="contact.url">
[ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
</div>
<div>
[ <a href="" ng:click="form.contacts.$add()">add</a> ]
</div>
<button ng:click="cancel()">Cancel</button>
<button ng:click="save()">Save</button>
</file>
<file name="welcome.html">
Hello {{person.name}},
<div>
Your contact information:
<div ng:repeat="contact in person.contacts">{{contact.type}}:
<span ng-bind-html="contact.url|linky"></span>
</div>
</div>
</file>
<file name="scenario.js">
it('should navigate to URL', function() {
element('a:contains(Welcome)').click();
expect(element('[ng-view]').text()).toMatch(/Hello anonymous/);
element('a:contains(Settings)').click();
input('form.name').enter('yourname');
element(':button:contains(Save)').click();
element('a:contains(Welcome)').click();
expect(element('[ng-view]').text()).toMatch(/Hello yourname/);
});
</file>
</example>
# Things to notice
* Routes are defined in the `AppCntl` class. The initialization of the controller causes the
initialization of the {@link api/ngRoute.$route $route} service with the proper URL
routes.
* The {@link api/ngRoute.$route $route} service then watches the URL and instantiates the
appropriate controller when the URL changes.
* The {@link api/ngRoute.directive:ngView ngView} widget loads the
view when the URL changes. It also sets the view scope to the newly instantiated controller.
* Changing the URL is sufficient to change the controller and view. It makes no difference whether
the URL is changed programmatically or by the user.

View file

@ -0,0 +1,114 @@
@ngdoc overview
@name Cookbook: Form
@description
A web application's main purpose is to present and gather data. For this reason Angular strives
to make both of these operations trivial. This example shows off how you can build a simple form to
allow a user to enter data.
<doc:example>
<doc:source>
<script>
function FormController($scope) {
var user = $scope.user = {
name: 'John Smith',
address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
contacts:[{type:'phone', value:'1(234) 555-1212'}]
};
$scope.state = /^\w\w$/;
$scope.zip = /^\d\d\d\d\d$/;
$scope.addContact = function() {
user.contacts.push({type:'email', value:''});
};
$scope.removeContact = function(contact) {
for (var i = 0, ii = user.contacts.length; i < ii; i++) {
if (contact === user.contacts[i]) {
$scope.user.contacts.splice(i, 1);
}
}
};
}
</script>
<div ng-controller="FormController" class="example">
<label>Name:</label><br>
<input type="text" ng-model="user.name" required/> <br><br>
<label>Address:</label><br>
<input type="text" ng-model="user.address.line1" size="33" required> <br>
<input type="text" ng-model="user.address.city" size="12" required>,
<input type="text" ng-model="user.address.state"
ng-pattern="state" size="2" required>
<input type="text" ng-model="user.address.zip" size="5"
ng-pattern="zip" required><br><br>
<label>Phone:</label>
[ <a href="" ng-click="addContact()">add</a> ]
<div ng-repeat="contact in user.contacts">
<select ng-model="contact.type">
<option>email</option>
<option>phone</option>
<option>pager</option>
<option>IM</option>
</select>
<input type="text" ng-model="contact.value" required>
[ <a href="" ng-click="removeContact(contact)">X</a> ]
</div>
<hr/>
Debug View:
<pre>user={{user | json}}</pre>
</div>
</doc:source>
<doc:scenario>
it('should show debug', function() {
expect(binding('user')).toMatch(/John Smith/);
});
it('should add contact', function() {
using('.example').element('a:contains(add)').click();
using('.example div:last').input('contact.value').enter('you@example.org');
expect(binding('user')).toMatch(/\(234\) 555\-1212/);
expect(binding('user')).toMatch(/you@example.org/);
});
it('should remove contact', function() {
using('.example').element('a:contains(X)').click();
expect(binding('user')).not().toMatch(/\(234\) 555\-1212/);
});
it('should validate zip', function() {
expect(using('.example').
element(':input[ng\\:model="user.address.zip"]').
prop('className')).not().toMatch(/ng-invalid/);
using('.example').input('user.address.zip').enter('abc');
expect(using('.example').
element(':input[ng\\:model="user.address.zip"]').
prop('className')).toMatch(/ng-invalid/);
});
it('should validate state', function() {
expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
.not().toMatch(/ng-invalid/);
using('.example').input('user.address.state').enter('XXX');
expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className'))
.toMatch(/ng-invalid/);
});
</doc:scenario>
</doc:example>
# Things to notice
* The user data model is initialized {@link api/ng.directive:ngController controller} and is
available in the {@link api/ng.$rootScope.Scope scope} with the initial data.
* For debugging purposes we have included a debug view of the model to better understand what
is going on.
* The {@link api/ng.directive:input input directives} simply refer
to the model and are data-bound.
* The inputs validate. (Try leaving them blank or entering non digits in the zip field)
* In your application you can simply read from or write to the model and the form will be updated.
* By clicking the 'add' link you are adding new items into the `user.contacts` array which are then
reflected in the view.

View file

@ -0,0 +1,39 @@
@ngdoc overview
@name Cookbook: Hello World
@description
<doc:example>
<doc:source>
<script>
function HelloCntl($scope) {
$scope.name = 'World';
}
</script>
<div ng-controller="HelloCntl">
Your name: <input type="text" ng-model="name"/>
<hr/>
Hello {{name || "World"}}!
</div>
</doc:source>
<doc:scenario>
it('should change the binding when user enters text', function() {
expect(binding('name')).toEqual('World');
input('name').enter('angular');
expect(binding('name')).toEqual('angular');
});
</doc:scenario>
</doc:example>
# Things to notice
Take a look through the source and note:
* The script tag that {@link guide/bootstrap bootstraps} the Angular environment.
* The text {@link api/ng.directive:input input form control} which is
bound to the greeting name text.
* There is no need for listener registration and event firing on change events.
* The implicit presence of the `name` variable which is in the root {@link api/ng.$rootScope.Scope scope}.
* The double curly brace `{{markup}}`, which binds the name variable to the greeting text.
* The concept of {@link guide/databinding data binding}, which reflects any
changes to the
input field in the greeting text.

View file

@ -0,0 +1,58 @@
@ngdoc overview
@name Cookbook
@description
Welcome to the Angular cookbook. Here we will show you typical uses of Angular by example.
# Hello World
{@link helloworld Hello World}: The simplest possible application that demonstrates the
classic Hello World!
# Basic Form
{@link form Basic Form}: Displaying forms to the user for editing is the bread and butter
of web applications. Angular makes forms easy through bidirectional data binding.
# Advanced Form
{@link advancedform Advanced Form}: Taking the form example to the next level and
providing advanced features such as dirty detection, form reverting and submit disabling if
validation errors exist.
# Model View Controller
{@link mvc MVC}: Tic-Tac-Toe: Model View Controller (MVC) is a time-tested design pattern
to separate the behavior (JavaScript controller) from the presentation (HTML view). This
separation aids in maintainability and testability of your project.
# Multi-page App and Deep Linking
{@link deeplinking Deep Linking}: An AJAX application never navigates away from the
first page it loads. Instead, it changes the DOM of its single page. Eliminating full-page reloads
is what makes AJAX apps responsive, but it creates a problem in that apps with a single URL
prevent you from emailing links to a particular screen within your application.
Deep linking tries to solve this by changing the URL anchor without reloading a page, thus
allowing you to send links to specific screens in your app.
# Services
{@link api/ng Services}: Services are long lived objects in your applications that are
available across controllers. A collection of useful services are pre-bundled with Angular but you
will likely add your own. Services are initialized using dependency injection, which resolves the
order of initialization. This safeguards you from the perils of global state (a common way to
implement long lived objects).
# External Resources
{@link buzz Resources}: Web applications must be able to communicate with the external
services to get and update data. Resources are the abstractions of external URLs which are
specially tailored to Angular data binding.

View file

@ -0,0 +1,128 @@
@ngdoc overview
@name Cookbook: MVC
@description
MVC allows for a clean and testable separation between the behavior (controller) and the view
(HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the
view. This makes it very easy for the controller and the view to share the model.
The model is a set of objects and primitives that are referenced from the Scope ($scope) object.
This makes it very easy to test the controller in isolation since one can simply instantiate the
controller and test without a view, because there is no connection between the controller and the
view.
<doc:example>
<doc:source>
<script>
function TicTacToeCntl($scope, $location) {
$scope.cellStyle= {
'height': '20px',
'width': '20px',
'border': '1px solid black',
'text-align': 'center',
'vertical-align': 'middle',
'cursor': 'pointer'
};
$scope.reset = function() {
$scope.board = [
['', '', ''],
['', '', ''],
['', '', '']
];
$scope.nextMove = 'X';
$scope.winner = '';
setUrl();
};
$scope.dropPiece = function(row, col) {
if (!$scope.winner && !$scope.board[row][col]) {
$scope.board[row][col] = $scope.nextMove;
$scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X';
setUrl();
}
};
$scope.reset();
$scope.$watch(function() { return $location.search().board;}, readUrl);
function setUrl() {
var rows = [];
angular.forEach($scope.board, function(row) {
rows.push(row.join(','));
});
$location.search({board: rows.join(';') + '/' + $scope.nextMove});
}
function grade() {
var b = $scope.board;
$scope.winner =
row(0) || row(1) || row(2) ||
col(0) || col(1) || col(2) ||
diagonal(-1) || diagonal(1);
function row(row) { return same(b[row][0], b[row][1], b[row][2]);}
function col(col) { return same(b[0][col], b[1][col], b[2][col]);}
function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}
function same(a, b, c) { return (a==b && b==c) ? a : '';};
}
function readUrl(value) {
if (value) {
value = value.split('/');
$scope.nextMove = value[1];
angular.forEach(value[0].split(';'), function(row, col){
$scope.board[col] = row.split(',');
});
grade();
}
}
}
</script>
<h3>Tic-Tac-Toe</h3>
<div ng-controller="TicTacToeCntl">
Next Player: {{nextMove}}
<div class="winner" ng-show="winner">Player {{winner}} has won!</div>
<table class="board">
<tr ng-repeat="row in board track by $index" style="height:15px;">
<td ng-repeat="cell in row track by $index" ng-style="cellStyle"
ng-click="dropPiece($parent.$index, $index)">{{cell}}</td>
</tr>
</table>
<button ng-click="reset()">reset board</button>
</div>
</doc:source>
<doc:scenario>
it('should play a game', function() {
piece(1, 1);
expect(binding('nextMove')).toEqual('O');
piece(3, 1);
expect(binding('nextMove')).toEqual('X');
piece(1, 2);
piece(3, 2);
piece(1, 3);
expect(element('.winner').text()).toEqual('Player X has won!');
});
function piece(row, col) {
element('.board tr:nth-child('+row+') td:nth-child('+col+')').click();
}
</doc:scenario>
</doc:example>
# Things to notice
* The controller is defined in JavaScript and has no reference to the rendering logic.
* The controller is instantiated by Angular and injected into the view.
* The controller can be instantiated in isolation (without a view) and the code will still execute.
This makes it very testable.
* The HTML view is a projection of the model. In the above example, the model is stored in the
board variable.
* All of the controller's properties (such as board and nextMove) are available to the view.
* Changing the model changes the view.
* The view can call any controller function.
* In this example, the `setUrl()` and `readUrl()` functions copy the game state to/from the URL's
hash so the browser's back button will undo game steps. See deep-linking. This example calls {@link
api/ng.$rootScope.Scope#methods_$watch $watch()} to set up a listener that invokes `readUrl()` when needed.

View file

@ -11,7 +11,7 @@ For these reasons binding to event handler attributes (all attributes that start
An example code that would allow XSS vulnerability by evaluating user input in the window context could look like this: An example code that would allow XSS vulnerability by evaluating user input in the window context could look like this:
``` ```
<input ng-model="username"> <input ng-mode="username">
<div onclick="{{username}}">click me</div> <div onclick="{{username}}">click me</div>
``` ```

View file

@ -1,10 +0,0 @@
@ngdoc error
@name $httpBackend:noxhr
@fullName Unsupported XHR
@description
This error occurs in browsers that do not support XmlHttpRequest. AngularJS
supports Safari, Chrome, Firefox, Opera, IE8 and higher, and mobile browsers
(Android, Chrome Mobile, iOS Safari). To avoid this error, use an officially
supported browser.

View file

@ -21,19 +21,19 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
<label> <label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible... <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label> </label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;"> <div class="check-element animate-show-hide" ng-show="checked" style="clear:both;">
Visible... Visible...
</div> </div>
</div> </div>
</file> </file>
<file name="animations.css"> <file name="animations.css">
.sample-show-hide { .animate-show-hide {
padding:10px; padding:10px;
border:1px solid black; border:1px solid black;
background:white; background:white;
} }
.sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove { .animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove {
-webkit-transition:all linear 0.5s; -webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s; -moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s; -o-transition:all linear 0.5s;
@ -41,13 +41,13 @@ Below is a quick example of animations being enabled for `ngShow` and `ngHide`:
display:block!important; display:block!important;
} }
.sample-show-hide.ng-hide-add.ng-hide-add-active, .animate-show-hide.ng-hide-add.ng-hide-add-active,
.sample-show-hide.ng-hide-remove { .animate-show-hide.ng-hide-remove {
opacity:0; opacity:0;
} }
.sample-show-hide.ng-hide-add, .animate-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove.ng-hide-remove-active { .animate-show-hide.ng-hide-remove.ng-hide-remove-active {
opacity:1; opacity:1;
} }
</file> </file>
@ -258,7 +258,7 @@ The table below explains in detail which animation events are triggered
| {@link api/ng.directive:ngInclude#usage_animations ngInclude} | enter and leave | | {@link api/ng.directive:ngInclude#usage_animations ngInclude} | enter and leave |
| {@link api/ng.directive:ngSwitch#usage_animations ngSwitch} | enter and leave | | {@link api/ng.directive:ngSwitch#usage_animations ngSwitch} | enter and leave |
| {@link api/ng.directive:ngIf#usage_animations ngIf} | enter and leave | | {@link api/ng.directive:ngIf#usage_animations ngIf} | enter and leave |
| {@link api/ng.directive:ngClass#usage_animations ngClass or &#123;&#123;class&#125;&#125;} | add and remove | | {@link api/ng.directive:ngShow#usage_animations ngClass or &#123;&#123;class&#125;&#125;} | add and remove |
| {@link api/ng.directive:ngShow#usage_animations ngShow & ngHide} | add and remove (the ng-hide class value) | | {@link api/ng.directive:ngShow#usage_animations ngShow & ngHide} | add and remove (the ng-hide class value) |
For a full breakdown of the steps involved during each animation event, refer to the {@link api/ngAnimate.$animate API docs}. For a full breakdown of the steps involved during each animation event, refer to the {@link api/ngAnimate.$animate API docs}.

View file

@ -272,8 +272,8 @@ including the configuration of all modules that this module depends on.
In the example above: In the example above:
The template contains the directive `ng-app="invoice2"`. This tells Angular The template contains the directive `ng-app="invoice2"`. This tells Angular
to use the `invoice` module as the main module for the application. to use the `invoice` module as the main module for the application.
The code snippet `angular.module('invoice2', ['finance2'])` specifies that the `invoice2` module depends on the The code snippet `angular.module('invoice', ['finance'])` specifies that the `invoice` module depends on the
`finance2` module. By this, Angular uses the `InvoiceController` as well as the `currencyConverter` service. `finance` module. By this, Angular uses the `InvoiceController` as well as the `currencyConverter` service.
Now that Angular knows of all the parts of the application, it needs to create them. Now that Angular knows of all the parts of the application, it needs to create them.
In the previous section we saw that controllers are created using a factory function. In the previous section we saw that controllers are created using a factory function.

View file

@ -168,7 +168,7 @@ starts with capital letter and ends with "Ctrl" or "Controller".
- Assigning a property to `$scope` creates or updates the model. - Assigning a property to `$scope` creates or updates the model.
- Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method) - Controller methods can be created through direct assignment to scope (see the `chiliSpicy` method)
- The Controller methods and properties are available in the template (for the `<div>` element and - The Controller methods and properties are available in the template (for the `<div>` element and
its children). and its children).
## Spicy Arguments Example ## Spicy Arguments Example

View file

@ -53,19 +53,18 @@ function myController(scope, notifyService) {
myController.$inject = ['$scope','notify']; myController.$inject = ['$scope','notify'];
</script> </script>
<div id="simple" ng-controller="myController"> <div ng-controller="myController">
<p>Let's try this simple notify service, injected into the controller...</p> <p>Let's try this simple notify service, injected into the controller...</p>
<input ng-init="message='test'" ng-model="message" > <input ng-init="message='test'" ng-model="message" >
<button ng-click="callNotify(message);">NOTIFY</button> <button ng-click="callNotify(message);">NOTIFY</button>
<p>(you have to click 3 times to see an alert)</p> <p>(you have to click 3 times to see an alert)</p>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should test service', function() { it('should test service', function() {
expect(element(by.id('simple')).element(by.model('message')).getAttribute('value')) expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
.toEqual('test');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
## Implicit Dependency Injection ## Implicit Dependency Injection
@ -96,7 +95,7 @@ function myController($scope, notify) {
}; };
} }
</script> </script>
<div id="implicit" ng-controller="myController"> <div ng-controller="myController">
<p>Let's try the notify service, that is implicitly injected into the controller...</p> <p>Let's try the notify service, that is implicitly injected into the controller...</p>
<input ng-init="message='test'" ng-model="message"> <input ng-init="message='test'" ng-model="message">
<button ng-click="callNotify(message);">NOTIFY</button> <button ng-click="callNotify(message);">NOTIFY</button>

View file

@ -55,7 +55,7 @@ of which depend on other services that are provided by the Angular framework:
function log() { function log() {
if (messageQueue.length) { if (messageQueue.length) {
$log.log('batchLog messages: ', messageQueue); $log('batchLog messages: ', messageQueue);
messageQueue = []; messageQueue = [];
} }
} }

View file

@ -13,7 +13,7 @@ Angular sets these CSS classes. It is up to your application to provide useful s
* `ng-binding` * `ng-binding`
- **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or - **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or
`{{}}` curly braces, for example. (see {@link guide/databinding databinding} guide) {{}} curly braces, for example. (see {@link guide/databinding databinding} guide)
* `ng-invalid`, `ng-valid` * `ng-invalid`, `ng-valid`
- **Usage:** angular applies this class to an input widget element if that element's input does - **Usage:** angular applies this class to an input widget element if that element's input does

View file

@ -55,7 +55,7 @@ The following also **matches** `ngModel`:
Angular **normalizes** an element's tag and attribute name to determine which elements match which Angular **normalizes** an element's tag and attribute name to determine which elements match which
directives. We typically refer to directives by their case-sensitive directives. We typically refer to directives by their case-sensitive
{@link http://en.wikipedia.org/wiki/CamelCase camelCase} **normalized** name (e.g. `ngModel`). {@link http://en.wikipedia.org/wiki/CamelCase camelCase} **normalized** name (e.g. `ngModel`).
However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case
forms, typically using {@link http://en.wikipedia.org/wiki/Letter_case#Computers dash-delimited} forms, typically using {@link http://en.wikipedia.org/wiki/Letter_case#Computers dash-delimited}
attributes on DOM elements (e.g. `ng-model`). attributes on DOM elements (e.g. `ng-model`).
@ -84,10 +84,10 @@ Here are some equivalent examples of elements that match `ngBind`:
<span x-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/>
</div> </div>
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should show off bindings', function() { it('should show off bindings', function() {
expect(element(by.css('div[ng-controller="Ctrl1"] span[ng-bind]')).getText()) expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text())
.toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 October 4, 1947)'); .toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 October 4, 1947)');
}); });
</file> </file>
</example> </example>
@ -174,9 +174,9 @@ For example, we could fix the example above by instead writing:
## Creating Directives ## Creating Directives
First let's talk about the {@link api/ng.$compileProvider#methods_directive API for registering directives}. Much like First let's talk about the API for registering directives. Much like controllers, directives are
controllers, directives are registered on modules. To register a directive, you use the registered on modules. To register a directive, you use the `module.directive` API.
`module.directive` API. `module.directive` takes the `module.directive` takes the
{@link guide/directive#creating-custom-directives_matching-directives normalized} directive name {@link guide/directive#creating-custom-directives_matching-directives normalized} directive name
followed by a **factory function.** This factory function should return an object with the different followed by a **factory function.** This factory function should return an object with the different
options to tell `$compile` how the directive should behave when matched. options to tell `$compile` how the directive should behave when matched.
@ -527,8 +527,7 @@ where:
* `scope` is an Angular scope object. * `scope` is an Angular scope object.
* `element` is the jqLite-wrapped element that this directive matches. * `element` is the jqLite-wrapped element that this directive matches.
* `attrs` is a hash object with key-value pairs of normalized attribute names and their * `attrs` is an object with the normalized attribute names and their corresponding values.
corresponding attribute values.
In our `link` function, we want to update the displayed time once a second, or whenever a user In our `link` function, we want to update the displayed time once a second, or whenever a user
changes the time formatting string that our directive binds to. We will use the `$interval` service changes the time formatting string that our directive binds to. We will use the `$interval` service
@ -735,13 +734,13 @@ own behavior to it.
We want to run the function we pass by invoking it from the directive's scope, but have it run We want to run the function we pass by invoking it from the directive's scope, but have it run
in the context of the scope where its registered. in the context of the scope where its registered.
We saw earlier how to use `=attr` in the `scope` option, but in the above example, we're using We saw earlier how to use `=prop` in the `scope` option, but in the above example, we're using
`&attr` instead. `&` bindings expose a function to an isolated scope allowing the isolated scope `&prop` instead. `&` bindings expose a function to an isolated scope allowing the isolated scope
to invoke it, but maintaining the original scope of the function. So when a user clicks the to invoke it, but maintaining the original scope of the function. So when a user clicks the
`x` in the dialog, it runs `Ctrl`'s `hideDialog` function. `x` in the dialog, it runs `Ctrl`'s `close` function.
<div class="alert alert-success"> <div class="alert alert-success">
**Best Practice:** use `&attr` in the `scope` option when you want your directive **Best Practice:** use `&prop` in the `scope` option when you want your directive
to expose an API for binding to behaviors. to expose an API for binding to behaviors.
</div> </div>

View file

@ -37,11 +37,11 @@ JavaScript, use the {@link api/ng.$rootScope.Scope#methods_$eval `$eval()`} meth
<doc:source> <doc:source>
1+2={{1+2}} 1+2={{1+2}}
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should calculate expression in binding', function() { it('should calculate expression in binding', function() {
expect(element(by.binding('1+2')).getText()).toEqual('1+2=3'); expect(binding('1+2')).toEqual('3');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
You can try evaluating different expressions here: You can try evaluating different expressions here:
@ -73,14 +73,14 @@ You can try evaluating different expressions here:
</ul> </ul>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should allow user expression testing', function() { it('should allow user expression testing', function() {
element(by.css('.expressions button')).click(); element('.expressions :button').click();
var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs')); var li = using('.expressions ul').repeater('li');
expect(lis.count()).toBe(1); expect(li.count()).toBe(1);
expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00'); expect(li.row(0)).toEqual(["3*10|currency", "$30.00"]);
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
@ -99,7 +99,7 @@ prevent accidental access to the global state (a common source of subtle bugs).
$scope.name = 'World'; $scope.name = 'World';
$scope.greet = function() { $scope.greet = function() {
$window.alert('Hello ' + $scope.name); ($window.mockWindow || $window).alert('Hello ' + $scope.name);
} }
} }
</script> </script>
@ -108,17 +108,21 @@ prevent accidental access to the global state (a common source of subtle bugs).
<button ng-click="greet()">Greet</button> <button ng-click="greet()">Greet</button>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should calculate expression in binding', function() { it('should calculate expression in binding', function() {
element(by.css('[ng-click="greet()"]')).click(); var alertText;
this.addFutureAction('set mock', function($window, $document, done) {
var alertDialog = browser.switchTo().alert(); $window.mockWindow = {
alert: function(text){ alertText = text; }
expect(alertDialog.getText()).toEqual('Hello World'); };
done();
alertDialog.accept(); });
}); element(':button:contains(Greet)').click();
</doc:protractor> expect(this.addFuture('alert text', function(done) {
done(null, alertText);
})).toBe('Hello World');
});
</doc:scenario>
</doc:example> </doc:example>
## Forgiving ## Forgiving

View file

@ -121,6 +121,3 @@ text upper-case.
</doc:source> </doc:source>
</doc:example> </doc:example>
## Testing custom filters
See the {@link http://docs.angularjs.org/tutorial/step_09#test phonecat tutorial} for an example.

View file

@ -87,16 +87,6 @@ grunt package
Administrator). This is because `grunt package` creates some symbolic links. Administrator). This is because `grunt package` creates some symbolic links.
</div> </div>
<div class="alert alert-warning">
**Note:** If you're using Linux, and npm install fails with the message
'Please try running this command again as root/Administrator.', you may need to globally install grunt and bower:
<ul>
<li>sudo npm install -g grunt-cli</li>
<li>sudo npm install -g bower</li>
</ul>
</div>
The build output can be located under the `build` directory. It consists of the following files and The build output can be located under the `build` directory. It consists of the following files and
directories: directories:

View file

@ -77,7 +77,7 @@ directory.</p></li>
</pre></li> </pre></li>
<li><p>You will need an http server running on your system. Mac and Linux machines typically <li><p>You will need an http server running on your system. Mac and Linux machines typically
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code> have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
to run a simple bundled http server: <code>node scripts/web-server.js</code>.</p></li> to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
</ol> </ol>
</div> </div>
@ -106,8 +106,8 @@ directory.</p>
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be <p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
executed from the Windows command line.</li> executed from the Windows command line.</li>
<li><p>You need an http server running on your system, but if you don't already have one <li><p>You need an http server running on your system, but if you don't already have one
already installed, you can use <code>node</code> to run a simple already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
bundled http server: <code>node scripts\web-server.js</code>.</p></li> bundled http server.</p></li>
</ol> </ol>
</div> </div>

View file

@ -73,7 +73,7 @@ angular-seed, and run the application in the browser.
You can now see the page in your browser. It's not very exciting, but that's OK. You can now see the page in your browser. It's not very exciting, but that's OK.
The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below. The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
The code contains some key Angular elements that we will need as we progress. The code contains some key Angular elements that we will need going forward.
__`app/index.html`:__ __`app/index.html`:__
<pre> <pre>
@ -104,7 +104,7 @@ __`app/index.html`:__
The `ng-app` attribute represents an Angular directive named `ngApp` (Angular uses The `ng-app` attribute represents an Angular directive named `ngApp` (Angular uses
`name-with-dashes` for its custom attributes and `camelCase` for the corresponding directives `name-with-dashes` for its custom attributes and `camelCase` for the corresponding directives
which implement them). that implements them).
This directive is used to flag the html element that Angular should consider to be the root element This directive is used to flag the html element that Angular should consider to be the root element
of our application. of our application.
This gives application developers the freedom to tell Angular if the entire html page or only a This gives application developers the freedom to tell Angular if the entire html page or only a

View file

@ -217,7 +217,7 @@ To run the test, do the following:
* Create a new model property in the controller and bind to it from the template. For example: * Create a new model property in the controller and bind to it from the template. For example:
$scope.name = "World"; $scope.name = "World"
Then add a new binding to `index.html`: Then add a new binding to `index.html`:

View file

@ -177,7 +177,7 @@ route into the layout template. This makes it a perfect fit for our `index.html`
<div class="alert alert-info"> <div class="alert alert-info">
**Note:** Starting with AngularJS version 1.2, `ngRoute` is in its own module and must be loaded by loading **Note:** Starting with AngularJS version 1.2, `ngRoute` is in its own module and must be loaded by loading
the `angular-route.js` file distributed with Angular. The easiest way to load the file is to add a `<script>` the `angular-route.js` file distributed with Angular. The easist way to load the file is to add a `<script>`
tag to your `index.html` file as shown below. tag to your `index.html` file as shown below.
</div> </div>

View file

@ -340,58 +340,45 @@ Although we could do that, let's take the opportunity to learn how to create Jav
__`app/js/animations.js`.__ __`app/js/animations.js`.__
<pre> <pre>
var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']); angular.module('phonecatAnimations', ['ngAnimate'])
phonecatAnimations.animation('.phone', function() { .animation('.phone', function() {
return {
addClass : function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 500,
left: 0,
display: 'block'
});
jQuery(element).animate({
top: 0
}, done);
var animateUp = function(element, className, done) { return function(cancel) {
if(className != 'active') { if(cancel) element.stop();
return; };
} },
element.css({ removeClass : function(element, className, done) {
position: 'absolute', if(className != 'active') return;
top: 500, element.css({
left: 0, position: 'absolute',
display: 'block' left: 0,
}); top: 0
});
jQuery(element).animate({
top: -500
}, done);
jQuery(element).animate({ return function(cancel) {
top: 0 if(cancel) element.stop();
}, done); };
return function(cancel) {
if(cancel) {
element.stop();
} }
}; };
} });
var animateDown = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
left: 0,
top: 0
});
jQuery(element).animate({
top: -500
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
return {
addClass: animateUp,
removeClass: animateDown
};
});
</pre> </pre>
Note that we're using {@link http://jquery.com/ jQuery} to implement the animation. jQuery Note that we're using {@link http://jquery.com/ jQuery} to implement the animation. jQuery

View file

@ -8,6 +8,8 @@ previous steps using the `git checkout` command.
For more details and examples of the Angular concepts we touched on in this tutorial, see the For more details and examples of the Angular concepts we touched on in this tutorial, see the
{@link guide/ Developer Guide}. {@link guide/ Developer Guide}.
For several more examples of code, see the {@link cookbook/ Cookbook}.
When you are ready to start developing a project using Angular, we recommend that you bootstrap When you are ready to start developing a project using Angular, we recommend that you bootstrap
your development with the {@link https://github.com/angular/angular-seed angular-seed} project. your development with the {@link https://github.com/angular/angular-seed angular-seed} project.

View file

@ -51,7 +51,7 @@ exports.ngVersions = function() {
}); });
//match the future version of AngularJS that is set in the package.json file //match the future version of AngularJS that is set in the package.json file
return expandVersions(sortVersionsNaturally(versions), exports.ngCurrentVersion().full); return expandVersions(sortVersionsNatrually(versions), exports.ngCurrentVersion().full);
function expandVersions(versions, latestVersion) { function expandVersions(versions, latestVersion) {
var RC_VERSION = /rc\d/; var RC_VERSION = /rc\d/;
@ -87,7 +87,7 @@ exports.ngVersions = function() {
return expanded; return expanded;
}; };
function sortVersionsNaturally(versions) { function sortVersionsNatrually(versions) {
var versionMap = {}, var versionMap = {},
NON_RC_RELEASE_NUMBER = 999; NON_RC_RELEASE_NUMBER = 999;
for(var i = versions.length - 1; i >= 0; i--) { for(var i = versions.length - 1; i >= 0; i--) {
@ -1401,14 +1401,6 @@ function explainModuleInstallation(moduleName){
modulePackage = 'angular-' + moduleName, modulePackage = 'angular-' + moduleName,
modulePackageFile = modulePackage + '.js'; modulePackageFile = modulePackage + '.js';
// Deal with inconsistent ngMock naming - doing it verbosely and explicitly here
// rather than cleverly interweaving it in the previous lines to make it obvious
// what is going on
if ( moduleName == 'mock' ) {
modulePackage = 'angular-mocks';
modulePackageFile = modulePackage + '.js';
}
return '<h1>Installation</h1>' + return '<h1>Installation</h1>' +
'<p>First include <code>' + modulePackageFile +'</code> in your HTML:</p><pre><code>' + '<p>First include <code>' + modulePackageFile +'</code> in your HTML:</p><pre><code>' +
' &lt;script src=&quot;angular.js&quot;&gt;\n' + ' &lt;script src=&quot;angular.js&quot;&gt;\n' +

View file

@ -16,4 +16,4 @@ RewriteCond %{HTTP_HOST} ^docs-next\.angularjs\.org$
RewriteRule appcache.manifest http://code.angularjs.org/next/docs/appcache.manifest [R=301] RewriteRule appcache.manifest http://code.angularjs.org/next/docs/appcache.manifest [R=301]
## HTML5 URL Support ## ## HTML5 URL Support ##
RewriteRule ^(guide|api|misc|tutorial)(/.*)?$ index.html RewriteRule ^(guide|api|cookbook|misc|tutorial)(/.*)?$ index.html

View file

@ -246,10 +246,6 @@ ul.events > li > h3 {
text-decoration: none; text-decoration: none;
} }
.tutorial-nav li {
margin-right: 5px;
}
.clear { .clear {
clear: both; clear: both;
} }

View file

@ -26,7 +26,7 @@
} }
var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1], var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1],
rUrl = /(#!\/|api|guide|misc|tutorial|error|index[^\.]*\.html).*$/, rUrl = /(#!\/|api|guide|misc|tutorial|cookbook|error|index[^\.]*\.html).*$/,
baseUrl = location.href.replace(rUrl, indexFile), baseUrl = location.href.replace(rUrl, indexFile),
jQuery = /index-jq[^\.]*\.html$/.test(baseUrl), jQuery = /index-jq[^\.]*\.html$/.test(baseUrl),
debug = /index[^\.]*-debug\.html$/.test(baseUrl), debug = /index[^\.]*-debug\.html$/.test(baseUrl),
@ -334,6 +334,10 @@
<div id="loading" ng-show="loading">Loading...</div> <div id="loading" ng-show="loading">Loading...</div>
<div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content slide-reveal"></div> <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content slide-reveal"></div>
<div class="alert alert-info">
<a href="http://blog.angularjs.org/2013/11/farewell-disqus.html">Where did Disqus go?</a>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -111,6 +111,9 @@ docsApp.serviceFactory.docsSearch = ['$rootScope','lunrSearch', 'NG_PAGES',
angular.forEach(index.search(q), function(result) { angular.forEach(index.search(q), function(result) {
var item = NG_PAGES[result.ref]; var item = NG_PAGES[result.ref];
var section = item.section; var section = item.section;
if(section == 'cookbook') {
section = 'tutorial';
}
results[section] = results[section] || []; results[section] = results[section] || [];
if(results[section].length < 15) { if(results[section].length < 15) {
results[section].push(item); results[section].push(item);
@ -142,19 +145,11 @@ docsApp.directive.docsSearchInput = ['$document',function($document) {
var ESCAPE_KEY_KEYCODE = 27, var ESCAPE_KEY_KEYCODE = 27,
FORWARD_SLASH_KEYCODE = 191; FORWARD_SLASH_KEYCODE = 191;
angular.element($document[0].body).bind('keydown', function(event) { angular.element($document[0].body).bind('keydown', function(event) {
if(event.keyCode == FORWARD_SLASH_KEYCODE && document.activeElement) { var input = element[0];
var activeElement = document.activeElement; if(event.keyCode == FORWARD_SLASH_KEYCODE && document.activeElement != input) {
var activeTagName = activeElement.nodeName.toLowerCase(); event.stopPropagation();
var hasInputFocus = activeTagName == 'input' || activeTagName == 'select' || event.preventDefault();
activeTagName == 'option' || activeTagName == 'textarea' || input.focus();
activeElement.hasAttribute('contenteditable');
if(!hasInputFocus) {
event.stopPropagation();
event.preventDefault();
var input = element[0];
input.focus();
}
} }
}); });
@ -627,6 +622,7 @@ docsApp.serviceFactory.sections = ['NG_PAGES', function sections(NG_PAGES) {
api: [], api: [],
tutorial: [], tutorial: [],
misc: [], misc: [],
cookbook: [],
error: [], error: [],
getPage: function(sectionId, partialId) { getPage: function(sectionId, partialId) {
var pages = sections[sectionId]; var pages = sections[sectionId];
@ -671,7 +667,7 @@ docsApp.controller.DocsController = function($scope, $rootScope, $location, $win
} }
}; };
var OFFLINE_COOKIE_NAME = 'ng-offline', var OFFLINE_COOKIE_NAME = 'ng-offline',
DOCS_PATH = /^\/(api)|(guide)|(misc)|(tutorial)|(error)/, DOCS_PATH = /^\/(api)|(guide)|(cookbook)|(misc)|(tutorial)|(error)/,
INDEX_PATH = /^(\/|\/index[^\.]*.html)$/, INDEX_PATH = /^(\/|\/index[^\.]*.html)$/,
GLOBALS = /^angular\.([^\.]+)$/, GLOBALS = /^angular\.([^\.]+)$/,
ERROR = /^([a-zA-Z0-9_$]+:)?([a-zA-Z0-9_$]+)$/, ERROR = /^([a-zA-Z0-9_$]+:)?([a-zA-Z0-9_$]+)$/,
@ -733,6 +729,7 @@ docsApp.controller.DocsController = function($scope, $rootScope, $location, $win
guide: 'Developer Guide', guide: 'Developer Guide',
misc: 'Miscellaneous', misc: 'Miscellaneous',
tutorial: 'Tutorial', tutorial: 'Tutorial',
cookbook: 'Examples',
error: 'Error Reference' error: 'Error Reference'
}; };

27
karma-e2e.conf.js Normal file
View file

@ -0,0 +1,27 @@
var sharedConfig = require('./karma-shared.conf');
module.exports = function(config) {
sharedConfig(config, {testName: 'AngularJS: e2e', logFile: 'karma-e2e.log'});
config.set({
frameworks: [],
files: [
'build/angular-scenario.js',
'node_modules/karma-ng-scenario/lib/adapter.js',
'build/docs/docs-scenario.js'
],
proxies: {
// angular.js, angular-resource.js, etc
'/angular': 'http://localhost:8000/build/angular',
'/': 'http://localhost:8000/build/docs/'
},
junitReporter: {
outputFile: 'test_out/e2e.xml',
suite: 'E2E'
},
browserNoActivityTimeout: 90000
});
};

View file

@ -2,7 +2,6 @@ var fs = require('fs');
var shell = require('shelljs'); var shell = require('shelljs');
var grunt = require('grunt'); var grunt = require('grunt');
var spawn = require('child_process').spawn; var spawn = require('child_process').spawn;
var semver = require('semver');
var version; var version;
var CSP_CSS_HEADER = '/* Include this file in your html if you are using the CSP mode. */\n\n'; var CSP_CSS_HEADER = '/* Include this file in your html if you are using the CSP mode. */\n\n';
@ -33,82 +32,31 @@ module.exports = {
getVersion: function(){ getVersion: function(){
if (version) return version; if (version) return version;
var package = JSON.parse(fs.readFileSync('package.json', 'UTF-8')); var package = JSON.parse(fs.readFileSync('package.json', 'UTF-8'));
try { var match = package.version.match(/^([^\-]*)(?:\-(.+))?$/);
var semver = match[1].split('.');
var gitTag = getTagOfCurrentCommit(); var fullVersion = match[1];
var semVerVersion, codeName, fullVersion;
if (gitTag) {
// tagged release
fullVersion = semVerVersion = semver.valid(gitTag);
codeName = getTaggedReleaseCodeName(gitTag);
} else {
// snapshot release
semVerVersion = getSnapshotVersion();
fullVersion = semVerVersion + '-' + getSnapshotSuffix();
codeName = 'snapshot'
}
var versionParts = semVerVersion.match(/(\d+)\.(\d+)\.(\d+)/); if (match[2]) {
fullVersion += '-';
version = { fullVersion += (match[2] == 'snapshot') ? getSnapshotSuffix() : match[2];
full: fullVersion,
major: versionParts[1],
minor: versionParts[2],
dot: versionParts[3],
codename: codeName,
cdn: package.cdnVersion
};
return version;
} catch (e) {
grunt.fail.warn(e);
} }
function getTagOfCurrentCommit() { version = {
var gitTagResult = shell.exec('git describe --exact-match', {silent:true}); full: fullVersion,
var gitTagOutput = gitTagResult.output.trim(); major: semver[0],
var branchVersionPattern = new RegExp(package.branchVersion.replace('.', '\\.').replace('*', '\\d+')); minor: semver[1],
if (gitTagResult.code === 0 && gitTagOutput.match(branchVersionPattern)) { dot: semver[2].replace(/rc\d+/, ''),
return gitTagOutput; codename: package.codename,
} else { cdn: package.cdnVersion
return null; };
}
}
function getTaggedReleaseCodeName(tagName) { return version;
var tagMessage = shell.exec('git cat-file -p '+ tagName +' | grep "codename"', {silent:true}).output;
var codeName = tagMessage && tagMessage.match(/codename\((.*)\)/)[1];
if (!codeName) {
throw new Error("Could not extract release code name. The message of tag "+tagName+
" must match '*codename(some release name)*'");
}
return codeName;
}
function getSnapshotVersion() {
var oldTags = shell.exec('git tag -l v'+package.branchVersion, {silent:true}).output.trim().split('\n');
// ignore non semver versions.
oldTags = oldTags.filter(function(version) {
return version && semver.valid(version);
});
if (oldTags.length) {
oldTags.sort(semver.compare);
semVerVersion = oldTags[oldTags.length-1];
if (semVerVersion.indexOf('-') !== -1) {
semVerVersion = semver.inc(semVerVersion, 'prerelease');
} else {
semVerVersion = semver.inc(semVerVersion, 'patch');
}
} else {
semVerVersion = semver.valid(package.branchVersion.replace(/\*/g, '0'));
}
return semVerVersion;
}
function getSnapshotSuffix() { function getSnapshotSuffix() {
var jenkinsBuild = process.env.TRAVIS_BUILD_NUMBER || process.env.BUILD_NUMBER || 'local'; var jenkinsBuild = process.env.BUILD_NUMBER || 'local';
var hash = shell.exec('git rev-parse --short HEAD', {silent: true}).output.replace('\n', ''); var hash = shell.exec('git rev-parse --short HEAD', {silent: true}).output.replace('\n', '');
return 'build.'+jenkinsBuild+'+sha.'+hash; return 'build.'+jenkinsBuild+'+sha.'+hash;
} }

View file

@ -1,27 +1,20 @@
{ {
"name": "angularjs", "name": "angularjs",
"branchVersion": "1.2.*", "version": "1.2.9",
"cdnVersion": "1.2.11", "cdnVersion": "1.2.8",
"codename": "enchanted-articulacy",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/angular/angular.js.git" "url": "https://github.com/angular/angular.js.git"
}, },
"devDependencies": { "devDependencies": {
"grunt": "~0.4.2", "grunt": "~0.4.1",
"bower": "~1.2.2",
"grunt-bump": "~0.0.13", "grunt-bump": "~0.0.13",
"grunt-contrib-clean": "~0.5.0", "grunt-contrib-clean": "~0.5.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-compress": "~0.5.2", "grunt-contrib-compress": "~0.5.2",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1", "grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.7.2",
"grunt-ddescribe-iit": "~0.0.1",
"grunt-jasmine-node": "git://github.com/vojtajina/grunt-jasmine-node.git#fix-grunt-exit-code",
"grunt-jscs-checker": "~0.3.2",
"grunt-merge-conflict": "~0.0.1",
"grunt-parallel": "~0.3.1",
"grunt-shell": "~0.4.0",
"load-grunt-tasks": "~0.3.0",
"bower": "~1.2.2",
"jasmine-node": "~1.11.0", "jasmine-node": "~1.11.0",
"q": "~0.9.2", "q": "~0.9.2",
"q-io": "~1.10.6", "q-io": "~1.10.6",
@ -36,11 +29,16 @@
"karma-sauce-launcher": "0.2.0", "karma-sauce-launcher": "0.2.0",
"karma-script-launcher": "0.1.0", "karma-script-launcher": "0.1.0",
"karma-browserstack-launcher": "0.0.7", "karma-browserstack-launcher": "0.0.7",
"protractor": "~0.17.0", "protractor": "~0.16.1",
"yaml-js": "~0.0.8", "yaml-js": "~0.0.8",
"marked": "0.2.9", "marked": "0.2.9",
"rewire": "1.1.3", "rewire": "1.1.3",
"grunt-jasmine-node": "git://github.com/vojtajina/grunt-jasmine-node.git#fix-grunt-exit-code",
"grunt-parallel": "~0.3.1",
"grunt-ddescribe-iit": "~0.0.1",
"grunt-merge-conflict": "~0.0.1",
"promises-aplus-tests": "~1.3.2", "promises-aplus-tests": "~1.3.2",
"grunt-shell": "~0.4.0",
"semver": "~2.1.0", "semver": "~2.1.0",
"lodash": "~2.1.0", "lodash": "~2.1.0",
"browserstacktunnel-wrapper": "~1.1.1" "browserstacktunnel-wrapper": "~1.1.1"
@ -51,5 +49,7 @@
"url": "https://github.com/angular/angular.js/blob/master/LICENSE" "url": "https://github.com/angular/angular.js/blob/master/LICENSE"
} }
], ],
"dependencies": {} "dependencies": {
"grunt-contrib-jshint": "~0.7.2"
}
} }

View file

@ -14,17 +14,6 @@ exports.config = {
framework: 'jasmine', framework: 'jasmine',
onPrepare: function() {
// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(function($animate) {
$animate.enabled(false);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
},
jasmineNodeOpts: { jasmineNodeOpts: {
defaultTimeoutInterval: 30000 defaultTimeoutInterval: 30000
} }

View file

@ -0,0 +1,20 @@
#!/bin/bash
echo "############################################"
echo "## Remove "-snapshot" from version ########"
echo "############################################"
ARG_DEFS=()
function run {
cd ../..
replaceJsonProp "package.json" "version" "(.*)-snapshot" "\2"
VERSION=$(readJsonProp "package.json" "version")
git add package.json
git commit -m "chore(release): cut v$VERSION release"
git tag -m "v$VERSION" v$VERSION
}
source $(dirname $0)/../utils.inc

View file

@ -0,0 +1,24 @@
#!/bin/bash
echo "############################################"
echo "## Increment version, add "-snapshot" and set version name ##"
echo "############################################"
ARG_DEFS=(
"--next-version-type=(patch|minor|major)"
"--next-version-name=(.+)"
)
function run {
cd ../..
grunt bump:$NEXT_VERSION_TYPE
NEXT_VERSION=$(readJsonProp "package.json" "version")
replaceJsonProp "package.json" "version" "(.*)" "\2-snapshot"
replaceJsonProp "package.json" "codename" ".*" "$NEXT_VERSION_NAME"
git add package.json
git commit -m "chore(release): start v$NEXT_VERSION ($NEXT_VERSION)"
}
source $(dirname $0)/../utils.inc

42
scripts/angular.js/publish.sh Executable file
View file

@ -0,0 +1,42 @@
#!/bin/bash
# Script for updating angular.js repo from current local build.
echo "#################################"
echo "## Update angular.js ###"
echo "#################################"
ARG_DEFS=(
"--action=(prepare|publish)"
"--next-version-type=(patch|minor|major)"
"--next-version-name=(.+)"
"[--no-test=(true|false)]"
)
function init {
cd ../..
}
function prepare() {
./scripts/angular.js/finalize-version.sh
# Build
if [[ $NO_TEST == "true" ]]; then
npm install --color false
grunt ci-checks package --no-color
else
./jenkins_build.sh
fi
./scripts/angular.js/initialize-new-version.sh --next-version-type=$NEXT_VERSION_TYPE --next-version-name=$NEXT_VERSION_NAME
}
function publish() {
BRANCH=$(git rev-parse --abbrev-ref HEAD)
# push the commits to github
git push origin $BRANCH
# push the release tag
git push origin v`cat build/version.txt`
}
source $(dirname $0)/../utils.inc

View file

@ -1,42 +0,0 @@
#!/bin/bash
# Tags a release
# so that travis can do the actual release.
echo "#################################"
echo "## Tag angular.js for a release #"
echo "#################################"
ARG_DEFS=(
"--action=(prepare|publish)"
"--commit-sha=(.*)"
# the version number of the release.
# e.g. 1.2.12 or 1.2.12-rc.1
"--version-number=([0-9]+\.[0-9]+\.[0-9]+(-[a-z]+\.[0-9]+)?)"
"--version-name=(.+)"
)
function checkVersionNumber() {
BRANCH_PATTERN=$(readJsonProp "package.json" "branchVersion")
if [[ $VERSION_NUMBER != $BRANCH_PATTERN ]]; then
echo "version-number needs to match $BRANCH_PATTERN on this branch"
usage
fi
}
function init {
cd ../..
checkVersionNumber
TAG_NAME="v$VERSION_NUMBER"
}
function prepare() {
git tag "$TAG_NAME" -m "chore(release): $TAG_NAME codename($VERSION_NAME)" "$COMMIT_SHA"
}
function publish() {
# push the tag to github
git push origin $TAG_NAME
}
source $(dirname $0)/../utils.inc

View file

@ -1,63 +1,38 @@
#!/bin/bash #!/bin/bash
# tags the current commit as a release and publishes all artifacts to
# the different repositories.
# Note: This will also works if the commit is in the past!
echo "#################################" echo "#################################"
echo "#### cut release ############" echo "#### Cut release ################"
echo "#################################" echo "#################################"
ARG_DEFS=( ARG_DEFS=(
"--next-version-type=(patch|minor|major)"
"--next-version-name=(.+)"
# require the git dryrun flag so the script can't be run without # require the git dryrun flag so the script can't be run without
# thinking about this! # thinking about this!
"--git-push-dryrun=(true|false)" "--git-push-dryrun=(true|false)"
# The sha to release. Needs to be the same as HEAD. "[--no-test=(true|false)]"
# given as parameter to double check.
"--commit-sha=(.*)"
# the version number of the release.
# e.g. 1.2.12 or 1.2.12-rc.1
"--version-number=([0-9]+\.[0-9]+\.[0-9]+(-[a-z]+\.[0-9]+)?)"
# the codename of the release
"--version-name=(.+)"
) )
function init { function init {
if [[ $(git rev-parse --short HEAD) != $COMMIT_SHA ]]; then NG_ARGS=("$@")
echo "HEAD is not at $COMMIT_SHA"
usage
fi
if [[ ! $VERBOSE ]]; then if [[ ! $VERBOSE ]]; then
VERBOSE=false VERBOSE=false
fi fi
if [[ ! $NO_TEST ]]; then
NO_TEST=false
fi
VERBOSE_ARG="--verbose=$VERBOSE" VERBOSE_ARG="--verbose=$VERBOSE"
} NO_TEST_ARG="--no_test=$NO_TEST"
function build {
cd ../..
npm install --color false
grunt ci-checks package --no-color
cd $SCRIPT_DIR
} }
function phase { function phase {
ACTION_ARG="--action=$1" ACTION_ARG="--action=$1"
../angular.js/tag-release.sh $ACTION_ARG $VERBOSE_ARG\ ../angular.js/publish.sh $ACTION_ARG $VERBOSE_ARG $NO_TEST_ARG \
--version-number=$VERSION_NUMBER --version-name=$VERSION_NAME\ --next-version-type=$NEXT_VERSION_TYPE --next-version-name=$NEXT_VERSION_NAME
--commit-sha=$COMMIT_SHA
if [[ $1 == "prepare" ]]; then
# The build requires the tag to be set already!
build
fi
../code.angularjs.org/publish.sh $ACTION_ARG $VERBOSE_ARG ../code.angularjs.org/publish.sh $ACTION_ARG $VERBOSE_ARG
../bower/publish.sh $ACTION_ARG $VERBOSE_ARG ../bower/publish.sh $ACTION_ARG $VERBOSE_ARG
../angular-seed/publish.sh $ACTION_ARG $VERBOSE_ARG --no-test=true ../angular-seed/publish.sh $ACTION_ARG $VERBOSE_ARG $NO_TEST_ARG
../angular-phonecat/publish.sh $ACTION_ARG $VERBOSE_ARG --no-test=true ../angular-phonecat/publish.sh $ACTION_ARG $VERBOSE_ARG $NO_TEST_ARG
} }
function run { function run {

View file

@ -10,6 +10,7 @@ if [ $JOB = "unit" ]; then
grunt test:promises-aplus grunt test:promises-aplus
grunt test:unit --browsers SL_Chrome,SL_Safari,SL_Firefox,SL_IE_8,SL_IE_9,SL_IE_10,SL_IE_11 --reporters dots grunt test:unit --browsers SL_Chrome,SL_Safari,SL_Firefox,SL_IE_8,SL_IE_9,SL_IE_10,SL_IE_11 --reporters dots
elif [ $JOB = "e2e" ]; then elif [ $JOB = "e2e" ]; then
grunt test:e2e --browsers SL_Chrome --reporters dots
grunt test:protractor --sauceUser $SAUCE_USERNAME \ grunt test:protractor --sauceUser $SAUCE_USERNAME \
--sauceKey $SAUCE_ACCESS_KEY \ --sauceKey $SAUCE_ACCESS_KEY \
--capabilities.tunnel-identifier=$TRAVIS_JOB_NUMBER \ --capabilities.tunnel-identifier=$TRAVIS_JOB_NUMBER \

View file

@ -772,7 +772,7 @@ function shallowCopy(src, dst) {
for(var key in src) { for(var key in src) {
// shallowCopy is only ever called by $compile nodeLinkFn, which has control over src // shallowCopy is only ever called by $compile nodeLinkFn, which has control over src
// so we don't need to worry about using our custom hasOwnProperty here // so we don't need to worry about using our custom hasOwnProperty here
if (src.hasOwnProperty(key) && !(key.charAt(0) === '$' && key.charAt(1) === '$')) { if (src.hasOwnProperty(key) && key.charAt(0) !== '$' && key.charAt(1) !== '$') {
dst[key] = src[key]; dst[key] = src[key];
} }
} }

View file

@ -354,9 +354,11 @@ function annotate(fn) {
* @param {(Object|function())} provider If the provider is: * @param {(Object|function())} provider If the provider is:
* *
* - `Object`: then it should have a `$get` method. The `$get` method will be invoked using * - `Object`: then it should have a `$get` method. The `$get` method will be invoked using
* {@link AUTO.$injector#invoke $injector.invoke()} when an instance needs to be created. * {@link AUTO.$injector#invoke $injector.invoke()} when an instance needs to be
* - `Constructor`: a new instance of the provider will be created using * created.
* {@link AUTO.$injector#instantiate $injector.instantiate()}, then treated as `object`. * - `Constructor`: a new instance of the provider will be created using
* {@link AUTO.$injector#instantiate $injector.instantiate()}, then treated as
* `object`.
* *
* @returns {Object} registered provider instance * @returns {Object} registered provider instance
@ -482,16 +484,17 @@ function annotate(fn) {
* Here is an example of registering a service using * Here is an example of registering a service using
* {@link AUTO.$provide#methods_service $provide.service(class)}. * {@link AUTO.$provide#methods_service $provide.service(class)}.
* <pre> * <pre>
* var Ping = function($http) { * $provide.service('ping', ['$http', function($http) {
* this.$http = $http; * var Ping = function() {
* }; * this.$http = $http;
* * };
* Ping.$inject = ['$http'];
* *
* Ping.prototype.send = function() { * Ping.prototype.send = function() {
* return this.$http.get('/ping'); * return this.$http.get('/ping');
* }; * };
* $provide.service('ping', Ping); *
* return Ping;
* }]);
* </pre> * </pre>
* You would then inject and use this service like this: * You would then inject and use this service like this:
* <pre> * <pre>

View file

@ -175,9 +175,6 @@ function JQLite(element) {
if (element instanceof JQLite) { if (element instanceof JQLite) {
return element; return element;
} }
if (isString(element)) {
element = trim(element);
}
if (!(this instanceof JQLite)) { if (!(this instanceof JQLite)) {
if (isString(element) && element.charAt(0) != '<') { if (isString(element) && element.charAt(0) != '<') {
throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element'); throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');

View file

@ -424,17 +424,13 @@
<div compile="html"></div> <div compile="html"></div>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should auto compile', function() { it('should auto compile', function() {
var textarea = $('textarea'); expect(element('div[compile]').text()).toBe('Hello Angular');
var output = $('div[compile]'); input('html').enter('{{name}}!');
// The initial state reads 'Hello Angular'. expect(element('div[compile]').text()).toBe('Angular!');
expect(output.getText()).toBe('Hello Angular');
textarea.clear();
textarea.sendKeys('{{name}}!');
expect(output.getText()).toBe('Angular!');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
@ -1196,7 +1192,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
hasTranscludeDirective = true; hasTranscludeDirective = true;
// Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion. // Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion.
// This option should only be used by directives that know how to safely handle element transclusion, // This option should only be used by directives that know how to how to safely handle element transclusion,
// where the transcluded nodes are added or replaced after linking. // where the transcluded nodes are added or replaced after linking.
if (!directive.$$tlb) { if (!directive.$$tlb) {
assertNoDuplicate('transclusion', nonTlbTranscludeDirective, directive, $compileNode); assertNoDuplicate('transclusion', nonTlbTranscludeDirective, directive, $compileNode);
@ -1711,13 +1707,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
linkNode = $compileNode[0]; linkNode = $compileNode[0];
if (beforeTemplateLinkNode !== beforeTemplateCompileNode) { if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
var oldClasses = beforeTemplateLinkNode.className;
// it was cloned therefore we have to clone as well. // it was cloned therefore we have to clone as well.
linkNode = jqLiteClone(compileNode); linkNode = jqLiteClone(compileNode);
replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode); replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);
// Copy in CSS classes from original node
safeAddClass(jqLite(linkNode), oldClasses);
} }
if (afterTemplateNodeLinkFn.transclude) { if (afterTemplateNodeLinkFn.transclude) {
childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude); childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude);

View file

@ -32,14 +32,11 @@ var htmlAnchorDirective = valueFn({
element.append(document.createComment('IE fix')); element.append(document.createComment('IE fix'));
} }
if (!attr.href && !attr.xlinkHref && !attr.name) { if (!attr.href && !attr.name) {
return function(scope, element) { return function(scope, element) {
// SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ?
'xlink:href' : 'href';
element.on('click', function(event){ element.on('click', function(event){
// if we have no href url, then don't navigate anywhere. // if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) { if (!element.attr('href')) {
event.preventDefault(); event.preventDefault();
} }
}); });

View file

@ -41,48 +41,46 @@
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br /> <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) <a id="link-6" ng-href="{{value}}">link</a> (link, change location)
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should execute ng-click but not reload when href without value', function() { it('should execute ng-click but not reload when href without value', function() {
element(by.id('link-1')).click(); element('#link-1').click();
expect(element(by.model('value')).getAttribute('value')).toEqual('1'); expect(input('value').val()).toEqual('1');
expect(element(by.id('link-1')).getAttribute('href')).toBe(''); expect(element('#link-1').attr('href')).toBe("");
}); });
it('should execute ng-click but not reload when href empty string', function() { it('should execute ng-click but not reload when href empty string', function() {
element(by.id('link-2')).click(); element('#link-2').click();
expect(element(by.model('value')).getAttribute('value')).toEqual('2'); expect(input('value').val()).toEqual('2');
expect(element(by.id('link-2')).getAttribute('href')).toBe(''); expect(element('#link-2').attr('href')).toBe("");
}); });
it('should execute ng-click and change url when ng-href specified', function() { it('should execute ng-click and change url when ng-href specified', function() {
expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/); expect(element('#link-3').attr('href')).toBe("/123");
element(by.id('link-3')).click(); element('#link-3').click();
expect(browser().window().path()).toEqual('/123');
expect(browser.driver.getCurrentUrl()).toMatch(/\/123$/);
}); });
it('should execute ng-click but not reload when href empty string and name specified', function() { it('should execute ng-click but not reload when href empty string and name specified', function() {
element(by.id('link-4')).click(); element('#link-4').click();
expect(element(by.model('value')).getAttribute('value')).toEqual('4'); expect(input('value').val()).toEqual('4');
expect(element(by.id('link-4')).getAttribute('href')).toBe(''); expect(element('#link-4').attr('href')).toBe('');
}); });
it('should execute ng-click but not reload when no href but name specified', function() { it('should execute ng-click but not reload when no href but name specified', function() {
element(by.id('link-5')).click(); element('#link-5').click();
expect(element(by.model('value')).getAttribute('value')).toEqual('5'); expect(input('value').val()).toEqual('5');
expect(element(by.id('link-5')).getAttribute('href')).toBe(null); expect(element('#link-5').attr('href')).toBe(undefined);
}); });
it('should only change url when only ng-href', function() { it('should only change url when only ng-href', function() {
element(by.model('value')).clear(); input('value').enter('6');
element(by.model('value')).sendKeys('6'); expect(element('#link-6').attr('href')).toBe('6');
expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
element(by.id('link-6')).click(); element('#link-6').click();
expect(browser.getCurrentUrl()).toMatch(/\/6$/); expect(browser().location().url()).toEqual('/6');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
@ -167,13 +165,13 @@
Click me to toggle: <input type="checkbox" ng-model="checked"><br/> Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button> <button ng-model="button" ng-disabled="checked">Button</button>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should toggle button', function() { it('should toggle button', function() {
expect(element(by.css('.doc-example-live button')).getAttribute('disabled')).toBeFalsy(); expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
element(by.model('checked')).click(); input('checked').check();
expect(element(by.css('.doc-example-live button')).getAttribute('disabled')).toBeTruthy(); expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
* @element INPUT * @element INPUT
@ -202,13 +200,13 @@
Check me to check both: <input type="checkbox" ng-model="master"><br/> Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master"> <input id="checkSlave" type="checkbox" ng-checked="master">
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check both checkBoxes', function() { it('should check both checkBoxes', function() {
expect(element(by.id('checkSlave')).getAttribute('checked')).toBeFalsy(); expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy();
element(by.model('master')).click(); input('master').check();
expect(element(by.id('checkSlave')).getAttribute('checked')).toBeTruthy(); expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
* @element INPUT * @element INPUT
@ -237,13 +235,13 @@
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/> Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/> <input type="text" ng-readonly="checked" value="I'm Angular"/>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should toggle readonly attr', function() { it('should toggle readonly attr', function() {
expect(element(by.css('.doc-example-live [type="text"]')).getAttribute('readonly')).toBeFalsy(); expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
element(by.model('checked')).click(); input('checked').check();
expect(element(by.css('.doc-example-live [type="text"]')).getAttribute('readonly')).toBeTruthy(); expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
* @element INPUT * @element INPUT
@ -276,13 +274,13 @@
<option id="greet" ng-selected="selected">Greetings!</option> <option id="greet" ng-selected="selected">Greetings!</option>
</select> </select>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should select Greetings!', function() { it('should select Greetings!', function() {
expect(element(by.id('greet')).getAttribute('selected')).toBeFalsy(); expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy();
element(by.model('selected')).click(); input('selected').check();
expect(element(by.id('greet')).getAttribute('selected')).toBeTruthy(); expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
* @element OPTION * @element OPTION
@ -312,13 +310,13 @@
<summary>Show/Hide me</summary> <summary>Show/Hide me</summary>
</details> </details>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should toggle open', function() { it('should toggle open', function() {
expect(element(by.id('details')).getAttribute('open')).toBeFalsy(); expect(element('#details').prop('open')).toBeFalsy();
element(by.model('open')).click(); input('open').check();
expect(element(by.id('details')).getAttribute('open')).toBeTruthy(); expect(element('#details').prop('open')).toBeTruthy();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
* @element DETAILS * @element DETAILS

View file

@ -305,27 +305,18 @@ function FormController(element, attrs) {
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should initialize to model', function() { it('should initialize to model', function() {
var userType = element(by.binding('userType')); expect(binding('userType')).toEqual('guest');
var valid = element(by.binding('myForm.input.$valid')); expect(binding('myForm.input.$valid')).toEqual('true');
expect(userType.getText()).toContain('guest');
expect(valid.getText()).toContain('true');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
var userType = element(by.binding('userType')); input('userType').enter('');
var valid = element(by.binding('myForm.input.$valid')); expect(binding('userType')).toEqual('');
var userInput = element(by.model('userType')); expect(binding('myForm.input.$valid')).toEqual('false');
userInput.clear();
userInput.sendKeys('');
expect(userType.getText()).toEqual('userType =');
expect(valid.getText()).toContain('false');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var formDirectiveFactory = function(isNgForm) { var formDirectiveFactory = function(isNgForm) {

View file

@ -9,7 +9,7 @@
*/ */
var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/; var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i; var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/;
var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/; var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
var inputType = { var inputType = {
@ -62,31 +62,29 @@ var inputType = {
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('text'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(text.getText()).toContain('guest'); expect(binding('text')).toEqual('guest');
expect(valid.getText()).toContain('true'); expect(binding('myForm.input.$valid')).toEqual('true');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
input.clear(); input('text').enter('');
input.sendKeys(''); expect(binding('text')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
expect(text.getText()).toEqual('text =');
expect(valid.getText()).toContain('false');
}); });
it('should be invalid if multi word', function() { it('should be invalid if multi word', function() {
input.clear(); input('text').enter('hello world');
input.sendKeys('hello world'); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
</doc:protractor>
it('should not be trimmed', function() {
input('text').enter('untrimmed ');
expect(binding('text')).toEqual('untrimmed ');
expect(binding('myForm.input.$valid')).toEqual('true');
});
</doc:scenario>
</doc:example> </doc:example>
*/ */
'text': textInputType, 'text': textInputType,
@ -140,30 +138,24 @@ var inputType = {
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var value = element(by.binding('value'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('value'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(value.getText()).toContain('12'); expect(binding('value')).toEqual('12');
expect(valid.getText()).toContain('true'); expect(binding('myForm.input.$valid')).toEqual('true');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
input.clear(); input('value').enter('');
input.sendKeys(''); expect(binding('value')).toEqual('');
expect(value.getText()).toEqual('value ='); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
it('should be invalid if over max', function() { it('should be invalid if over max', function() {
input.clear(); input('value').enter('123');
input.sendKeys('123'); expect(binding('value')).toEqual('');
expect(value.getText()).toEqual('value ='); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
'number': numberInputType, 'number': numberInputType,
@ -215,31 +207,23 @@ var inputType = {
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/> <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('text'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(text.getText()).toContain('http://google.com'); expect(binding('text')).toEqual('http://google.com');
expect(valid.getText()).toContain('true'); expect(binding('myForm.input.$valid')).toEqual('true');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
input.clear(); input('text').enter('');
input.sendKeys(''); expect(binding('text')).toEqual('');
expect(binding('myForm.input.$valid')).toEqual('false');
expect(text.getText()).toEqual('text =');
expect(valid.getText()).toContain('false');
}); });
it('should be invalid if not url', function() { it('should be invalid if not url', function() {
input.clear(); input('text').enter('xxx');
input.sendKeys('box'); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
'url': urlInputType, 'url': urlInputType,
@ -291,30 +275,23 @@ var inputType = {
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/> <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('text'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(text.getText()).toContain('me@example.com'); expect(binding('text')).toEqual('me@example.com');
expect(valid.getText()).toContain('true'); expect(binding('myForm.input.$valid')).toEqual('true');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
input.clear(); input('text').enter('');
input.sendKeys(''); expect(binding('text')).toEqual('');
expect(text.getText()).toEqual('text ='); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
it('should be invalid if not email', function() { it('should be invalid if not email', function() {
input.clear(); input('text').enter('xxx');
input.sendKeys('xxx'); expect(binding('myForm.input.$valid')).toEqual('false');
expect(valid.getText()).toContain('false');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
'email': emailInputType, 'email': emailInputType,
@ -332,8 +309,6 @@ var inputType = {
* @param {string=} name Property name of the form under which the control is published. * @param {string=} name Property name of the form under which the control is published.
* @param {string=} ngChange Angular expression to be executed when input changes due to user * @param {string=} ngChange Angular expression to be executed when input changes due to user
* interaction with the input element. * interaction with the input element.
* @param {string} ngValue Angular expression which sets the value to which the expression should
* be set when selected.
* *
* @example * @example
<doc:example> <doc:example>
@ -341,31 +316,23 @@ var inputType = {
<script> <script>
function Ctrl($scope) { function Ctrl($scope) {
$scope.color = 'blue'; $scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
} }
</script> </script>
<form name="myForm" ng-controller="Ctrl"> <form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/> <input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/> <input type="radio" ng-model="color" value="green"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/> <input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/> <tt>color = {{color}}</tt><br/>
</form> </form>
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should change state', function() { it('should change state', function() {
var color = element(by.binding('color')); expect(binding('color')).toEqual('blue');
expect(color.getText()).toContain('blue'); input('color').select('red');
expect(binding('color')).toEqual('red');
element.all(by.model('color')).get(0).click();
expect(color.getText()).toContain('red');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
'radio': radioInputType, 'radio': radioInputType,
@ -402,21 +369,17 @@ var inputType = {
<tt>value2 = {{value2}}</tt><br/> <tt>value2 = {{value2}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should change state', function() { it('should change state', function() {
var value1 = element(by.binding('value1')); expect(binding('value1')).toEqual('true');
var value2 = element(by.binding('value2')); expect(binding('value2')).toEqual('YES');
expect(value1.getText()).toContain('true'); input('value1').check();
expect(value2.getText()).toContain('YES'); input('value2').check();
expect(binding('value1')).toEqual('false');
element(by.model('value1')).click(); expect(binding('value2')).toEqual('NO');
element(by.model('value2')).click();
expect(value1.getText()).toContain('false');
expect(value2.getText()).toContain('NO');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
'checkbox': checkboxInputType, 'checkbox': checkboxInputType,
@ -769,59 +732,44 @@ function checkboxInputType(scope, element, attr, ctrl) {
<tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br> <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var user = element(by.binding('{{user}}'));
var userNameValid = element(by.binding('myForm.userName.$valid'));
var lastNameValid = element(by.binding('myForm.lastName.$valid'));
var lastNameError = element(by.binding('myForm.lastName.$error'));
var formValid = element(by.binding('myForm.$valid'));
var userNameInput = element(by.model('user.name'));
var userLastInput = element(by.model('user.last'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(user.getText()).toContain('{"name":"guest","last":"visitor"}'); expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}');
expect(userNameValid.getText()).toContain('true'); expect(binding('myForm.userName.$valid')).toEqual('true');
expect(formValid.getText()).toContain('true'); expect(binding('myForm.$valid')).toEqual('true');
}); });
it('should be invalid if empty when required', function() { it('should be invalid if empty when required', function() {
userNameInput.clear(); input('user.name').enter('');
userNameInput.sendKeys(''); expect(binding('user')).toEqual('{"last":"visitor"}');
expect(binding('myForm.userName.$valid')).toEqual('false');
expect(user.getText()).toContain('{"last":"visitor"}'); expect(binding('myForm.$valid')).toEqual('false');
expect(userNameValid.getText()).toContain('false');
expect(formValid.getText()).toContain('false');
}); });
it('should be valid if empty when min length is set', function() { it('should be valid if empty when min length is set', function() {
userLastInput.clear(); input('user.last').enter('');
userLastInput.sendKeys(''); expect(binding('user')).toEqual('{"name":"guest","last":""}');
expect(binding('myForm.lastName.$valid')).toEqual('true');
expect(user.getText()).toContain('{"name":"guest","last":""}'); expect(binding('myForm.$valid')).toEqual('true');
expect(lastNameValid.getText()).toContain('true');
expect(formValid.getText()).toContain('true');
}); });
it('should be invalid if less than required min length', function() { it('should be invalid if less than required min length', function() {
userLastInput.clear(); input('user.last').enter('xx');
userLastInput.sendKeys('xx'); expect(binding('user')).toEqual('{"name":"guest"}');
expect(binding('myForm.lastName.$valid')).toEqual('false');
expect(user.getText()).toContain('{"name":"guest"}'); expect(binding('myForm.lastName.$error')).toMatch(/minlength/);
expect(lastNameValid.getText()).toContain('false'); expect(binding('myForm.$valid')).toEqual('false');
expect(lastNameError.getText()).toContain('minlength');
expect(formValid.getText()).toContain('false');
}); });
it('should be invalid if longer than max length', function() { it('should be invalid if longer than max length', function() {
userLastInput.clear(); input('user.last').enter('some ridiculously long name');
userLastInput.sendKeys('some ridiculously long name'); expect(binding('user'))
.toEqual('{"name":"guest"}');
expect(user.getText()).toContain('{"name":"guest"}'); expect(binding('myForm.lastName.$valid')).toEqual('false');
expect(lastNameValid.getText()).toContain('false'); expect(binding('myForm.lastName.$error')).toMatch(/maxlength/);
expect(lastNameError.getText()).toContain('maxlength'); expect(binding('myForm.$valid')).toEqual('false');
expect(formValid.getText()).toContain('false');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) { var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) {
@ -953,17 +901,14 @@ var VALID_CLASS = 'ng-valid',
<textarea ng-model="userContent"></textarea> <textarea ng-model="userContent"></textarea>
</form> </form>
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should data-bind and become invalid', function() { it('should data-bind and become invalid', function() {
var contentEditable = element(by.css('.doc-example-live [contenteditable]')); var contentEditable = element('[contenteditable]');
expect(contentEditable.getText()).toEqual('Change me!'); expect(contentEditable.text()).toEqual('Change me!');
input('userContent').enter('');
contentEditable.clear(); expect(contentEditable.text()).toEqual('');
contentEditable.sendKeys(protractor.Key.BACK_SPACE); expect(contentEditable.prop('className')).toMatch(/ng-invalid-required/);
expect(contentEditable.getText()).toEqual('');
expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/);
}); });
</file> </file>
* </example> * </example>
@ -1243,10 +1188,7 @@ var ngModelDirective = function() {
* @name ng.directive:ngChange * @name ng.directive:ngChange
* *
* @description * @description
* Evaluate the given expression when the user changes the input. * Evaluate given expression when user changes the input.
* The expression is evaluated immediately, unlike the JavaScript onchange event
* which only triggers at the end of a change (usually, when the user leaves the
* form element or presses the return key).
* The expression is not evaluated when the value change is coming from the model. * The expression is not evaluated when the value change is coming from the model.
* *
* Note, this directive requires `ngModel` to be present. * Note, this directive requires `ngModel` to be present.
@ -1270,30 +1212,24 @@ var ngModelDirective = function() {
* <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" /> * <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
* <input type="checkbox" ng-model="confirmed" id="ng-change-example2" /> * <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
* <label for="ng-change-example2">Confirmed</label><br /> * <label for="ng-change-example2">Confirmed</label><br />
* <tt>debug = {{confirmed}}</tt><br/> * debug = {{confirmed}}<br />
* <tt>counter = {{counter}}</tt><br/> * counter = {{counter}}
* </div> * </div>
* </doc:source> * </doc:source>
* <doc:protractor> * <doc:scenario>
* var counter = element(by.binding('counter'));
* var debug = element(by.binding('confirmed'));
*
* it('should evaluate the expression if changing from view', function() { * it('should evaluate the expression if changing from view', function() {
* expect(counter.getText()).toContain('0'); * expect(binding('counter')).toEqual('0');
* * element('#ng-change-example1').click();
* element(by.id('ng-change-example1')).click(); * expect(binding('counter')).toEqual('1');
* * expect(binding('confirmed')).toEqual('true');
* expect(counter.getText()).toContain('1');
* expect(debug.getText()).toContain('true');
* }); * });
* *
* it('should not evaluate the expression if changing from model', function() { * it('should not evaluate the expression if changing from model', function() {
* element(by.id('ng-change-example2')).click(); * element('#ng-change-example2').click();
* expect(binding('counter')).toEqual('0');
* expect(counter.getText()).toContain('0'); * expect(binding('confirmed')).toEqual('true');
* expect(debug.getText()).toContain('true');
* }); * });
* </doc:protractor> * </doc:scenario>
* </doc:example> * </doc:example>
*/ */
var ngChangeDirective = valueFn({ var ngChangeDirective = valueFn({
@ -1366,26 +1302,20 @@ var requiredDirective = function() {
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var listInput = element(by.model('names'));
var names = element(by.binding('{{names}}'));
var valid = element(by.binding('myForm.namesInput.$valid'));
var error = element(by.css('span.error'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(names.getText()).toContain('["igor","misko","vojta"]'); expect(binding('names')).toEqual('["igor","misko","vojta"]');
expect(valid.getText()).toContain('true'); expect(binding('myForm.namesInput.$valid')).toEqual('true');
expect(error.getCssValue('display')).toBe('none'); expect(element('span.error').css('display')).toBe('none');
}); });
it('should be invalid if empty', function() { it('should be invalid if empty', function() {
listInput.clear(); input('names').enter('');
listInput.sendKeys(''); expect(binding('names')).toEqual('');
expect(binding('myForm.namesInput.$valid')).toEqual('false');
expect(names.getText()).toContain(''); expect(element('span.error').css('display')).not().toBe('none');
expect(valid.getText()).toContain('false'); });
expect(error.getCssValue('display')).not.toBe('none'); }); </doc:scenario>
</doc:protractor>
</doc:example> </doc:example>
*/ */
var ngListDirective = function() { var ngListDirective = function() {
@ -1467,17 +1397,15 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
<div>You chose {{my.favorite}}</div> <div>You chose {{my.favorite}}</div>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var favorite = element(by.binding('my.favorite'));
it('should initialize to model', function() { it('should initialize to model', function() {
expect(favorite.getText()).toContain('unicorns'); expect(binding('my.favorite')).toEqual('unicorns');
}); });
it('should bind the values to the inputs', function() { it('should bind the values to the inputs', function() {
element.all(by.model('my.favorite')).get(0).click(); input('my.favorite').select('pizza');
expect(favorite.getText()).toContain('pizza'); expect(binding('my.favorite')).toEqual('pizza');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngValueDirective = function() { var ngValueDirective = function() {

View file

@ -38,17 +38,13 @@
Hello <span ng-bind="name"></span>! Hello <span ng-bind="name"></span>!
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check ng-bind', function() { it('should check ng-bind', function() {
var exampleContainer = $('.doc-example-live'); expect(using('.doc-example-live').binding('name')).toBe('Whirled');
var nameInput = element(by.model('name')); using('.doc-example-live').input('name').enter('world');
expect(using('.doc-example-live').binding('name')).toBe('world');
expect(exampleContainer.findElement(by.binding('name')).getText()).toBe('Whirled');
nameInput.clear();
nameInput.sendKeys('world');
expect(exampleContainer.findElement(by.binding('name')).getText()).toBe('world');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngBindDirective = ngDirective(function(scope, element, attr) { var ngBindDirective = ngDirective(function(scope, element, attr) {
@ -94,22 +90,20 @@ var ngBindDirective = ngDirective(function(scope, element, attr) {
<pre ng-bind-template="{{salutation}} {{name}}!"></pre> <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check ng-bind', function() { it('should check ng-bind', function() {
var salutationElem = element(by.binding('salutation')); expect(using('.doc-example-live').binding('salutation')).
var salutationInput = element(by.model('salutation')); toBe('Hello');
var nameInput = element(by.model('name')); expect(using('.doc-example-live').binding('name')).
toBe('World');
expect(salutationElem.getText()).toBe('Hello World!'); using('.doc-example-live').input('salutation').enter('Greetings');
using('.doc-example-live').input('name').enter('user');
salutationInput.clear(); expect(using('.doc-example-live').binding('salutation')).
salutationInput.sendKeys('Greetings'); toBe('Greetings');
nameInput.clear(); expect(using('.doc-example-live').binding('name')).
nameInput.sendKeys('user'); toBe('user');
expect(salutationElem.getText()).toBe('Greetings user!');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngBindTemplateDirective = ['$interpolate', function($interpolate) { var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
@ -162,10 +156,12 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
}]); }]);
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should check ng-bind-html', function() { it('should check ng-bind-html', function() {
expect(element(by.binding('myHTML')).getText()).toBe( expect(using('.doc-example-live').binding('myHTML')).
'I am an HTMLstring with links! and other stuff'); toBe(
'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>'
);
}); });
</file> </file>
</example> </example>

View file

@ -114,34 +114,31 @@ function classDirective(name, selector) {
color: red; color: red;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var ps = element.all(by.css('.doc-example-live p'));
it('should let you toggle the class', function() { it('should let you toggle the class', function() {
expect(ps.first().getAttribute('class')).not.toMatch(/bold/); expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/bold/);
expect(ps.first().getAttribute('class')).not.toMatch(/red/); expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/red/);
element(by.model('important')).click(); input('important').check();
expect(ps.first().getAttribute('class')).toMatch(/bold/); expect(element('.doc-example-live p:first').prop('className')).toMatch(/bold/);
element(by.model('error')).click(); input('error').check();
expect(ps.first().getAttribute('class')).toMatch(/red/); expect(element('.doc-example-live p:first').prop('className')).toMatch(/red/);
}); });
it('should let you toggle string example', function() { it('should let you toggle string example', function() {
expect(ps.get(1).getAttribute('class')).toBe(''); expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('');
element(by.model('style')).clear(); input('style').enter('red');
element(by.model('style')).sendKeys('red'); expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('red');
expect(ps.get(1).getAttribute('class')).toBe('red');
}); });
it('array example should have 3 classes', function() { it('array example should have 3 classes', function() {
expect(ps.last().getAttribute('class')).toBe(''); expect(element('.doc-example-live p:last').prop('className')).toBe('');
element(by.model('style1')).sendKeys('bold'); input('style1').enter('bold');
element(by.model('style2')).sendKeys('strike'); input('style2').enter('strike');
element(by.model('style3')).sendKeys('red'); input('style3').enter('red');
expect(ps.last().getAttribute('class')).toBe('bold strike red'); expect(element('.doc-example-live p:last').prop('className')).toBe('bold strike red');
}); });
</file> </file>
</example> </example>
@ -152,8 +149,8 @@ function classDirective(name, selector) {
<example animations="true"> <example animations="true">
<file name="index.html"> <file name="index.html">
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> <input type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> <input type="button" value="clear" ng-click="myVar=''">
<br> <br>
<span class="base-class" ng-class="myVar">Sample Text</span> <span class="base-class" ng-class="myVar">Sample Text</span>
</file> </file>
@ -168,19 +165,19 @@ function classDirective(name, selector) {
font-size:3em; font-size:3em;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should check ng-class', function() { it('should check ng-class', function() {
expect(element(by.css('.base-class')).getAttribute('class')).not. expect(element('.doc-example-live span').prop('className')).not().
toMatch(/my-class/); toMatch(/my-class/);
element(by.id('setbtn')).click(); using('.doc-example-live').element(':button:first').click();
expect(element(by.css('.base-class')).getAttribute('class')). expect(element('.doc-example-live span').prop('className')).
toMatch(/my-class/); toMatch(/my-class/);
element(by.id('clearbtn')).click(); using('.doc-example-live').element(':button:last').click();
expect(element(by.css('.base-class')).getAttribute('class')).not. expect(element('.doc-example-live span').prop('className')).not().
toMatch(/my-class/); toMatch(/my-class/);
}); });
</file> </file>
@ -232,11 +229,11 @@ var ngClassDirective = classDirective('', true);
color: blue; color: blue;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should check ng-class-odd and ng-class-even', function() { it('should check ng-class-odd and ng-class-even', function() {
expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')). expect(element('.doc-example-live li:first span').prop('className')).
toMatch(/odd/); toMatch(/odd/);
expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')). expect(element('.doc-example-live li:last span').prop('className')).
toMatch(/even/); toMatch(/even/);
}); });
</file> </file>
@ -280,11 +277,11 @@ var ngClassOddDirective = classDirective('Odd', 0);
color: blue; color: blue;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should check ng-class-odd and ng-class-even', function() { it('should check ng-class-odd and ng-class-even', function() {
expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')). expect(element('.doc-example-live li:first span').prop('className')).
toMatch(/odd/); toMatch(/odd/);
expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')). expect(element('.doc-example-live li:last span').prop('className')).
toMatch(/even/); toMatch(/even/);
}); });
</file> </file>

View file

@ -45,14 +45,14 @@
<div id="template1" ng-cloak>{{ 'hello' }}</div> <div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div> <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should remove the template directive and css class', function() { it('should remove the template directive and css class', function() {
expect($('.doc-example-live #template1').getAttribute('ng-cloak')). expect(element('.doc-example-live #template1').attr('ng-cloak')).
toBeNull(); not().toBeDefined();
expect($('.doc-example-live #template2').getAttribute('ng-cloak')). expect(element('.doc-example-live #template2').attr('ng-cloak')).
toBeNull(); not().toBeDefined();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
*/ */

View file

@ -82,36 +82,22 @@
</ul> </ul>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check controller as', function() { it('should check controller as', function() {
var container = element(by.id('ctrl-as-exmpl')); expect(element('#ctrl-as-exmpl>:input').val()).toBe('John Smith');
expect(element('#ctrl-as-exmpl li:nth-child(1) input').val())
.toBe('408 555 1212');
expect(element('#ctrl-as-exmpl li:nth-child(2) input').val())
.toBe('john.smith@example.org');
expect(container.findElement(by.model('settings.name')) element('#ctrl-as-exmpl li:first a:contains("clear")').click();
.getAttribute('value')).toBe('John Smith'); expect(element('#ctrl-as-exmpl li:first input').val()).toBe('');
var firstRepeat = element('#ctrl-as-exmpl li:last a:contains("add")').click();
container.findElement(by.repeater('contact in settings.contacts').row(0)); expect(element('#ctrl-as-exmpl li:nth-child(3) input').val())
var secondRepeat = .toBe('yourname@example.org');
container.findElement(by.repeater('contact in settings.contacts').row(1));
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('408 555 1212');
expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('john.smith@example.org');
firstRepeat.findElement(by.linkText('clear')).click()
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('');
container.findElement(by.linkText('add')).click();
expect(container.findElement(by.repeater('contact in settings.contacts').row(2))
.findElement(by.model('contact.value'))
.getAttribute('value'))
.toBe('yourname@example.org');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
<doc:example> <doc:example>
<doc:source> <doc:source>
@ -159,36 +145,22 @@
</ul> </ul>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check controller', function() { it('should check controller', function() {
var container = element(by.id('ctrl-exmpl')); expect(element('#ctrl-exmpl>:input').val()).toBe('John Smith');
expect(element('#ctrl-exmpl li:nth-child(1) input').val())
.toBe('408 555 1212');
expect(element('#ctrl-exmpl li:nth-child(2) input').val())
.toBe('john.smith@example.org');
expect(container.findElement(by.model('name')) element('#ctrl-exmpl li:first a:contains("clear")').click();
.getAttribute('value')).toBe('John Smith'); expect(element('#ctrl-exmpl li:first input').val()).toBe('');
var firstRepeat = element('#ctrl-exmpl li:last a:contains("add")').click();
container.findElement(by.repeater('contact in contacts').row(0)); expect(element('#ctrl-exmpl li:nth-child(3) input').val())
var secondRepeat = .toBe('yourname@example.org');
container.findElement(by.repeater('contact in contacts').row(1));
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('408 555 1212');
expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('john.smith@example.org');
firstRepeat.findElement(by.linkText('clear')).click()
expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value'))
.toBe('');
container.findElement(by.linkText('add')).click();
expect(container.findElement(by.repeater('contact in contacts').row(2))
.findElement(by.model('contact.value'))
.getAttribute('value'))
.toBe('yourname@example.org');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */

View file

@ -9,7 +9,6 @@
* an element is clicked. * an element is clicked.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngClick {@link guide/expression Expression} to evaluate upon * @param {expression} ngClick {@link guide/expression Expression} to evaluate upon
* click. (Event object is available as `$event`) * click. (Event object is available as `$event`)
* *
@ -66,7 +65,6 @@ forEach(
* The `ngDblclick` directive allows you to specify custom behavior on a dblclick event. * The `ngDblclick` directive allows you to specify custom behavior on a dblclick event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngDblclick {@link guide/expression Expression} to evaluate upon * @param {expression} ngDblclick {@link guide/expression Expression} to evaluate upon
* a dblclick. (The Event object is available as `$event`) * a dblclick. (The Event object is available as `$event`)
* *
@ -90,7 +88,6 @@ forEach(
* The ngMousedown directive allows you to specify custom behavior on mousedown event. * The ngMousedown directive allows you to specify custom behavior on mousedown event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMousedown {@link guide/expression Expression} to evaluate upon * @param {expression} ngMousedown {@link guide/expression Expression} to evaluate upon
* mousedown. (Event object is available as `$event`) * mousedown. (Event object is available as `$event`)
* *
@ -114,7 +111,6 @@ forEach(
* Specify custom behavior on mouseup event. * Specify custom behavior on mouseup event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMouseup {@link guide/expression Expression} to evaluate upon * @param {expression} ngMouseup {@link guide/expression Expression} to evaluate upon
* mouseup. (Event object is available as `$event`) * mouseup. (Event object is available as `$event`)
* *
@ -137,7 +133,6 @@ forEach(
* Specify custom behavior on mouseover event. * Specify custom behavior on mouseover event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMouseover {@link guide/expression Expression} to evaluate upon * @param {expression} ngMouseover {@link guide/expression Expression} to evaluate upon
* mouseover. (Event object is available as `$event`) * mouseover. (Event object is available as `$event`)
* *
@ -161,7 +156,6 @@ forEach(
* Specify custom behavior on mouseenter event. * Specify custom behavior on mouseenter event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMouseenter {@link guide/expression Expression} to evaluate upon * @param {expression} ngMouseenter {@link guide/expression Expression} to evaluate upon
* mouseenter. (Event object is available as `$event`) * mouseenter. (Event object is available as `$event`)
* *
@ -185,7 +179,6 @@ forEach(
* Specify custom behavior on mouseleave event. * Specify custom behavior on mouseleave event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMouseleave {@link guide/expression Expression} to evaluate upon * @param {expression} ngMouseleave {@link guide/expression Expression} to evaluate upon
* mouseleave. (Event object is available as `$event`) * mouseleave. (Event object is available as `$event`)
* *
@ -209,7 +202,6 @@ forEach(
* Specify custom behavior on mousemove event. * Specify custom behavior on mousemove event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngMousemove {@link guide/expression Expression} to evaluate upon * @param {expression} ngMousemove {@link guide/expression Expression} to evaluate upon
* mousemove. (Event object is available as `$event`) * mousemove. (Event object is available as `$event`)
* *
@ -233,7 +225,6 @@ forEach(
* Specify custom behavior on keydown event. * Specify custom behavior on keydown event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngKeydown {@link guide/expression Expression} to evaluate upon * @param {expression} ngKeydown {@link guide/expression Expression} to evaluate upon
* keydown. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.) * keydown. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.)
* *
@ -255,7 +246,6 @@ forEach(
* Specify custom behavior on keyup event. * Specify custom behavior on keyup event.
* *
* @element ANY * @element ANY
* @priority 0
* @param {expression} ngKeyup {@link guide/expression Expression} to evaluate upon * @param {expression} ngKeyup {@link guide/expression Expression} to evaluate upon
* keyup. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.) * keyup. (Event object is available as `$event` and can be interrogated for keyCode, altKey, etc.)
* *
@ -302,7 +292,6 @@ forEach(
* attribute**. * attribute**.
* *
* @element form * @element form
* @priority 0
* @param {expression} ngSubmit {@link guide/expression Expression} to eval. (Event object is available as `$event`) * @param {expression} ngSubmit {@link guide/expression Expression} to eval. (Event object is available as `$event`)
* *
* @example * @example
@ -327,20 +316,20 @@ forEach(
<pre>list={{list}}</pre> <pre>list={{list}}</pre>
</form> </form>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check ng-submit', function() { it('should check ng-submit', function() {
expect(element(by.binding('list')).getText()).toBe('list=[]'); expect(binding('list')).toBe('[]');
element(by.css('.doc-example-live #submit')).click(); element('.doc-example-live #submit').click();
expect(element(by.binding('list')).getText()).toContain('hello'); expect(binding('list')).toBe('["hello"]');
expect(element(by.input('text')).getAttribute('value')).toBe(''); expect(input('text').val()).toBe('');
}); });
it('should ignore empty strings', function() { it('should ignore empty strings', function() {
expect(element(by.binding('list')).getText()).toBe('list=[]'); expect(binding('list')).toBe('[]');
element(by.css('.doc-example-live #submit')).click(); element('.doc-example-live #submit').click();
element(by.css('.doc-example-live #submit')).click(); element('.doc-example-live #submit').click();
expect(element(by.binding('list')).getText()).toContain('hello'); expect(binding('list')).toBe('["hello"]');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
@ -352,7 +341,6 @@ forEach(
* Specify custom behavior on focus event. * Specify custom behavior on focus event.
* *
* @element window, input, select, textarea, a * @element window, input, select, textarea, a
* @priority 0
* @param {expression} ngFocus {@link guide/expression Expression} to evaluate upon * @param {expression} ngFocus {@link guide/expression Expression} to evaluate upon
* focus. (Event object is available as `$event`) * focus. (Event object is available as `$event`)
* *
@ -368,7 +356,6 @@ forEach(
* Specify custom behavior on blur event. * Specify custom behavior on blur event.
* *
* @element window, input, select, textarea, a * @element window, input, select, textarea, a
* @priority 0
* @param {expression} ngBlur {@link guide/expression Expression} to evaluate upon * @param {expression} ngBlur {@link guide/expression Expression} to evaluate upon
* blur. (Event object is available as `$event`) * blur. (Event object is available as `$event`)
* *
@ -384,7 +371,6 @@ forEach(
* Specify custom behavior on copy event. * Specify custom behavior on copy event.
* *
* @element window, input, select, textarea, a * @element window, input, select, textarea, a
* @priority 0
* @param {expression} ngCopy {@link guide/expression Expression} to evaluate upon * @param {expression} ngCopy {@link guide/expression Expression} to evaluate upon
* copy. (Event object is available as `$event`) * copy. (Event object is available as `$event`)
* *
@ -405,7 +391,6 @@ forEach(
* Specify custom behavior on cut event. * Specify custom behavior on cut event.
* *
* @element window, input, select, textarea, a * @element window, input, select, textarea, a
* @priority 0
* @param {expression} ngCut {@link guide/expression Expression} to evaluate upon * @param {expression} ngCut {@link guide/expression Expression} to evaluate upon
* cut. (Event object is available as `$event`) * cut. (Event object is available as `$event`)
* *
@ -426,7 +411,6 @@ forEach(
* Specify custom behavior on paste event. * Specify custom behavior on paste event.
* *
* @element window, input, select, textarea, a * @element window, input, select, textarea, a
* @priority 0
* @param {expression} ngPaste {@link guide/expression Expression} to evaluate upon * @param {expression} ngPaste {@link guide/expression Expression} to evaluate upon
* paste. (Event object is available as `$event`) * paste. (Event object is available as `$event`)
* *

View file

@ -110,24 +110,19 @@
top:50px; top:50px;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var templateSelect = element(by.model('template'));
var includeElem = element(by.css('.doc-example-live [ng-include]'));
it('should load template1.html', function() { it('should load template1.html', function() {
expect(includeElem.getText()).toMatch(/Content of template1.html/); expect(element('.doc-example-live [ng-include]').text()).
toMatch(/Content of template1.html/);
}); });
it('should load template2.html', function() { it('should load template2.html', function() {
templateSelect.click(); select('template').option('1');
templateSelect.element.all(by.css('option')).get(2).click(); expect(element('.doc-example-live [ng-include]').text()).
expect(includeElem.getText()).toMatch(/Content of template2.html/); toMatch(/Content of template2.html/);
}); });
it('should change to blank', function() { it('should change to blank', function() {
templateSelect.click(); select('template').option('');
templateSelect.element.all(by.css('option')).get(0).click(); expect(element('.doc-example-live [ng-include]')).toBe(undefined);
expect(includeElem.isPresent()).toBe(false);
}); });
</file> </file>
</example> </example>

View file

@ -15,13 +15,6 @@
* should use {@link guide/controller controllers} rather than `ngInit` * should use {@link guide/controller controllers} rather than `ngInit`
* to initialize values on a scope. * to initialize values on a scope.
* </div> * </div>
* <div class="alert alert-warning">
* **Note**: If you have assignment in `ngInit` along with {@link api/ng.$filter `$filter`}, make
* sure you have parenthesis for correct precedence:
* <pre class="prettyprint">
* <div ng-init="test1 = (data | orderBy:'name')"></div>
* </pre>
* </div>
* *
* @priority 450 * @priority 450
* *
@ -44,15 +37,15 @@
</div> </div>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should alias index positions', function() { it('should alias index positions', function() {
var elements = element.all(by.css('.example-init')); expect(element('.example-init').text())
expect(elements.get(0).getText()).toBe('list[ 0 ][ 0 ] = a;'); .toBe('list[ 0 ][ 0 ] = a;' +
expect(elements.get(1).getText()).toBe('list[ 0 ][ 1 ] = b;'); 'list[ 0 ][ 1 ] = b;' +
expect(elements.get(2).getText()).toBe('list[ 1 ][ 0 ] = c;'); 'list[ 1 ][ 0 ] = c;' +
expect(elements.get(3).getText()).toBe('list[ 1 ][ 1 ] = d;'); 'list[ 1 ][ 1 ] = d;');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngInitDirective = ngDirective({ var ngInitDirective = ngDirective({

View file

@ -24,12 +24,13 @@
<div>Normal: {{1 + 2}}</div> <div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div> <div ng-non-bindable>Ignored: {{1 + 2}}</div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check ng-non-bindable', function() { it('should check ng-non-bindable', function() {
expect(element(by.binding('1 + 2')).getText()).toContain('3'); expect(using('.doc-example-live').binding('1 + 2')).toBe('3');
expect(element.all(by.css('.doc-example-live div')).last().getText()).toMatch(/1 \+ 2/); expect(using('.doc-example-live').element('div:last').text()).
toMatch(/1 \+ 2/);
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 }); var ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 });

View file

@ -123,53 +123,49 @@
</ng-pluralize> </ng-pluralize>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should show correct pluralized string', function() { it('should show correct pluralized string', function() {
var withoutOffset = element.all(by.css('ng-pluralize')).get(0); expect(element('.doc-example-live ng-pluralize:first').text()).
var withOffset = element.all(by.css('ng-pluralize')).get(1); toBe('1 person is viewing.');
var countInput = element(by.model('personCount')); expect(element('.doc-example-live ng-pluralize:last').text()).
toBe('Igor is viewing.');
expect(withoutOffset.getText()).toEqual('1 person is viewing.'); using('.doc-example-live').input('personCount').enter('0');
expect(withOffset.getText()).toEqual('Igor is viewing.'); expect(element('.doc-example-live ng-pluralize:first').text()).
toBe('Nobody is viewing.');
expect(element('.doc-example-live ng-pluralize:last').text()).
toBe('Nobody is viewing.');
countInput.clear(); using('.doc-example-live').input('personCount').enter('2');
countInput.sendKeys('0'); expect(element('.doc-example-live ng-pluralize:first').text()).
toBe('2 people are viewing.');
expect(element('.doc-example-live ng-pluralize:last').text()).
toBe('Igor and Misko are viewing.');
expect(withoutOffset.getText()).toEqual('Nobody is viewing.'); using('.doc-example-live').input('personCount').enter('3');
expect(withOffset.getText()).toEqual('Nobody is viewing.'); expect(element('.doc-example-live ng-pluralize:first').text()).
toBe('3 people are viewing.');
expect(element('.doc-example-live ng-pluralize:last').text()).
toBe('Igor, Misko and one other person are viewing.');
countInput.clear(); using('.doc-example-live').input('personCount').enter('4');
countInput.sendKeys('2'); expect(element('.doc-example-live ng-pluralize:first').text()).
toBe('4 people are viewing.');
expect(withoutOffset.getText()).toEqual('2 people are viewing.'); expect(element('.doc-example-live ng-pluralize:last').text()).
expect(withOffset.getText()).toEqual('Igor and Misko are viewing.'); toBe('Igor, Misko and 2 other people are viewing.');
countInput.clear();
countInput.sendKeys('3');
expect(withoutOffset.getText()).toEqual('3 people are viewing.');
expect(withOffset.getText()).toEqual('Igor, Misko and one other person are viewing.');
countInput.clear();
countInput.sendKeys('4');
expect(withoutOffset.getText()).toEqual('4 people are viewing.');
expect(withOffset.getText()).toEqual('Igor, Misko and 2 other people are viewing.');
}); });
it('should show data-bound names', function() {
var withOffset = element.all(by.css('ng-pluralize')).get(1); it('should show data-binded names', function() {
var personCount = element(by.model('personCount')); using('.doc-example-live').input('personCount').enter('4');
var person1 = element(by.model('person1')); expect(element('.doc-example-live ng-pluralize:last').text()).
var person2 = element(by.model('person2')); toBe('Igor, Misko and 2 other people are viewing.');
personCount.clear();
personCount.sendKeys('4'); using('.doc-example-live').input('person1').enter('Di');
person1.clear(); using('.doc-example-live').input('person2').enter('Vojta');
person1.sendKeys('Di'); expect(element('.doc-example-live ng-pluralize:last').text()).
person2.clear(); toBe('Di, Vojta and 2 other people are viewing.');
person2.sendKeys('Vojta');
expect(withOffset.getText()).toEqual('Di, Vojta and 2 other people are viewing.');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) { var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) {

View file

@ -172,27 +172,25 @@
max-height:40px; max-height:40px;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var friends = element(by.css('.doc-example-live')) it('should render initial data set', function() {
.element.all(by.repeater('friend in friends')); var r = using('.doc-example-live').repeater('ul li');
expect(r.count()).toBe(10);
it('should render initial data set', function() { expect(r.row(0)).toEqual(["1","John","25"]);
expect(friends.count()).toBe(10); expect(r.row(1)).toEqual(["2","Jessie","30"]);
expect(friends.get(0).getText()).toEqual('[1] John who is 25 years old.'); expect(r.row(9)).toEqual(["10","Samantha","60"]);
expect(friends.get(1).getText()).toEqual('[2] Jessie who is 30 years old.'); expect(binding('friends.length')).toBe("10");
expect(friends.last().getText()).toEqual('[10] Samantha who is 60 years old.'); });
expect(element(by.binding('friends.length')).getText())
.toMatch("I have 10 friends. They are:");
});
it('should update repeater when filter predicate changes', function() { it('should update repeater when filter predicate changes', function() {
expect(friends.count()).toBe(10); var r = using('.doc-example-live').repeater('ul li');
expect(r.count()).toBe(10);
element(by.css('.doc-example-live')).element(by.model('q')).sendKeys('ma'); input('q').enter('ma');
expect(friends.count()).toBe(2); expect(r.count()).toBe(2);
expect(friends.get(0).getText()).toEqual('[1] Mary who is 28 years old.'); expect(r.row(0)).toEqual(["1","Mary","28"]);
expect(friends.last().getText()).toEqual('[2] Samantha who is 60 years old.'); expect(r.row(1)).toEqual(["2","Samantha","60"]);
}); });
</file> </file>
</example> </example>

View file

@ -52,11 +52,6 @@
* *
* Just remember to include the important flag so the CSS override will function. * Just remember to include the important flag so the CSS override will function.
* *
* <div class="alert alert-warning">
* **Note:** Here is a list of values that ngShow will consider as a falsy value (case insensitive):<br />
* "f" / "0" / "false" / "no" / "n" / "[]"
* </div>
*
* ## A note about animations with ngShow * ## A note about animations with ngShow
* *
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
@ -132,19 +127,16 @@
background:white; background:white;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var thumbsUp = element(by.css('.doc-example-live span.icon-thumbs-up')); it('should check ng-show / ng-hide', function() {
var thumbsDown = element(by.css('.doc-example-live span.icon-thumbs-down')); expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
it('should check ng-show / ng-hide', function() { input('checked').check();
expect(thumbsUp.isDisplayed()).toBeFalsy();
expect(thumbsDown.isDisplayed()).toBeTruthy();
element(by.model('checked')).click(); expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
expect(thumbsUp.isDisplayed()).toBeTruthy(); });
expect(thumbsDown.isDisplayed()).toBeFalsy();
});
</file> </file>
</example> </example>
*/ */
@ -208,11 +200,6 @@ var ngShowDirective = ['$animate', function($animate) {
* </pre> * </pre>
* *
* Just remember to include the important flag so the CSS override will function. * Just remember to include the important flag so the CSS override will function.
*
* <div class="alert alert-warning">
* **Note:** Here is a list of values that ngHide will consider as a falsy value (case insensitive):<br />
* "f" / "0" / "false" / "no" / "n" / "[]"
* </div>
* *
* ## A note about animations with ngHide * ## A note about animations with ngHide
* *
@ -289,19 +276,16 @@ var ngShowDirective = ['$animate', function($animate) {
background:white; background:white;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var thumbsUp = element(by.css('.doc-example-live span.icon-thumbs-up')); it('should check ng-show / ng-hide', function() {
var thumbsDown = element(by.css('.doc-example-live span.icon-thumbs-down')); expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1);
expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1);
it('should check ng-show / ng-hide', function() { input('checked').check();
expect(thumbsUp.isDisplayed()).toBeFalsy();
expect(thumbsDown.isDisplayed()).toBeTruthy();
element(by.model('checked')).click(); expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1);
expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1);
expect(thumbsUp.isDisplayed()).toBeTruthy(); });
expect(thumbsDown.isDisplayed()).toBeFalsy();
});
</file> </file>
</example> </example>
*/ */

View file

@ -27,15 +27,13 @@
color: black; color: black;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var colorSpan = element(by.css('.doc-example-live span'));
it('should check ng-style', function() { it('should check ng-style', function() {
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)'); expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
element(by.css('.doc-example-live input[value=set]')).click(); element('.doc-example-live :button[value=set]').click();
expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)'); expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)');
element(by.css('.doc-example-live input[value=clear]')).click(); element('.doc-example-live :button[value=clear]').click();
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)'); expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
}); });
</file> </file>
</example> </example>

View file

@ -11,7 +11,7 @@
* as specified in the template. * as specified in the template.
* *
* The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it * The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it
* from the template cache), `ngSwitch` simply chooses one of the nested elements and makes it visible based on which element * from the template cache), `ngSwitch` simply choses one of the nested elements and makes it visible based on which element
* matches the value obtained from the evaluated expression. In other words, you define a container element * matches the value obtained from the evaluated expression. In other words, you define a container element
* (where you place the directive), place an expression on the **`on="..."` attribute** * (where you place the directive), place an expression on the **`on="..."` attribute**
* (or the **`ng-switch="..."` attribute**), define any inner elements inside of the directive and place * (or the **`ng-switch="..."` attribute**), define any inner elements inside of the directive and place
@ -107,20 +107,17 @@
top:0; top:0;
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var switchElem = element(by.css('.doc-example-live [ng-switch]'));
var select = element(by.model('selection'));
it('should start in settings', function() { it('should start in settings', function() {
expect(switchElem.getText()).toMatch(/Settings Div/); expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/);
}); });
it('should change to home', function() { it('should change to home', function() {
select.element.all(by.css('option')).get(1).click(); select('selection').option('home');
expect(switchElem.getText()).toMatch(/Home Span/); expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/);
}); });
it('should select default', function() { it('should select default', function() {
select.element.all(by.css('option')).get(2).click(); select('selection').option('other');
expect(switchElem.getText()).toMatch(/default/); expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/);
}); });
</file> </file>
</example> </example>

View file

@ -40,18 +40,14 @@
<pane title="{{title}}">{{text}}</pane> <pane title="{{title}}">{{text}}</pane>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should have transcluded', function() { it('should have transcluded', function() {
var titleElement = element(by.model('title')); input('title').enter('TITLE');
titleElement.clear(); input('text').enter('TEXT');
titleElement.sendKeys('TITLE'); expect(binding('title')).toEqual('TITLE');
var textElement = element(by.model('text')); expect(binding('text')).toEqual('TEXT');
textElement.clear();
textElement.sendKeys('TEXT');
expect(element(by.binding('title')).getText()).toEqual('TITLE');
expect(element(by.binding('text')).getText()).toEqual('TEXT');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
*/ */

View file

@ -25,12 +25,12 @@
<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a> <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div> <div id="tpl-content" ng-include src="currentTpl"></div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should load template defined inside script tag', function() { it('should load template defined inside script tag', function() {
element(by.css('#tpl-link')).click(); element('#tpl-link').click();
expect(element(by.css('#tpl-content')).getText()).toMatch(/Content of the template/); expect(element('#tpl-content').text()).toMatch(/Content of the template/);
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
var scriptDirective = ['$templateCache', function($templateCache) { var scriptDirective = ['$templateCache', function($templateCache) {

View file

@ -19,21 +19,14 @@ var ngOptionsMinErr = minErr('ngOptions');
* represented by the selected option will be bound to the model identified by the `ngModel` * represented by the selected option will be bound to the model identified by the `ngModel`
* directive. * directive.
* *
* <div class="alert alert-warning">
* **Note:** `ngModel` compares by reference, not value. This is important when binding to an
* array of objects. See an example {@link http://jsfiddle.net/qWzTb/ in this jsfiddle}.
* </div>
*
* Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can * Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can
* be nested into the `<select>` element. This element will then represent the `null` or "not selected" * be nested into the `<select>` element. This element will then represent the `null` or "not selected"
* option. See example below for demonstration. * option. See example below for demonstration.
* *
* <div class="alert alert-warning"> * Note: `ngOptions` provides iterator facility for `<option>` element which should be used instead
* **Note:** `ngOptions` provides an iterator facility for the `<option>` element which should be used instead
* of {@link ng.directive:ngRepeat ngRepeat} when you want the * of {@link ng.directive:ngRepeat ngRepeat} when you want the
* `select` model to be bound to a non-string value. This is because an option element can only * `select` model to be bound to a non-string value. This is because an option element can only
* be bound to string values at present. * be bound to string values at present.
* </div>
* *
* @param {string} ngModel Assignable angular expression to data-bind to. * @param {string} ngModel Assignable angular expression to data-bind to.
* @param {string=} name Property name of the form under which the control is published. * @param {string=} name Property name of the form under which the control is published.
@ -120,17 +113,15 @@ var ngOptionsMinErr = minErr('ngOptions');
</div> </div>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should check ng-options', function() { it('should check ng-options', function() {
expect(element(by.binding('{selected_color:color}')).getText()).toMatch('red'); expect(binding('{selected_color:color}')).toMatch('red');
element.all(by.select('color')).first().click(); select('color').option('0');
element.all(by.css('select[ng-model="color"] option')).first().click(); expect(binding('{selected_color:color}')).toMatch('black');
expect(element(by.binding('{selected_color:color}')).getText()).toMatch('black'); using('.nullable').select('color').option('');
element(by.css('.nullable select[ng-model="color"]')).click(); expect(binding('{selected_color:color}')).toMatch('null');
element.all(by.css('.nullable select[ng-model="color"] option')).first().click();
expect(element(by.binding('{selected_color:color}')).getText()).toMatch('null');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
@ -439,7 +430,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {
// We now build up the list of options we need (we merge later) // We now build up the list of options we need (we merge later)
for (index = 0; length = keys.length, index < length; index++) { for (index = 0; length = keys.length, index < length; index++) {
key = index; key = index;
if (keyName) { if (keyName) {
key = keys[index]; key = keys[index];

View file

@ -70,47 +70,35 @@
Equality <input type="checkbox" ng-model="strict"><br> Equality <input type="checkbox" ng-model="strict"><br>
<table id="searchObjResults"> <table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr> <tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search:strict"> <tr ng-repeat="friend in friends | filter:search:strict">
<td>{{friendObj.name}}</td> <td>{{friend.name}}</td>
<td>{{friendObj.phone}}</td> <td>{{friend.phone}}</td>
</tr> </tr>
</table> </table>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var expectFriendNames = function(expectedNames, key) {
element.all(by.repeater(key + ' in friends').column(key + '.name')).then(function(arr) {
arr.forEach(function(wd, i) {
expect(wd.getText()).toMatch(expectedNames[i]);
});
});
};
it('should search across all fields when filtering with a string', function() { it('should search across all fields when filtering with a string', function() {
var searchText = element(by.model('searchText')); input('searchText').enter('m');
searchText.clear(); expect(repeater('#searchTextResults tr', 'friend in friends').column('friend.name')).
searchText.sendKeys('m'); toEqual(['Mary', 'Mike', 'Adam']);
expectFriendNames(['Mary', 'Mike', 'Adam'], 'friend');
searchText.clear(); input('searchText').enter('76');
searchText.sendKeys('76'); expect(repeater('#searchTextResults tr', 'friend in friends').column('friend.name')).
expectFriendNames(['John', 'Julie'], 'friend'); toEqual(['John', 'Julie']);
}); });
it('should search in specific fields when filtering with a predicate object', function() { it('should search in specific fields when filtering with a predicate object', function() {
var searchAny = element(by.model('search.$')); input('search.$').enter('i');
searchAny.clear(); expect(repeater('#searchObjResults tr', 'friend in friends').column('friend.name')).
searchAny.sendKeys('i'); toEqual(['Mary', 'Mike', 'Julie', 'Juliette']);
expectFriendNames(['Mary', 'Mike', 'Julie', 'Juliette'], 'friendObj');
}); });
it('should use a equal comparison when comparator is true', function() { it('should use a equal comparison when comparator is true', function() {
var searchName = element(by.model('search.name')); input('search.name').enter('Julie');
var strict = element(by.model('strict')); input('strict').check();
searchName.clear(); expect(repeater('#searchObjResults tr', 'friend in friends').column('friend.name')).
searchName.sendKeys('Julie'); toEqual(['Julie']);
strict.click();
expectFriendNames(['Julie'], 'friendObj');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
function filterFilter() { function filterFilter() {
@ -188,7 +176,7 @@ function filterFilter() {
(function(path) { (function(path) {
if (typeof expression[path] == 'undefined') return; if (typeof expression[path] == 'undefined') return;
predicates.push(function(value) { predicates.push(function(value) {
return search(path == '$' ? value : (value && value[path]), expression[path]); return search(path == '$' ? value : getter(value, path), expression[path]);
}); });
})(key); })(key);
} }

View file

@ -24,22 +24,21 @@
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="Ctrl">
<input type="number" ng-model="amount"> <br> <input type="number" ng-model="amount"> <br>
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br> default currency symbol ($): {{amount | currency}}<br>
custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span> custom currency identifier (USD$): {{amount | currency:"USD$"}}
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should init with 1234.56', function() { it('should init with 1234.56', function() {
expect(element(by.id('currency-default')).getText()).toBe('$1,234.56'); expect(binding('amount | currency')).toBe('$1,234.56');
expect(element(by.binding('amount | currency:"USD$"')).getText()).toBe('USD$1,234.56'); expect(binding('amount | currency:"USD$"')).toBe('USD$1,234.56');
}); });
it('should update', function() { it('should update', function() {
element(by.model('amount')).clear(); input('amount').enter('-1234');
element(by.model('amount')).sendKeys('-1234'); expect(binding('amount | currency')).toBe('($1,234.00)');
expect(element(by.id('currency-default')).getText()).toBe('($1,234.00)'); expect(binding('amount | currency:"USD$"')).toBe('(USD$1,234.00)');
expect(element(by.binding('amount | currency:"USD$"')).getText()).toBe('(USD$1,234.00)');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
currencyFilter.$inject = ['$locale']; currencyFilter.$inject = ['$locale'];
@ -78,26 +77,25 @@ function currencyFilter($locale) {
</script> </script>
<div ng-controller="Ctrl"> <div ng-controller="Ctrl">
Enter number: <input ng-model='val'><br> Enter number: <input ng-model='val'><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br> Default formatting: {{val | number}}<br>
No fractions: <span>{{val | number:0}}</span><br> No fractions: {{val | number:0}}<br>
Negative number: <span>{{-val | number:4}}</span> Negative number: {{-val | number:4}}
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should format numbers', function() { it('should format numbers', function() {
expect(element(by.id('number-default')).getText()).toBe('1,234.568'); expect(binding('val | number')).toBe('1,234.568');
expect(element(by.binding('val | number:0')).getText()).toBe('1,235'); expect(binding('val | number:0')).toBe('1,235');
expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679'); expect(binding('-val | number:4')).toBe('-1,234.5679');
}); });
it('should update', function() { it('should update', function() {
element(by.model('val')).clear(); input('val').enter('3374.333');
element(by.model('val')).sendKeys('3374.333'); expect(binding('val | number')).toBe('3,374.333');
expect(element(by.id('number-default')).getText()).toBe('3,374.333'); expect(binding('val | number:0')).toBe('3,374');
expect(element(by.binding('val | number:0')).getText()).toBe('3,374'); expect(binding('-val | number:4')).toBe('-3,374.3330');
expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330'); });
}); </doc:scenario>
</doc:protractor>
</doc:example> </doc:example>
*/ */
@ -327,22 +325,22 @@ var DATE_FORMATS_SPLIT = /((?:[^yMdHhmsaZE']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|d+
<doc:example> <doc:example>
<doc:source> <doc:source>
<span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>: <span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
<span>{{1288323623006 | date:'medium'}}</span><br> {{1288323623006 | date:'medium'}}<br>
<span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>: <span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br> {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
<span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>: <span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
<span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span><br> {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}<br>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should format date', function() { it('should format date', function() {
expect(element(by.binding("1288323623006 | date:'medium'")).getText()). expect(binding("1288323623006 | date:'medium'")).
toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/); toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/);
expect(element(by.binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).getText()). expect(binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).
toMatch(/2010\-10\-2\d \d{2}:\d{2}:\d{2} (\-|\+)?\d{4}/); toMatch(/2010\-10\-2\d \d{2}:\d{2}:\d{2} (\-|\+)?\d{4}/);
expect(element(by.binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).getText()). expect(binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).
toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/); toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/);
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
dateFilter.$inject = ['$locale']; dateFilter.$inject = ['$locale'];
@ -441,11 +439,11 @@ function dateFilter($locale) {
<doc:source> <doc:source>
<pre>{{ {'name':'value'} | json }}</pre> <pre>{{ {'name':'value'} | json }}</pre>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should jsonify filtered objects', function() { it('should jsonify filtered objects', function() {
expect(element(by.binding("{'name':'value'}")).getText()).toMatch(/\{\n "name": ?"value"\n}/); expect(binding("{'name':'value'}")).toMatch(/\{\n "name": ?"value"\n}/);
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
* *
*/ */

View file

@ -36,37 +36,28 @@
<p>Output letters: {{ letters | limitTo:letterLimit }}</p> <p>Output letters: {{ letters | limitTo:letterLimit }}</p>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
var numLimitInput = element(by.model('numLimit'));
var letterLimitInput = element(by.model('letterLimit'));
var limitedNumbers = element(by.binding('numbers | limitTo:numLimit'));
var limitedLetters = element(by.binding('letters | limitTo:letterLimit'));
it('should limit the number array to first three items', function() { it('should limit the number array to first three items', function() {
expect(numLimitInput.getAttribute('value')).toBe('3'); expect(element('.doc-example-live input[ng-model=numLimit]').val()).toBe('3');
expect(letterLimitInput.getAttribute('value')).toBe('3'); expect(element('.doc-example-live input[ng-model=letterLimit]').val()).toBe('3');
expect(limitedNumbers.getText()).toEqual('Output numbers: [1,2,3]'); expect(binding('numbers | limitTo:numLimit')).toEqual('[1,2,3]');
expect(limitedLetters.getText()).toEqual('Output letters: abc'); expect(binding('letters | limitTo:letterLimit')).toEqual('abc');
}); });
it('should update the output when -3 is entered', function() { it('should update the output when -3 is entered', function() {
numLimitInput.clear(); input('numLimit').enter(-3);
numLimitInput.sendKeys('-3'); input('letterLimit').enter(-3);
letterLimitInput.clear(); expect(binding('numbers | limitTo:numLimit')).toEqual('[7,8,9]');
letterLimitInput.sendKeys('-3'); expect(binding('letters | limitTo:letterLimit')).toEqual('ghi');
expect(limitedNumbers.getText()).toEqual('Output numbers: [7,8,9]');
expect(limitedLetters.getText()).toEqual('Output letters: ghi');
}); });
it('should not exceed the maximum size of input array', function() { it('should not exceed the maximum size of input array', function() {
numLimitInput.clear(); input('numLimit').enter(100);
numLimitInput.sendKeys('100'); input('letterLimit').enter(100);
letterLimitInput.clear(); expect(binding('numbers | limitTo:numLimit')).toEqual('[1,2,3,4,5,6,7,8,9]');
letterLimitInput.sendKeys('100'); expect(binding('letters | limitTo:letterLimit')).toEqual('abcdefghi');
expect(limitedNumbers.getText()).toEqual('Output numbers: [1,2,3,4,5,6,7,8,9]');
expect(limitedLetters.getText()).toEqual('Output letters: abcdefghi');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
function limitToFilter(){ function limitToFilter(){

View file

@ -58,6 +58,29 @@
</table> </table>
</div> </div>
</doc:source> </doc:source>
<doc:scenario>
it('should be reverse ordered by aged', function() {
expect(binding('predicate')).toBe('-age');
expect(repeater('table.friend', 'friend in friends').column('friend.age')).
toEqual(['35', '29', '21', '19', '10']);
expect(repeater('table.friend', 'friend in friends').column('friend.name')).
toEqual(['Adam', 'Julie', 'Mike', 'Mary', 'John']);
});
it('should reorder the table when user selects different predicate', function() {
element('.doc-example-live a:contains("Name")').click();
expect(repeater('table.friend', 'friend in friends').column('friend.name')).
toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']);
expect(repeater('table.friend', 'friend in friends').column('friend.age')).
toEqual(['35', '10', '29', '19', '21']);
element('.doc-example-live a:contains("Phone")').click();
expect(repeater('table.friend', 'friend in friends').column('friend.phone')).
toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']);
expect(repeater('table.friend', 'friend in friends').column('friend.name')).
toEqual(['Mary', 'Julie', 'Adam', 'Mike', 'John']);
});
</doc:scenario>
</doc:example> </doc:example>
*/ */
orderByFilter.$inject = ['$parse']; orderByFilter.$inject = ['$parse'];

View file

@ -223,14 +223,31 @@ function $HttpProvider() {
* XMLHttpRequest will transparently follow it, meaning that the error callback will not be * XMLHttpRequest will transparently follow it, meaning that the error callback will not be
* called for such responses. * called for such responses.
* *
* # Calling $http from outside AngularJS
* The `$http` service will not actually send the request until the next `$digest()` is
* executed. Normally this is not an issue, since almost all the time your call to `$http` will
* be from within a `$apply()` block.
* If you are calling `$http` from outside Angular, then you should wrap it in a call to
* `$apply` to cause a $digest to occur and also to handle errors in the block correctly.
*
* ```
* $scope.$apply(function() {
* $http(...);
* });
* ```
*
* # Writing Unit Tests that use $http * # Writing Unit Tests that use $http
* When unit testing (using {@link api/ngMock ngMock}), it is necessary to call * When unit testing you are mostly responsible for scheduling the `$digest` cycle. If you do
* {@link api/ngMock.$httpBackend#methods_flush $httpBackend.flush()} to flush each pending * not trigger a `$digest` before calling `$httpBackend.flush()` then the request will not have
* request using trained responses. * been made and `$httpBackend.expect(...)` expectations will fail. The solution is to run the
* code that calls the `$http()` method inside a $apply block as explained in the previous
* section.
* *
* ``` * ```
* $httpBackend.expectGET(...); * $httpBackend.expectGET(...);
* $http.get(...); * $scope.$apply(function() {
* $http.get(...);
* });
* $httpBackend.flush(); * $httpBackend.flush();
* ``` * ```
* *
@ -587,14 +604,14 @@ function $HttpProvider() {
<option>JSONP</option> <option>JSONP</option>
</select> </select>
<input type="text" ng-model="url" size="80"/> <input type="text" ng-model="url" size="80"/>
<button id="fetchbtn" ng-click="fetch()">fetch</button><br> <button ng-click="fetch()">fetch</button><br>
<button id="samplegetbtn" ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button> <button ng-click="updateModel('GET', 'http-hello.html')">Sample GET</button>
<button id="samplejsonpbtn" <button
ng-click="updateModel('JSONP', ng-click="updateModel('JSONP',
'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')"> 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">
Sample JSONP Sample JSONP
</button> </button>
<button id="invalidjsonpbtn" <button
ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')"> ng-click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">
Invalid JSONP Invalid JSONP
</button> </button>
@ -631,34 +648,27 @@ function $HttpProvider() {
<file name="http-hello.html"> <file name="http-hello.html">
Hello, $http! Hello, $http!
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
var status = element(by.binding('status'));
var data = element(by.binding('data'));
var fetchBtn = element(by.id('fetchbtn'));
var sampleGetBtn = element(by.id('samplegetbtn'));
var sampleJsonpBtn = element(by.id('samplejsonpbtn'));
var invalidJsonpBtn = element(by.id('invalidjsonpbtn'));
it('should make an xhr GET request', function() { it('should make an xhr GET request', function() {
sampleGetBtn.click(); element(':button:contains("Sample GET")').click();
fetchBtn.click(); element(':button:contains("fetch")').click();
expect(status.getText()).toMatch('200'); expect(binding('status')).toBe('200');
expect(data.getText()).toMatch(/Hello, \$http!/) expect(binding('data')).toMatch(/Hello, \$http!/);
}); });
it('should make a JSONP request to angularjs.org', function() { it('should make a JSONP request to angularjs.org', function() {
sampleJsonpBtn.click(); element(':button:contains("Sample JSONP")').click();
fetchBtn.click(); element(':button:contains("fetch")').click();
expect(status.getText()).toMatch('200'); expect(binding('status')).toBe('200');
expect(data.getText()).toMatch(/Super Hero!/); expect(binding('data')).toMatch(/Super Hero!/);
}); });
it('should make JSONP request to invalid URL and invoke the error handler', it('should make JSONP request to invalid URL and invoke the error handler',
function() { function() {
invalidJsonpBtn.click(); element(':button:contains("Invalid JSONP")').click();
fetchBtn.click(); element(':button:contains("fetch")').click();
expect(status.getText()).toMatch('0'); expect(binding('status')).toBe('0');
expect(data.getText()).toMatch('Request failed'); expect(binding('data')).toBe('Request failed');
}); });
</file> </file>
</example> </example>

View file

@ -1,19 +1,14 @@
'use strict'; 'use strict';
function createXhr(method) { function createXhr(method) {
//if IE and the method is not RFC2616 compliant, or if XMLHttpRequest // IE8 doesn't support PATCH method, but the ActiveX object does
//is not available, try getting an ActiveXObject. Otherwise, use XMLHttpRequest /* global ActiveXObject */
//if it is available return (msie <= 8 && lowercase(method) === 'patch')
if (msie <= 8 && (!method.match(/^(get|post|head|put|delete|options)$/i) || ? new ActiveXObject('Microsoft.XMLHTTP')
!window.XMLHttpRequest)) { : new window.XMLHttpRequest();
return new window.ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new window.XMLHttpRequest();
}
throw minErr('$httpBackend')('noxhr', "This browser does not support XMLHttpRequest.");
} }
/** /**
* @ngdoc object * @ngdoc object
* @name ng.$httpBackend * @name ng.$httpBackend
@ -107,20 +102,7 @@ function createHttpBackend($browser, createXhr, $browserDefer, callbacks, rawDoc
} }
if (responseType) { if (responseType) {
try { xhr.responseType = responseType;
xhr.responseType = responseType;
} catch (e) {
// WebKit added support for the json responseType value on 09/03/2013
// https://bugs.webkit.org/show_bug.cgi?id=73648. Versions of Safari prior to 7 are
// known to throw when setting the value "json" as the response type. Other older
// browsers implementing the responseType
//
// The json response type can be ignored if not supported, because JSON payloads are
// parsed on the client-side regardless.
if (responseType !== 'json') {
throw e;
}
}
} }
xhr.send(post || null); xhr.send(post || null);

View file

@ -31,11 +31,11 @@ var $interpolateMinErr = minErr('$interpolate');
//demo.label// //demo.label//
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should interpolate binding with custom symbols', function() { it('should interpolate binding with custom symbols', function() {
expect(element(by.binding('demo.label')).getText()).toBe('This binding is brought you by // interpolation symbols.'); expect(binding('demo.label')).toBe('This binding is brought you by // interpolation symbols.');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
function $InterpolateProvider() { function $InterpolateProvider() {

View file

@ -24,7 +24,7 @@ function $IntervalProvider() {
* In tests you can use {@link ngMock.$interval#methods_flush `$interval.flush(millis)`} to * In tests you can use {@link ngMock.$interval#methods_flush `$interval.flush(millis)`} to
* move forward by `millis` milliseconds and trigger any functions scheduled to run in that * move forward by `millis` milliseconds and trigger any functions scheduled to run in that
* time. * time.
* *
* <div class="alert alert-warning"> * <div class="alert alert-warning">
* **Note**: Intervals created by this service must be explicitly destroyed when you are finished * **Note**: Intervals created by this service must be explicitly destroyed when you are finished
* with them. In particular they are not automatically destroyed when a controller's scope or a * with them. In particular they are not automatically destroyed when a controller's scope or a
@ -137,8 +137,8 @@ function $IntervalProvider() {
promise = deferred.promise, promise = deferred.promise,
iteration = 0, iteration = 0,
skipApply = (isDefined(invokeApply) && !invokeApply); skipApply = (isDefined(invokeApply) && !invokeApply);
count = isDefined(count) ? count : 0; count = isDefined(count) ? count : 0,
promise.then(null, null, fn); promise.then(null, null, fn);

View file

@ -51,7 +51,7 @@ function $LogProvider(){
* @name ng.$logProvider#debugEnabled * @name ng.$logProvider#debugEnabled
* @methodOf ng.$logProvider * @methodOf ng.$logProvider
* @description * @description
* @param {boolean=} flag enable or disable debug level messages * @param {string=} flag enable or disable debug level messages
* @returns {*} current value if used as getter or itself (chaining) if used as setter * @returns {*} current value if used as getter or itself (chaining) if used as setter
*/ */
this.debugEnabled = function(flag) { this.debugEnabled = function(flag) {

View file

@ -707,7 +707,7 @@ Parser.prototype = {
var getter = getterFn(field, this.options, this.text); var getter = getterFn(field, this.options, this.text);
return extend(function(scope, locals, self) { return extend(function(scope, locals, self) {
return getter(self || object(scope, locals)); return getter(self || object(scope, locals), locals);
}, { }, {
assign: function(scope, value, locals) { assign: function(scope, value, locals) {
return setter(object(scope, locals), field, value, parser.text, parser.options); return setter(object(scope, locals), field, value, parser.text, parser.options);

View file

@ -16,9 +16,9 @@
* asynchronous programming what `try`, `catch` and `throw` keywords are to synchronous programming. * asynchronous programming what `try`, `catch` and `throw` keywords are to synchronous programming.
* *
* <pre> * <pre>
* // for the purpose of this example let's assume that variables `$q`, `scope` and `okToGreet` * // for the purpose of this example let's assume that variables `$q` and `scope` are
* // are available in the current lexical scope (they could have been injected or passed in). * // available in the current lexical scope (they could have been injected or passed in).
* *
* function asyncGreet(name) { * function asyncGreet(name) {
* var deferred = $q.defer(); * var deferred = $q.defer();
* *
@ -73,7 +73,7 @@
* constructed via `$q.reject`, the promise will be rejected instead. * constructed via `$q.reject`, the promise will be rejected instead.
* - `reject(reason)` rejects the derived promise with the `reason`. This is equivalent to * - `reject(reason)` rejects the derived promise with the `reason`. This is equivalent to
* resolving it with a rejection constructed via `$q.reject`. * resolving it with a rejection constructed via `$q.reject`.
* - `notify(value)` - provides updates on the status of the promise's execution. This may be called * - `notify(value)` - provides updates on the status of the promises execution. This may be called
* multiple times before the promise is either resolved or rejected. * multiple times before the promise is either resolved or rejected.
* *
* **Properties** * **Properties**
@ -223,7 +223,7 @@ function qFactory(nextTick, exceptionHandler) {
reject: function(reason) { reject: function(reason) {
deferred.resolve(createInternalRejectedPromise(reason)); deferred.resolve(reject(reason));
}, },
@ -380,12 +380,6 @@ function qFactory(nextTick, exceptionHandler) {
* @returns {Promise} Returns a promise that was already resolved as rejected with the `reason`. * @returns {Promise} Returns a promise that was already resolved as rejected with the `reason`.
*/ */
var reject = function(reason) { var reject = function(reason) {
var result = defer();
result.reject(reason);
return result.promise;
};
var createInternalRejectedPromise = function(reason) {
return { return {
then: function(callback, errback) { then: function(callback, errback) {
var result = defer(); var result = defer();

View file

@ -926,7 +926,7 @@ function $RootScopeProvider(){
* onto the {@link ng.$exceptionHandler $exceptionHandler} service. * onto the {@link ng.$exceptionHandler $exceptionHandler} service.
* *
* @param {string} name Event name to emit. * @param {string} name Event name to emit.
* @param {...*} args Optional one or more arguments which will be passed onto the event listeners. * @param {...*} args Optional set of arguments which will be passed onto the event listeners.
* @return {Object} Event object (see {@link ng.$rootScope.Scope#methods_$on}). * @return {Object} Event object (see {@link ng.$rootScope.Scope#methods_$on}).
*/ */
$emit: function(name, args) { $emit: function(name, args) {
@ -994,7 +994,7 @@ function $RootScopeProvider(){
* onto the {@link ng.$exceptionHandler $exceptionHandler} service. * onto the {@link ng.$exceptionHandler $exceptionHandler} service.
* *
* @param {string} name Event name to broadcast. * @param {string} name Event name to broadcast.
* @param {...*} args Optional one or more arguments which will be passed onto the event listeners. * @param {...*} args Optional set of arguments which will be passed onto the event listeners.
* @return {Object} Event object, see {@link ng.$rootScope.Scope#methods_$on} * @return {Object} Event object, see {@link ng.$rootScope.Scope#methods_$on}
*/ */
$broadcast: function(name, args) { $broadcast: function(name, args) {

View file

@ -275,7 +275,7 @@ function $SceDelegateProvider() {
* *
* @description * @description
* Returns an object that is trusted by angular for use in specified strict * Returns an object that is trusted by angular for use in specified strict
* contextual escaping contexts (such as ng-bind-html, ng-include, any src * contextual escaping contexts (such as ng-html-bind-unsafe, ng-include, any src
* attribute interpolation, any dom event binding attribute interpolation * attribute interpolation, any dom event binding attribute interpolation
* such as for onclick, etc.) that uses the provided value. * such as for onclick, etc.) that uses the provided value.
* See {@link ng.$sce $sce} for enabling strict contextual escaping. * See {@link ng.$sce $sce} for enabling strict contextual escaping.
@ -502,8 +502,8 @@ function $SceDelegateProvider() {
* It's important to remember that SCE only applies to interpolation expressions. * It's important to remember that SCE only applies to interpolation expressions.
* *
* If your expressions are constant literals, they're automatically trusted and you don't need to * If your expressions are constant literals, they're automatically trusted and you don't need to
* call `$sce.trustAs` on them (remember to include the `ngSanitize` module) (e.g. * call `$sce.trustAs` on them. (e.g.
* `<div ng-bind-html="'<b>implicitly trusted</b>'"></div>`) just works. * `<div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div>`) just works.
* *
* Additionally, `a[href]` and `img[src]` automatically sanitize their URLs and do not pass them * Additionally, `a[href]` and `img[src]` automatically sanitize their URLs and do not pass them
* through {@link ng.$sce#methods_getTrusted $sce.getTrusted}. SCE doesn't play a role here. * through {@link ng.$sce#methods_getTrusted $sce.getTrusted}. SCE doesn't play a role here.
@ -563,7 +563,7 @@ function $SceDelegateProvider() {
* matched against the **entire** *normalized / absolute URL* of the resource being tested * matched against the **entire** *normalized / absolute URL* of the resource being tested
* (even when the RegExp did not have the `^` and `$` codes.) In addition, any flags * (even when the RegExp did not have the `^` and `$` codes.) In addition, any flags
* present on the RegExp (such as multiline, global, ignoreCase) are ignored. * present on the RegExp (such as multiline, global, ignoreCase) are ignored.
* - If you are generating your JavaScript from some other templating engine (not * - If you are generating your Javascript from some other templating engine (not
* recommended, e.g. in issue [#4006](https://github.com/angular/angular.js/issues/4006)), * recommended, e.g. in issue [#4006](https://github.com/angular/angular.js/issues/4006)),
* remember to escape your regular expression (and be aware that you might need more than * remember to escape your regular expression (and be aware that you might need more than
* one level of escaping depending on your templating engine and the way you interpolated * one level of escaping depending on your templating engine and the way you interpolated
@ -580,7 +580,7 @@ function $SceDelegateProvider() {
* ## Show me an example using SCE. * ## Show me an example using SCE.
* *
* @example * @example
<example module="mySceApp" deps="angular-sanitize.js"> <example module="mySceApp">
<file name="index.html"> <file name="index.html">
<div ng-controller="myAppController as myCtrl"> <div ng-controller="myAppController as myCtrl">
<i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br> <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
@ -624,15 +624,13 @@ function $SceDelegateProvider() {
] ]
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
describe('SCE doc demo', function() { describe('SCE doc demo', function() {
it('should sanitize untrusted values', function() { it('should sanitize untrusted values', function() {
expect(element(by.css('.htmlComment')).getInnerHtml()) expect(element('.htmlComment').html()).toBe('<span>Is <i>anyone</i> reading this?</span>');
.toBe('<span>Is <i>anyone</i> reading this?</span>');
}); });
it('should NOT sanitize explicitly trusted values', function() { it('should NOT sanitize explicitly trusted values', function() {
expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe( expect(element('#explicitlyTrustedHtml').html()).toBe(
'<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' + '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
'sanitization.&quot;">Hover over this text.</span>'); 'sanitization.&quot;">Hover over this text.</span>');
}); });
@ -807,8 +805,8 @@ function $SceProvider() {
* *
* @description * @description
* Delegates to {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`}. As such, * Delegates to {@link ng.$sceDelegate#methods_trustAs `$sceDelegate.trustAs`}. As such,
* returns an object that is trusted by angular for use in specified strict contextual * returns an objectthat is trusted by angular for use in specified strict contextual
* escaping contexts (such as ng-bind-html, ng-include, any src attribute * escaping contexts (such as ng-html-bind-unsafe, ng-include, any src attribute
* interpolation, any dom event binding attribute interpolation such as for onclick, etc.) * interpolation, any dom event binding attribute interpolation such as for onclick, etc.)
* that uses the provided value. See * {@link ng.$sce $sce} for enabling strict contextual * that uses the provided value. See * {@link ng.$sce $sce} for enabling strict contextual
* escaping. * escaping.

View file

@ -31,13 +31,13 @@
<button ng-click="doGreeting(greeting)">ALERT</button> <button ng-click="doGreeting(greeting)">ALERT</button>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should display the greeting in the input box', function() { it('should display the greeting in the input box', function() {
element(by.model('greeting')).sendKeys('Hello, E2E Tests'); input('greeting').enter('Hello, E2E Tests');
// If we click the button it will block the test runner // If we click the button it will block the test runner
// element(':button').click(); // element(':button').click();
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
function $WindowProvider(){ function $WindowProvider(){

View file

@ -828,10 +828,7 @@ angular.module('ngAnimate', ['ng'])
} }
function fireDoneCallbackAsync() { function fireDoneCallbackAsync() {
async(function() { doneCallback && async(doneCallback);
fireDOMCallback('close');
doneCallback && doneCallback();
});
} }
//it is less complicated to use a flag than managing and cancelling //it is less complicated to use a flag than managing and cancelling

View file

@ -379,7 +379,7 @@ angular.mock.$LogProvider = function() {
* *
* @example * @example
* <pre> * <pre>
* $log.error('Some Error'); * $log.log('Some Error');
* var first = $log.error.logs.unshift(); * var first = $log.error.logs.unshift();
* </pre> * </pre>
*/ */
@ -504,7 +504,6 @@ angular.mock.$IntervalProvider = function() {
}; };
$interval.cancel = function(promise) { $interval.cancel = function(promise) {
if(!promise) return false;
var fnIndex; var fnIndex;
angular.forEach(repeatFns, function(fn, index) { angular.forEach(repeatFns, function(fn, index) {
@ -990,18 +989,18 @@ angular.mock.dump = function(object) {
* *
* # Flushing HTTP requests * # Flushing HTTP requests
* *
* The $httpBackend used in production always responds to requests with responses asynchronously. * The $httpBackend used in production, always responds to requests with responses asynchronously.
* If we preserved this behavior in unit testing we'd have to create async unit tests, which are * If we preserved this behavior in unit testing, we'd have to create async unit tests, which are
* hard to write, understand, and maintain. However, the testing mock can't respond * hard to write, follow and maintain. At the same time the testing mock, can't respond
* synchronously because that would change the execution of the code under test. For this reason the * synchronously because that would change the execution of the code under test. For this reason the
* mock $httpBackend has a `flush()` method, which allows the test to explicitly flush pending * mock $httpBackend has a `flush()` method, which allows the test to explicitly flush pending
* requests and thus preserve the async api of the backend while allowing the test to execute * requests and thus preserving the async api of the backend, while allowing the test to execute
* synchronously. * synchronously.
* *
* *
* # Unit testing with mock $httpBackend * # Unit testing with mock $httpBackend
* The following code shows how to setup and use the mock backend when unit testing a controller. * The following code shows how to setup and use the mock backend in unit testing a controller.
* First we create the controller under test: * First we create the controller under test
* *
<pre> <pre>
// The controller code // The controller code
@ -1026,7 +1025,7 @@ angular.mock.dump = function(object) {
} }
</pre> </pre>
* *
* Now we setup the mock backend and create the test specs: * Now we setup the mock backend and create the test specs.
* *
<pre> <pre>
// testing controller // testing controller
@ -1730,7 +1729,7 @@ angular.mock.$RootElementProvider = function() {
* In addition, ngMock also extends various core ng services such that they can be * In addition, ngMock also extends various core ng services such that they can be
* inspected and controlled in a synchronous manner within test code. * inspected and controlled in a synchronous manner within test code.
* *
* {@installModule mock} * {@installModule mocks}
* *
* <div doc-module-components="ngMock"></div> * <div doc-module-components="ngMock"></div>
* *
@ -1948,7 +1947,7 @@ if(window.jasmine || window.mocha) {
var currentSpec = null, var currentSpec = null,
isSpecRunning = function() { isSpecRunning = function() {
return !!currentSpec; return currentSpec && (window.mocha || currentSpec.queue.running);
}; };
@ -2139,8 +2138,9 @@ if(window.jasmine || window.mocha) {
} }
for(var i = 0, ii = blockFns.length; i < ii; i++) { for(var i = 0, ii = blockFns.length; i < ii; i++) {
try { try {
// jasmine sets this to be the current spec, so we are mimicing that /* jshint -W040 *//* Jasmine explicitly provides a `this` object when calling functions */
injector.invoke(blockFns[i] || angular.noop, currentSpec); injector.invoke(blockFns[i] || angular.noop, this);
/* jshint +W040 */
} catch (e) { } catch (e) {
if (e.stack && errorForStack) { if (e.stack && errorForStack) {
throw new ErrorAddingDeclarationLocationStack(e, errorForStack); throw new ErrorAddingDeclarationLocationStack(e, errorForStack);

View file

@ -35,7 +35,7 @@ function shallowClearAndCopy(src, dst) {
}); });
for (var key in src) { for (var key in src) {
if (src.hasOwnProperty(key) && !(key.charAt(0) === '$' && key.charAt(1) === '$')) { if (src.hasOwnProperty(key) && key.charAt(0) !== '$' && key.charAt(1) !== '$') {
dst[key] = src[key]; dst[key] = src[key];
} }
} }
@ -387,9 +387,7 @@ angular.module('ngResource', ['ng']).
val = params.hasOwnProperty(urlParam) ? params[urlParam] : self.defaults[urlParam]; val = params.hasOwnProperty(urlParam) ? params[urlParam] : self.defaults[urlParam];
if (angular.isDefined(val) && val !== null) { if (angular.isDefined(val) && val !== null) {
encodedVal = encodeUriSegment(val); encodedVal = encodeUriSegment(val);
url = url.replace(new RegExp(":" + urlParam + "(\\W|$)", "g"), function(match, p1) { url = url.replace(new RegExp(":" + urlParam + "(\\W|$)", "g"), encodedVal + "$1");
return encodedVal + p1;
});
} else { } else {
url = url.replace(new RegExp("(\/?):" + urlParam + "(\\W|$)", "g"), function(match, url = url.replace(new RegExp("(\/?):" + urlParam + "(\\W|$)", "g"), function(match,
leadingSlashes, tail) { leadingSlashes, tail) {

View file

@ -151,17 +151,16 @@ ngRouteModule.directive('ngView', ngViewFillContentFactory);
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should load and compile correct template', function() { it('should load and compile correct template', function() {
element(by.linkText('Moby: Ch1')).click(); element('a:contains("Moby: Ch1")').click();
var content = element(by.css('.doc-example-live [ng-view]')).getText(); var content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: ChapterCntl/); expect(content).toMatch(/controller\: ChapterCntl/);
expect(content).toMatch(/Book Id\: Moby/); expect(content).toMatch(/Book Id\: Moby/);
expect(content).toMatch(/Chapter Id\: 1/); expect(content).toMatch(/Chapter Id\: 1/);
element(by.partialLinkText('Scarlet')).click(); element('a:contains("Scarlet")').click();
content = element('.doc-example-live [ng-view]').text();
content = element(by.css('.doc-example-live [ng-view]')).getText();
expect(content).toMatch(/controller\: BookCntl/); expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/); expect(content).toMatch(/Book Id\: Scarlet/);
}); });

View file

@ -185,7 +185,7 @@ function $RouteProvider(){
path = path path = path
.replace(/([().])/g, '\\$1') .replace(/([().])/g, '\\$1')
.replace(/(\/)?:(\w+)([\?\*])?/g, function(_, slash, key, option){ .replace(/(\/)?:(\w+)([\?|\*])?/g, function(_, slash, key, option){
var optional = option === '?' ? option : null; var optional = option === '?' ? option : null;
var star = option === '*' ? option : null; var star = option === '*' ? option : null;
keys.push({ name: key, optional: !!optional }); keys.push({ name: key, optional: !!optional });
@ -345,17 +345,17 @@ function $RouteProvider(){
} }
</file> </file>
<file name="protractorTest.js"> <file name="scenario.js">
it('should load and compile correct template', function() { it('should load and compile correct template', function() {
element(by.linkText('Moby: Ch1')).click(); element('a:contains("Moby: Ch1")').click();
var content = element(by.css('.doc-example-live [ng-view]')).getText(); var content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: ChapterCntl/); expect(content).toMatch(/controller\: ChapterCntl/);
expect(content).toMatch(/Book Id\: Moby/); expect(content).toMatch(/Book Id\: Moby/);
expect(content).toMatch(/Chapter Id\: 1/); expect(content).toMatch(/Chapter Id\: 1/);
element(by.partialLinkText('Scarlet')).click(); element('a:contains("Scarlet")').click();
sleep(2); // promises are not part of scenario waiting
content = element(by.css('.doc-example-live [ng-view]')).getText(); content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: BookCntl/); expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/); expect(content).toMatch(/Book Id\: Scarlet/);
}); });
@ -370,7 +370,7 @@ function $RouteProvider(){
* @eventType broadcast on root scope * @eventType broadcast on root scope
* @description * @description
* Broadcasted before a route change. At this point the route services starts * Broadcasted before a route change. At this point the route services starts
* resolving all of the dependencies needed for the route change to occur. * resolving all of the dependencies needed for the route change to occurs.
* Typically this involves fetching the view template as well as any dependencies * Typically this involves fetching the view template as well as any dependencies
* defined in `resolve` route property. Once all of the dependencies are resolved * defined in `resolve` route property. Once all of the dependencies are resolved
* `$routeChangeSuccess` is fired. * `$routeChangeSuccess` is fired.

View file

@ -67,38 +67,37 @@
</tr> </tr>
</table> </table>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should linkify the snippet with urls', function() { it('should linkify the snippet with urls', function() {
expect(element(by.id('linky-filter')).element(by.binding('snippet | linky')).getText()). expect(using('#linky-filter').binding('snippet | linky')).
toBe('Pretty text with some links: http://angularjs.org/, us@somewhere.org, ' + toBe('Pretty text with some links:&#10;' +
'another@somewhere.org, and one more: ftp://127.0.0.1/.'); '<a href="http://angularjs.org/">http://angularjs.org/</a>,&#10;' +
expect(element.all(by.css('#linky-filter a')).count()).toEqual(4); '<a href="mailto:us@somewhere.org">us@somewhere.org</a>,&#10;' +
'<a href="mailto:another@somewhere.org">another@somewhere.org</a>,&#10;' +
'and one more: <a href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>.');
}); });
it('should not linkify snippet without the linky filter', function() { it ('should not linkify snippet without the linky filter', function() {
expect(element(by.id('escaped-html')).element(by.binding('snippet')).getText()). expect(using('#escaped-html').binding('snippet')).
toBe('Pretty text with some links: http://angularjs.org/, mailto:us@somewhere.org, ' + toBe("Pretty text with some links:\n" +
'another@somewhere.org, and one more: ftp://127.0.0.1/.'); "http://angularjs.org/,\n" +
expect(element.all(by.css('#escaped-html a')).count()).toEqual(0); "mailto:us@somewhere.org,\n" +
"another@somewhere.org,\n" +
"and one more: ftp://127.0.0.1/.");
}); });
it('should update', function() { it('should update', function() {
element(by.model('snippet')).clear(); input('snippet').enter('new http://link.');
element(by.model('snippet')).sendKeys('new http://link.'); expect(using('#linky-filter').binding('snippet | linky')).
expect(element(by.id('linky-filter')).element(by.binding('snippet | linky')).getText()). toBe('new <a href="http://link">http://link</a>.');
toBe('new http://link.'); expect(using('#escaped-html').binding('snippet')).toBe('new http://link.');
expect(element.all(by.css('#linky-filter a')).count()).toEqual(1);
expect(element(by.id('escaped-html')).element(by.binding('snippet')).getText())
.toBe('new http://link.');
}); });
it('should work with the target property', function() { it('should work with the target property', function() {
expect(element(by.id('linky-target')). expect(using('#linky-target').binding("snippetWithTarget | linky:'_blank'")).
element(by.binding("snippetWithTarget | linky:'_blank'")).getText()). toBe('<a target="_blank" href="http://angularjs.org/">http://angularjs.org/</a>');
toBe('http://angularjs.org/');
expect(element(by.css('#linky-target a')).getAttribute('target')).toEqual('_blank');
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
angular.module('ngSanitize').filter('linky', ['$sanitize', function($sanitize) { angular.module('ngSanitize').filter('linky', ['$sanitize', function($sanitize) {

View file

@ -99,37 +99,35 @@ var $sanitizeMinErr = angular.$$minErr('$sanitize');
</table> </table>
</div> </div>
</doc:source> </doc:source>
<doc:protractor> <doc:scenario>
it('should sanitize the html snippet by default', function() { it('should sanitize the html snippet by default', function() {
expect(element(by.css('#bind-html-with-sanitize div')).getInnerHtml()). expect(using('#bind-html-with-sanitize').element('div').html()).
toBe('<p>an html\n<em>click here</em>\nsnippet</p>'); toBe('<p>an html\n<em>click here</em>\nsnippet</p>');
}); });
it('should inline raw snippet if bound to a trusted value', function() { it('should inline raw snippet if bound to a trusted value', function() {
expect(element(by.css('#bind-html-with-trust div')).getInnerHtml()). expect(using('#bind-html-with-trust').element("div").html()).
toBe("<p style=\"color:blue\">an html\n" + toBe("<p style=\"color:blue\">an html\n" +
"<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" + "<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" +
"snippet</p>"); "snippet</p>");
}); });
it('should escape snippet without any filter', function() { it('should escape snippet without any filter', function() {
expect(element(by.css('#bind-default div')).getInnerHtml()). expect(using('#bind-default').element('div').html()).
toBe("&lt;p style=\"color:blue\"&gt;an html\n" + toBe("&lt;p style=\"color:blue\"&gt;an html\n" +
"&lt;em onmouseover=\"this.textContent='PWN3D!'\"&gt;click here&lt;/em&gt;\n" + "&lt;em onmouseover=\"this.textContent='PWN3D!'\"&gt;click here&lt;/em&gt;\n" +
"snippet&lt;/p&gt;"); "snippet&lt;/p&gt;");
}); });
it('should update', function() { it('should update', function() {
element(by.model('snippet')).clear(); input('snippet').enter('new <b onclick="alert(1)">text</b>');
element(by.model('snippet')).sendKeys('new <b onclick="alert(1)">text</b>'); expect(using('#bind-html-with-sanitize').element('div').html()).toBe('new <b>text</b>');
expect(element(by.css('#bind-html-with-sanitize div')).getInnerHtml()). expect(using('#bind-html-with-trust').element('div').html()).toBe(
toBe('new <b>text</b>');
expect(element(by.css('#bind-html-with-trust div')).getInnerHtml()).toBe(
'new <b onclick="alert(1)">text</b>'); 'new <b onclick="alert(1)">text</b>');
expect(element(by.css('#bind-default div')).getInnerHtml()).toBe( expect(using('#bind-default').element('div').html()).toBe(
"new &lt;b onclick=\"alert(1)\"&gt;text&lt;/b&gt;"); "new &lt;b onclick=\"alert(1)\"&gt;text&lt;/b&gt;");
}); });
</doc:protractor> </doc:scenario>
</doc:example> </doc:example>
*/ */
function $SanitizeProvider() { function $SanitizeProvider() {

View file

@ -190,7 +190,7 @@ describe('angular', function() {
expect(copy.key).toBe(original.key); expect(copy.key).toBe(original.key);
}); });
it('should omit "$$"-prefixed properties', function() { it('should not copy $$ properties nor prototype properties', function() {
var original = {$$some: true, $$: true}; var original = {$$some: true, $$: true};
var clone = {}; var clone = {};
@ -198,27 +198,6 @@ describe('angular', function() {
expect(clone.$$some).toBeUndefined(); expect(clone.$$some).toBeUndefined();
expect(clone.$$).toBeUndefined(); expect(clone.$$).toBeUndefined();
}); });
it('should copy "$"-prefixed properties from copy', function() {
var original = {$some: true};
var clone = {};
expect(shallowCopy(original, clone)).toBe(clone);
expect(clone.$some).toBe(original.$some);
});
it('should omit properties from prototype chain', function() {
var original, clone = {};
function Func() {};
Func.prototype.hello = "world";
original = new Func();
original.goodbye = "world";
expect(shallowCopy(original, clone)).toBe(clone);
expect(clone.hello).toBeUndefined();
expect(clone.goodbye).toBe("world");
});
}); });
describe('elementHTML', function() { describe('elementHTML', function() {

View file

@ -65,17 +65,6 @@ describe('jqLite', function() {
}); });
it('should allow construction of html with leading whitespace', function() {
var nodes = jqLite(' \n\r \r\n<div>1</div><span>2</span>');
expect(nodes[0].parentNode).toBeDefined();
expect(nodes[0].parentNode.nodeType).toBe(11); /** Document Fragment **/;
expect(nodes[0].parentNode).toBe(nodes[1].parentNode);
expect(nodes.length).toBe(2);
expect(nodes[0].innerHTML).toBe('1');
expect(nodes[1].innerHTML).toBe('2');
});
it('should allow creation of comment tags', function() { it('should allow creation of comment tags', function() {
var nodes = jqLite('<!-- foo -->'); var nodes = jqLite('<!-- foo -->');
expect(nodes.length).toBe(1); expect(nodes.length).toBe(1);

Some files were not shown because too many files have changed in this diff Show more