Compare commits
49 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c3c5c5eea2 | |||
| 4cc7701700 | |||
| 5dc07667de | |||
| 212e5132ab | |||
| 00162655e7 | |||
| 09f1325065 | |||
| c01dad694d | |||
| c4586513d1 | |||
| 7a1270cf4b | |||
| 559e93c7ce | |||
| 9d058de04b | |||
| 1d826e2f1e | |||
| 5789094546 | |||
| cf92c33a32 | |||
| 5d8f5a8be7 | |||
| 74a2808487 | |||
| 9ba181b80f | |||
| 44c16b5b51 | |||
| 70a42fcaee | |||
| 3bd62d2d59 | |||
| b9ef6585e1 | |||
| e06b4fb62c | |||
| 9204a1a153 | |||
| f4d49f3769 | |||
| d5c35b44d7 | |||
| 551375c736 | |||
| 17691790e9 | |||
| e47dead052 | |||
| 1a2532601b | |||
| cb862aaaa0 | |||
| fa2034c167 | |||
| 750b43b6f6 | |||
| 048f5e3ab8 | |||
| 13c566cc03 | |||
| 45834eac09 | |||
| 3673909896 | |||
| 8302981a08 | |||
| d2a7b5162f | |||
| 2ecd85b989 | |||
| 2bdf712687 | |||
| 0de02973c1 | |||
| 55516da2df | |||
| e8adbf8d5a | |||
| c169c60535 | |||
| 0b6ec6b3ab | |||
| d2511cfac0 | |||
| 155efa421b | |||
| f33d95cfcf | |||
| 57b626a673 |
+1
-1
@@ -1,4 +1,3 @@
|
||||
bower_components/**
|
||||
build/**
|
||||
docs/bower_components/**
|
||||
docs/app/assets/js/angular-bootstrap/**
|
||||
@@ -9,3 +8,4 @@ src/angular.bind.js
|
||||
src/ngParseExt/ucd.js
|
||||
i18n/closure/**
|
||||
tmp/**
|
||||
vendor/**
|
||||
|
||||
+1
-3
@@ -10,7 +10,6 @@ performance/temp*.html
|
||||
*.swp
|
||||
angular.js.tmproj
|
||||
node_modules/
|
||||
bower_components/
|
||||
angular.xcodeproj
|
||||
.idea
|
||||
*.iml
|
||||
@@ -19,7 +18,6 @@ angular.xcodeproj
|
||||
libpeerconnection.log
|
||||
npm-debug.log
|
||||
/tmp/
|
||||
/scripts/bower/bower-*
|
||||
.vscode
|
||||
*.log
|
||||
*.stackdump
|
||||
*.stackdump
|
||||
|
||||
+6
-7
@@ -1,12 +1,10 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
node_js:
|
||||
- '6'
|
||||
- '8'
|
||||
|
||||
cache:
|
||||
yarn: true
|
||||
directories:
|
||||
- bower_components
|
||||
|
||||
branches:
|
||||
except:
|
||||
@@ -28,11 +26,11 @@ env:
|
||||
- secure: oTBjhnOKhs0qDSKTf7fE4f6DYiNDPycvB7qfSF5QRIbJK/LK/J4UtFwetXuXj79HhUZG9qnoT+5e7lPaiaMlpsIKn9ann7ffqFWN1E8TMtpJF+AGigx3djYElwfgf5nEnFUFhwjFzvbfpZNnxVGgX5YbIZpe/WUbHkP4ffU0Wks=
|
||||
|
||||
before_install:
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
|
||||
- export PATH="$HOME/.yarn/bin:$PATH"
|
||||
|
||||
before_script:
|
||||
- du -sh ./node_modules ./bower_components/ || true
|
||||
- du -sh ./node_modules || true
|
||||
- "./scripts/travis/before_build.sh"
|
||||
|
||||
script:
|
||||
@@ -54,10 +52,10 @@ notifications:
|
||||
jobs:
|
||||
include:
|
||||
- stage: deploy
|
||||
# Don't deploy from PRs and only from our default branches.
|
||||
# Don't deploy from PRs. Only deploy from our default branches, or if commit is tagged.
|
||||
# This is a Travis-specific boolean language: https://docs.travis-ci.com/user/conditional-builds-stages-jobs#Specifying-conditions
|
||||
# The deployment logic for pushed branches is further defined in scripts\travis\build.sh
|
||||
if: type != pull_request and branch =~ ^(v1\.\d+\.x|master)$
|
||||
if: type != pull_request and (branch =~ ^(v1\.\d+\.x|master)$ or tag IS present)
|
||||
env:
|
||||
- JOB=deploy
|
||||
before_script: skip
|
||||
@@ -84,6 +82,7 @@ jobs:
|
||||
- provider: firebase
|
||||
# the upload folder for firebase is configured in /firebase.json
|
||||
skip_cleanup: true
|
||||
project: docs-angularjs-org-9p2
|
||||
token:
|
||||
secure: $FIREBASE_TOKEN
|
||||
on:
|
||||
|
||||
@@ -1,3 +1,53 @@
|
||||
<a name="1.6.9"></a>
|
||||
# 1.6.9 fiery-basilisk (2018-02-02)
|
||||
|
||||
|
||||
## Bug Fixes
|
||||
- **input:** add `drop` event support for IE
|
||||
([5dc076](https://github.com/angular/angular.js/commit/5dc07667de00c5e85fd69c5b7b7fe4fb5fd65a77))
|
||||
- **ngMessages:** prevent memory leak from messages that are never attached
|
||||
([9d058d](https://github.com/angular/angular.js/commit/9d058de04bb78694b83179e9b97bc40214eca01a),
|
||||
[#16389](https://github.com/angular/angular.js/issues/16389),
|
||||
[#16404](https://github.com/angular/angular.js/issues/16404),
|
||||
[#16406](https://github.com/angular/angular.js/issues/16406))
|
||||
- **ngTransclude:** remove terminal: true
|
||||
([1d826e](https://github.com/angular/angular.js/commit/1d826e2f1e941d14c3c56d7a0249f5796ba11f85),
|
||||
[#16411](https://github.com/angular/angular.js/issues/16411),
|
||||
[#16412](https://github.com/angular/angular.js/issues/16412))
|
||||
- **$sanitize:** sanitize `xml:base` attributes
|
||||
([b9ef65](https://github.com/angular/angular.js/commit/b9ef6585e10477fbbf912a971fe0b390bca692a6))
|
||||
|
||||
|
||||
## New Features
|
||||
- **currencyFilter:** trim whitespace around an empty currency symbol
|
||||
([367390](https://github.com/angular/angular.js/commit/3673909896efb6ff47546caf7fc61549f193e043),
|
||||
[#15018](https://github.com/angular/angular.js/issues/15018),
|
||||
[#15085](https://github.com/angular/angular.js/issues/15085),
|
||||
[#15105](https://github.com/angular/angular.js/issues/15105))
|
||||
|
||||
|
||||
<a name="1.6.8"></a>
|
||||
# 1.6.8 beneficial-tincture (2017-12-18)
|
||||
|
||||
|
||||
## Bug Fixes
|
||||
- **$location:**
|
||||
- always decode special chars in `$location.url(value)`
|
||||
([2bdf71](https://github.com/angular/angular.js/commit/2bdf7126878c87474bb7588ce093d0a3c57b0026))
|
||||
- decode non-component special chars in Hashbang URLS
|
||||
([57b626](https://github.com/angular/angular.js/commit/57b626a673b7530399d3377dfe770165bec35f8a))
|
||||
- **ngModelController:** allow $overrideModelOptions to set updateOn
|
||||
([55516d](https://github.com/angular/angular.js/commit/55516da2dfc7c5798dce24e9fa930c5ac90c900c),
|
||||
[#16351](https://github.com/angular/angular.js/issues/16351),
|
||||
[#16364](https://github.com/angular/angular.js/issues/16364))
|
||||
|
||||
|
||||
## New Features
|
||||
- **$parse:** add a hidden interface to retrieve an expression's AST
|
||||
([f33d95](https://github.com/angular/angular.js/commit/f33d95cfcff6fd0270f92a142df8794cca2013ad),
|
||||
[#16253](https://github.com/angular/angular.js/issues/16253),
|
||||
[#16260](https://github.com/angular/angular.js/issues/16260))
|
||||
|
||||
<a name="1.6.7"></a>
|
||||
# 1.6.7 imperial-backstroke (2017-11-24)
|
||||
|
||||
|
||||
+1
-1
@@ -49,6 +49,7 @@ If you find a bug in the source code, you can help us by submitting an issue to
|
||||
**Special Note for Localization Issues:** AngularJS uses the [Google Closure I18N library] to
|
||||
generate its own I18N files (the ngLocale module). This means that any changes to these files
|
||||
would be lost the next time that we import the library.
|
||||
|
||||
Since the Closure library i18n data is itself auto-generated from the data of the
|
||||
[Common Locale Data Repository (CLDR)] project, errors in the data should
|
||||
be reported there. See also the [Closure guide to i18n changes].
|
||||
@@ -164,7 +165,6 @@ restarted.
|
||||
* Re-run the AngularJS test suite to ensure tests are still passing.
|
||||
* Commit your changes to your branch (e.g. `my-fix-branch`).
|
||||
* Push the changes to your GitHub repository (this will update your Pull Request).
|
||||
|
||||
You can also amend the initial commits and force push them to the branch.
|
||||
|
||||
```shell
|
||||
|
||||
+13
-10
@@ -1,6 +1,7 @@
|
||||
# Developing AngularJS
|
||||
|
||||
* [Development Setup](#setup)
|
||||
* [Running Tests](#tests)
|
||||
* [Coding Rules](#rules)
|
||||
* [Commit Message Guidelines](#commits)
|
||||
* [Writing Documentation](#documentation)
|
||||
@@ -8,7 +9,7 @@
|
||||
## <a name="setup"> Development Setup
|
||||
|
||||
This document describes how to set up your development environment to build and test AngularJS, and
|
||||
explains the basic mechanics of using `git`, `node`, `yarn`, `grunt`, and `bower`.
|
||||
explains the basic mechanics of using `git`, `node`, `yarn` and `grunt`.
|
||||
|
||||
### Installing Dependencies
|
||||
|
||||
@@ -18,7 +19,7 @@ machine:
|
||||
* [Git](http://git-scm.com/): The [Github Guide to
|
||||
Installing Git][git-setup] is a good source of information.
|
||||
|
||||
* [Node.js v6.x (LTS)](http://nodejs.org): We use Node to generate the documentation, run a
|
||||
* [Node.js v8.x (LTS)](http://nodejs.org): We use Node to generate the documentation, run a
|
||||
development web server, run tests, and generate distributable files. Depending on your system,
|
||||
you can install Node either from source or as a pre-packaged bundle.
|
||||
|
||||
@@ -63,10 +64,10 @@ cd angular.js
|
||||
# Add the main AngularJS repository as an upstream remote to your repository:
|
||||
git remote add upstream "https://github.com/angular/angular.js.git"
|
||||
|
||||
# Install node.js dependencies:
|
||||
# Install JavaScript dependencies:
|
||||
yarn install
|
||||
|
||||
# Build AngularJS (which will install `bower` dependencies automatically):
|
||||
# Build AngularJS:
|
||||
yarn grunt package
|
||||
```
|
||||
|
||||
@@ -107,6 +108,8 @@ HTTP server. For this purpose, we have made available a local web server based o
|
||||
http://localhost:8000/build/docs/
|
||||
```
|
||||
|
||||
## <a name="tests"> Running Tests
|
||||
|
||||
### <a name="unit-tests"></a> Running the Unit Test Suite
|
||||
|
||||
We write unit and integration tests with Jasmine and execute them with Karma. To run all of the
|
||||
@@ -116,7 +119,7 @@ tests once on Chrome run:
|
||||
yarn grunt test:unit
|
||||
```
|
||||
|
||||
To run the tests on other browsers (Chrome, ChromeCanary, Firefox and Safari are pre-configured) use:
|
||||
To run the tests on other browsers use the command line flag:
|
||||
|
||||
```shell
|
||||
yarn grunt test:unit --browsers=Chrome,Firefox
|
||||
@@ -125,15 +128,15 @@ yarn grunt test:unit --browsers=Chrome,Firefox
|
||||
**Note:** there should be _no spaces between browsers_. `Chrome, Firefox` is INVALID.
|
||||
|
||||
If you have a Saucelabs or Browserstack account, you can also run the unit tests on these services
|
||||
via our pre-defined customLaunchers.
|
||||
via our pre-defined customLaunchers. See the [karma config file](/karma-shared.conf.js) for all pre-configured browsers.
|
||||
|
||||
For example, to run the whole unit test suite:
|
||||
For example, to run the whole unit test suite on selected browsers:
|
||||
|
||||
```shell
|
||||
# Browserstack
|
||||
yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari,BS_IE_9,BS_IE_10,BS_IE_11,BS_EDGE,BS_iOS_8,BS_iOS_9,BS_iOS_10
|
||||
yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari,BS_IE_9,BS_IE_10,BS_IE_11,BS_EDGE,BS_iOS_10
|
||||
# Saucelabs
|
||||
yarn grunt test:unit --browsers=BS_Chrome,BS_Firefox,BS_Safari,BS_IE_9,BS_IE_10,BS_IE_11,BS_EDGE,BS_iOS_8,BS_iOS_9,BS_iOS_10
|
||||
yarn grunt test:unit --browsers=SL_Chrome,SL_Firefox,SL_Safari,SL_IE_9,SL_IE_10,SL_IE_11,SL_EDGE,SL_iOS_10
|
||||
```
|
||||
|
||||
Running these commands requires you to set up [Karma Browserstack][karma-browserstack] or
|
||||
@@ -483,4 +486,4 @@ You can see an example of a well-defined example [in the `ngRepeat` documentatio
|
||||
[karma-browserstack]: https://github.com/karma-runner/karma-browserstack-launcher
|
||||
[karma-saucelabs]: https://github.com/karma-runner/karma-sauce-launcher
|
||||
[unit-testing]: https://docs.angularjs.org/guide/unit-testing
|
||||
[yarn-install]: https://yarnpkg.com/en/docs/install
|
||||
[yarn-install]: https://yarnpkg.com/en/docs/install
|
||||
|
||||
+19
-4
@@ -324,11 +324,22 @@ module.exports = function(grunt) {
|
||||
}
|
||||
]
|
||||
},
|
||||
deployFirebaseCode: {
|
||||
files: [
|
||||
// the zip file should not be compressed again.
|
||||
{
|
||||
src: 'build/*.zip',
|
||||
dest: 'uploadCode/' + deployVersion + '/',
|
||||
expand: true,
|
||||
flatten: true
|
||||
}
|
||||
]
|
||||
},
|
||||
deployFirebaseDocs: {
|
||||
files: [
|
||||
// The source files are needed by the embedded examples in the docs app.
|
||||
{
|
||||
src: 'build/angular*.{js.map,min.js}',
|
||||
src: 'build/angular*.{js,js.map,min.js}',
|
||||
dest: 'uploadDocs/',
|
||||
expand: true,
|
||||
flatten: true
|
||||
@@ -357,7 +368,7 @@ module.exports = function(grunt) {
|
||||
options: {
|
||||
mode: 'gzip'
|
||||
},
|
||||
src: ['**'],
|
||||
src: ['**', '!*.zip'],
|
||||
cwd: 'build',
|
||||
expand: true,
|
||||
dest: 'uploadCode/' + deployVersion + '/'
|
||||
@@ -365,6 +376,10 @@ module.exports = function(grunt) {
|
||||
},
|
||||
|
||||
shell: {
|
||||
// Travis expects the firebase.json in the repository root, but we have it in a sub-folder
|
||||
'symlink-firebase-docs': {
|
||||
command: 'ln -s ./scripts/docs.angularjs.org-firebase/firebase.json ./firebase.json'
|
||||
},
|
||||
'install-node-dependencies': {
|
||||
command: 'yarn'
|
||||
},
|
||||
@@ -439,14 +454,12 @@ module.exports = function(grunt) {
|
||||
'shell:promises-aplus-tests'
|
||||
]);
|
||||
grunt.registerTask('minify', [
|
||||
'bower',
|
||||
'clean',
|
||||
'build',
|
||||
'minall'
|
||||
]);
|
||||
grunt.registerTask('webserver', ['connect:devserver']);
|
||||
grunt.registerTask('package', [
|
||||
'bower',
|
||||
'validate-angular-files',
|
||||
'clean',
|
||||
'buildall',
|
||||
@@ -465,6 +478,8 @@ module.exports = function(grunt) {
|
||||
grunt.registerTask('prepareFirebaseDeploy', [
|
||||
'package',
|
||||
'compress:deployFirebaseCode',
|
||||
'copy:deployFirebaseCode',
|
||||
'firebaseDocsJsonForTravis',
|
||||
'copy:deployFirebaseDocs'
|
||||
]);
|
||||
grunt.registerTask('default', ['package']);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2010-2017 Google, Inc. http://angularjs.org
|
||||
Copyright (c) 2010-2018 Google, Inc. http://angularjs.org
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ 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:
|
||||
AngularJS's $scope objects can be annotated as:
|
||||
```js
|
||||
/** @type {angular.Scope} */
|
||||
var scope = $scope;
|
||||
|
||||
@@ -20,7 +20,7 @@ piece of cake. Best of all? It makes development fun!
|
||||
* Core Development: [DEVELOPERS.md](DEVELOPERS.md)
|
||||
* Dashboard: https://dashboard.angularjs.org
|
||||
|
||||
##### Looking for Angular 2? Go here: https://github.com/angular/angular
|
||||
##### Looking for the new Angular? Go here: https://github.com/angular/angular
|
||||
|
||||
Documentation
|
||||
--------------------
|
||||
@@ -72,7 +72,7 @@ HTML is also used to determine the wiring of the app. Special attributes in the
|
||||
to load the app, which components or controllers to use for each element, etc. We specify "what"
|
||||
gets loaded, but not "how". This declarative approach greatly simplifies app development in a sort
|
||||
of WYSIWYG way. Rather than spending time on how the program flows and orchestrating the various
|
||||
moving parts, we simply define what we want and Angular will take care of the dependencies.
|
||||
moving parts, we simply define what we want and AngularJS will take care of the dependencies.
|
||||
|
||||
#### Data Handling made simple
|
||||
Data and Data Models in AngularJS are plain JavaScript objects and one can add and change properties
|
||||
|
||||
+4
-4
@@ -1,6 +1,6 @@
|
||||
# Triage new issues/PRs on github
|
||||
|
||||
This document shows the steps the Angular team is using to triage issues.
|
||||
This document shows the steps the AngularJS team is using to triage issues.
|
||||
The labels are used later on for [planning releases](#assigning-work).
|
||||
|
||||
|
||||
@@ -45,12 +45,12 @@ This process based on the idea of minimizing user pain
|
||||
1. Label `frequency: *` – How often does this issue come up? How many developers does this affect? Chose just one of the following:
|
||||
* low - obscure issue affecting a handful of developers
|
||||
* moderate - impacts a common usage pattern
|
||||
* high - impacts most or all Angular apps
|
||||
* high - impacts most or all AngularJS apps
|
||||
1. Label `severity: *` - How bad is the issue? Chose just one of the following:
|
||||
* security issue
|
||||
* regression
|
||||
* memory leak
|
||||
* broken expected use - it's hard or impossible for a developer using Angular to accomplish something that Angular should be able to do
|
||||
* broken expected use - it's hard or impossible for a developer using AngularJS to accomplish something that AngularJS should be able to do
|
||||
* confusing - unexpected or inconsistent behavior; hard-to-debug
|
||||
* inconvenience - causes ugly/boilerplate code in apps
|
||||
1. Label `component: *`
|
||||
@@ -95,7 +95,7 @@ You can mention him in the relevant thread like this: `@btford`.
|
||||
|
||||
> Thanks for submitting this issue!
|
||||
> Unfortunately, we don't think this functionality belongs in core.
|
||||
> The good news is that you could easily implement this as a third-party module and publish it on Bower and/or to the npm repository.
|
||||
> The good news is that you could easily implement this as a third-party module and publish it to the npm registry.
|
||||
|
||||
|
||||
## Assigning Work
|
||||
|
||||
Vendored
+4
-4
@@ -190,7 +190,7 @@ var angularFiles = {
|
||||
],
|
||||
|
||||
'karma': [
|
||||
'bower_components/jquery/dist/jquery.js',
|
||||
'node_modules/jquery/dist/jquery.js',
|
||||
'test/jquery_remove.js',
|
||||
'@angularSrc',
|
||||
'@angularSrcModules',
|
||||
@@ -228,7 +228,7 @@ var angularFiles = {
|
||||
],
|
||||
|
||||
'karmaJquery': [
|
||||
'bower_components/jquery/dist/jquery.js',
|
||||
'node_modules/jquery/dist/jquery.js',
|
||||
'test/jquery_alias.js',
|
||||
'@angularSrc',
|
||||
'@angularSrcModules',
|
||||
@@ -248,8 +248,8 @@ var angularFiles = {
|
||||
angularFiles['karmaJquery' + jQueryVersion] = []
|
||||
.concat(angularFiles.karmaJquery)
|
||||
.map(function(path) {
|
||||
if (path.startsWith('bower_components/jquery')) {
|
||||
return path.replace(/^bower_components\/jquery/, 'bower_components/jquery-' + jQueryVersion);
|
||||
if (path.startsWith('node_modules/jquery')) {
|
||||
return path.replace(/^node_modules\/jquery/, 'node_modules/jquery-' + jQueryVersion);
|
||||
}
|
||||
return path;
|
||||
});
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
|
||||
// Override me with ?jquery=/node_modules/jquery/dist/jquery.js
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
|
||||
// Override me with ?jquery=/node_modules/jquery/dist/jquery.js
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
|
||||
// Override me with ?jquery=/node_modules/jquery/dist/jquery.js
|
||||
|
||||
-11
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"name": "angularjs",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"jquery": "3.2.1",
|
||||
"jquery-2.2": "jquery#2.2.4",
|
||||
"jquery-2.1": "jquery#2.1.4",
|
||||
"closure-compiler": "https://dl.google.com/closure-compiler/compiler-20140814.zip",
|
||||
"ng-closure-runner": "https://raw.github.com/angular/ng-closure-runner/v0.2.4/assets/ng-closure-runner.zip"
|
||||
}
|
||||
}
|
||||
@@ -4,14 +4,13 @@ var path = require('canonical-path');
|
||||
/**
|
||||
* dgService getVersion
|
||||
* @description
|
||||
* Find the current version of the bower component (or node module)
|
||||
* Find the current version of the node module
|
||||
*/
|
||||
module.exports = function getVersion(readFilesProcessor) {
|
||||
var basePath = readFilesProcessor.basePath;
|
||||
var sourceFolder = path.resolve(readFilesProcessor.basePath, 'node_modules');
|
||||
var packageFile = 'package.json';
|
||||
|
||||
return function(component, sourceFolder, packageFile) {
|
||||
sourceFolder = path.resolve(basePath, sourceFolder || 'node_modules');
|
||||
packageFile = packageFile || 'package.json';
|
||||
return require(path.join(sourceFolder,component,packageFile)).version;
|
||||
return function(component) {
|
||||
return require(path.join(sourceFolder, component, packageFile)).version;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -209,10 +209,10 @@
|
||||
<p class="pull-right"><a back-to-top>Back to top</a></p>
|
||||
|
||||
<p>
|
||||
Super-powered by Google ©2010-2017
|
||||
Super-powered by Google ©2010-2018
|
||||
(<a id="version"
|
||||
ng-href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
|
||||
ng-bind-template="v{{version}}" title="Changelog of this version of Angular JS">
|
||||
ng-bind-template="v{{version}}" title="Changelog of this version of AngularJS">
|
||||
</a>)
|
||||
</p>
|
||||
<p>
|
||||
|
||||
@@ -11,14 +11,14 @@ These components are {@link guide/directive directives}, {@link guide/services s
|
||||
There is also a {@link guide/index guide} with articles on various topics, and a list of external resources.
|
||||
|
||||
<div class="alert alert-info">
|
||||
**Angular Prefixes `$` and `$$`**:
|
||||
**AngularJS Prefixes `$` and `$$`**:
|
||||
|
||||
To prevent accidental name collisions with your code,
|
||||
Angular prefixes names of public objects with `$` and names of private objects with `$$`.
|
||||
AngularJS prefixes names of public objects with `$` and names of private objects with `$$`.
|
||||
Please do not use the `$` or `$$` prefix in your code.
|
||||
</div>
|
||||
|
||||
## Angular Modules
|
||||
## AngularJS Modules
|
||||
|
||||
|
||||
## {@link ng ng (core module)}
|
||||
@@ -83,7 +83,7 @@ This module is provided by default and contains the core components of AngularJS
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
The core global API functions are attached to the angular object. These core functions are useful for low level JavaScript operations within your application.
|
||||
The core global API functions are attached to the `angular` object. These core functions are useful for low level JavaScript operations within your application.
|
||||
</p>
|
||||
<p>
|
||||
Some examples include:
|
||||
@@ -130,7 +130,7 @@ Use ngRoute to enable URL routing to your application. The ngRoute module suppor
|
||||
|
||||
## {@link ngAnimate ngAnimate}
|
||||
|
||||
Use ngAnimate to enable animation features within your application. Various core ng directives will provide
|
||||
Use ngAnimate to enable animation features within your application. Various core AngularJS directives will provide
|
||||
animation hooks into your application when ngAnimate is included. Animations are defined by using CSS transitions/animations
|
||||
or JavaScript callbacks.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
This error occurs when the application's model becomes unstable because some `$onChanges` hooks are causing updates which then trigger
|
||||
further calls to `$onChanges` that can never complete.
|
||||
Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
|
||||
AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
|
||||
|
||||
For example, the situation can occur by setting up a `$onChanges()` hook which triggers an event on the component, which subsequently
|
||||
triggers the component's bound inputs to be updated:
|
||||
|
||||
@@ -11,7 +11,7 @@ value is `JSON_CALLBACK`.
|
||||
parameter is specified in the configuration object (or in the defaults) via the `jsonpCallbackParam`
|
||||
property. You must not provide your own parameter with this name in the configuratio of the request.
|
||||
|
||||
In previous versions of Angular, you specified where to add the callback parameter value via the
|
||||
In previous versions of AngularJS, you specified where to add the callback parameter value via the
|
||||
`JSON_CALLBACK` placeholder. This is no longer allowed.
|
||||
|
||||
To resolve this error, remove any parameters that have the same name as the `jsonpCallbackParam`;
|
||||
|
||||
@@ -15,7 +15,7 @@ In AngularJS `1.2.0` and later, `ngRoute` has been moved to its own module.
|
||||
If you are getting this error after upgrading to `1.2.x` or later, be sure that you've
|
||||
installed {@link ngRoute `ngRoute`}.
|
||||
|
||||
### Monkey-patching Angular's `ng` module
|
||||
### Monkey-patching AngularJS's `ng` module
|
||||
|
||||
This error can also occur if you have tried to add your own components to the `ng` module.
|
||||
This has never been supported and from `1.3.0` it will actually trigger this error.
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
@fullName Expecting end operator
|
||||
@description
|
||||
|
||||
The Angular expression is missing the corresponding closing operator.
|
||||
The AngularJS expression is missing the corresponding closing operator.
|
||||
|
||||
@@ -8,4 +8,4 @@ extension in your interpolation expression. The different choices have to be un
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -9,4 +9,4 @@ bug mentioning the exact version of AngularJS used and we will fix it!
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -14,4 +14,4 @@ future commit and the github issue will help gauge urgency.
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
@description
|
||||
|
||||
You must specify the MessageFormat function that you're using right after the
|
||||
comma following the Angular expression. Currently, the supported functions are
|
||||
comma following the AngularJS expression. Currently, the supported functions are
|
||||
"plural" and "select" (for gender selections.)
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -8,4 +8,4 @@ extension keyword in the extended interpolation syntax.
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -8,4 +8,4 @@ brace to mark the end of the message.
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -9,4 +9,4 @@ braces.
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -10,4 +10,4 @@ extensions require that you provide a message for the selection "other".
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -9,4 +9,4 @@ unsupported or invalid.
|
||||
|
||||
For more information about the MessageFormat syntax in interpolation
|
||||
expressions, please refer to MessageFormat extensions section at
|
||||
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
|
||||
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
|
||||
|
||||
@@ -7,4 +7,4 @@ You have attempted to use a MessageFormat extension in your interpolation expres
|
||||
|
||||
Read more about secure contexts at {@link ng.$sce Strict Contextual Escaping
|
||||
(SCE)} and about the MessageFormat extensions at {@link
|
||||
guide/i18n#MessageFormat Angular i18n MessageFormat}.
|
||||
guide/i18n#MessageFormat AngularJS i18n MessageFormat}.
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
@fullName Unterminated string literal
|
||||
@description
|
||||
|
||||
The string literal was not terminated in your Angular expression.
|
||||
The string literal was not terminated in your AngularJS expression.
|
||||
|
||||
@@ -40,7 +40,7 @@ URL of the subcontext:
|
||||
</head>
|
||||
```
|
||||
|
||||
Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked
|
||||
Before AngularJS 1.3 we didn't have this hard requirement and it was easy to write apps that worked
|
||||
when deployed in the root context but were broken when moved to a sub-context because in the
|
||||
sub-context all absolute urls would resolve to the root context of the app. To prevent this,
|
||||
use relative URLs throughout your app:
|
||||
|
||||
@@ -7,4 +7,4 @@ Occurs when an expression has a lexical error, for example a malformed number (0
|
||||
|
||||
The error message contains a more precise error.
|
||||
|
||||
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and fix the expression's syntax.
|
||||
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and fix the expression's syntax.
|
||||
|
||||
@@ -6,4 +6,4 @@
|
||||
Occurs when there is a syntax error in an expression. These errors are thrown while compiling the expression.
|
||||
The error message contains a more precise description of the error, including the location (column) in the expression where the error occurred.
|
||||
|
||||
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and fix the expression's syntax.
|
||||
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and fix the expression's syntax.
|
||||
|
||||
@@ -8,5 +8,5 @@ Occurs when an expression is missing tokens at the end of the expression.
|
||||
For example, forgetting to close a bracket or failing to properly escape quotes in an expression
|
||||
will trigger this error.
|
||||
|
||||
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and
|
||||
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and
|
||||
fix the expression's syntax.
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@description
|
||||
|
||||
This error occurs when the application's model becomes unstable and each `$digest` cycle triggers a state change and subsequent `$digest` cycle.
|
||||
Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
|
||||
AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
|
||||
|
||||
For example, the situation can occur by setting up a watch on a path and subsequently updating the same path when the value changes.
|
||||
|
||||
@@ -26,7 +26,7 @@ $scope.getUsers = function() {
|
||||
};
|
||||
```
|
||||
|
||||
Since `getUsers()` returns a new array, Angular determines that the model is different on each `$digest`
|
||||
Since `getUsers()` returns a new array, AngularJS determines that the model is different on each `$digest`
|
||||
cycle, resulting in the error. The solution is to return the same array object if the elements have
|
||||
not changed:
|
||||
|
||||
|
||||
@@ -10,17 +10,17 @@ the error.
|
||||
|
||||
## Background
|
||||
|
||||
Angular uses a dirty-checking digest mechanism to monitor and update values of the scope during
|
||||
AngularJS uses a dirty-checking digest mechanism to monitor and update values of the scope during
|
||||
the processing of your application. The digest works by checking all the values that are being
|
||||
watched against their previous value and running any watch handlers that have been defined for those
|
||||
values that have changed.
|
||||
|
||||
This digest mechanism is triggered by calling `$digest` on a scope object. Normally you do not need
|
||||
to trigger a digest manually, because every external action that can trigger changes in your
|
||||
application, such as mouse events, timeouts or server responses, wrap the Angular application code
|
||||
application, such as mouse events, timeouts or server responses, wrap the AngularJS application code
|
||||
in a block of code that will run `$digest` when the code completes.
|
||||
|
||||
You wrap Angular code in a block that will be followed by a `$digest` by calling `$apply` on a scope
|
||||
You wrap AngularJS code in a block that will be followed by a `$digest` by calling `$apply` on a scope
|
||||
object. So, in pseudo-code, the process looks like this:
|
||||
|
||||
```
|
||||
@@ -45,20 +45,20 @@ $apply = function(fn) {
|
||||
|
||||
## Digest Phases
|
||||
|
||||
Angular keeps track of what phase of processing we are in, the relevant ones being `$apply` and
|
||||
AngularJS keeps track of what phase of processing we are in, the relevant ones being `$apply` and
|
||||
`$digest`. Trying to reenter a `$digest` or `$apply` while one of them is already in progress is
|
||||
typically a sign of programming error that needs to be fixed. So Angular will throw this error when
|
||||
typically a sign of programming error that needs to be fixed. So AngularJS will throw this error when
|
||||
that occurs.
|
||||
|
||||
In most situations it should be well defined whether a piece of code will be run inside an `$apply`,
|
||||
in which case you should not be calling `$apply` or `$digest`, or it will be run outside, in which
|
||||
case you should wrap any code that will be interacting with Angular scope or services, in a call to
|
||||
case you should wrap any code that will be interacting with AngularJS scope or services, in a call to
|
||||
`$apply`.
|
||||
|
||||
As an example, all Controller code should expect to be run within Angular, so it should have no need
|
||||
As an example, all Controller code should expect to be run within AngularJS, so it should have no need
|
||||
to call `$apply` or `$digest`. Conversely, code that is being trigger directly as a call back to
|
||||
some external event, from the DOM or 3rd party library, should expect that it is never called from
|
||||
within Angular, and so any Angular application code that it calls should first be wrapped in a call
|
||||
within AngularJS, and so any AngularJS application code that it calls should first be wrapped in a call
|
||||
to $apply.
|
||||
|
||||
## Common Causes
|
||||
@@ -84,8 +84,8 @@ function MyController($scope, thirdPartyComponent) {
|
||||
}
|
||||
```
|
||||
|
||||
We expect that our callback will be called asynchronously, and so from outside Angular. Therefore, we
|
||||
correctly wrap our application code that interacts with Angular in a call to `$apply`.
|
||||
We expect that our callback will be called asynchronously, and so from outside AngularJS. Therefore, we
|
||||
correctly wrap our application code that interacts with AngularJS in a call to `$apply`.
|
||||
|
||||
The problem comes if `getData()` decides to call the callback handler synchronously; perhaps it has
|
||||
the data already cached in memory and so it immediately calls the callback to return the data,
|
||||
@@ -116,7 +116,7 @@ that the code will be called in a single `$apply` block.
|
||||
### Triggering Events Programmatically
|
||||
|
||||
The other situation that often leads to this error is when you trigger code (such as a DOM event)
|
||||
programmatically (from within Angular), which is normally called by an external trigger.
|
||||
programmatically (from within AngularJS), which is normally called by an external trigger.
|
||||
|
||||
For example, consider a directive that will set focus on an input control when a value in the scope
|
||||
is true:
|
||||
@@ -161,7 +161,7 @@ In this second scenario, we are already inside a `$digest` when the ngFocus dire
|
||||
call to `$apply()`, causing this error to be thrown.
|
||||
|
||||
It is possible to workaround this problem by moving the call to set the focus outside of the digest,
|
||||
by using `$timeout(fn, 0, false)`, where the `false` value tells Angular not to wrap this `fn` in an
|
||||
by using `$timeout(fn, 0, false)`, where the `false` value tells AngularJS not to wrap this `fn` in an
|
||||
`$apply` block:
|
||||
|
||||
```
|
||||
@@ -203,7 +203,7 @@ Once you have identified this call you work your way up the stack to see what th
|
||||
called from within an `$apply`/`$digest`. It may be a simple oversight or maybe it fits with the
|
||||
sync/async scenario described earlier.
|
||||
|
||||
* If the second call was made inside an Angular directive then it is likely that it matches the second
|
||||
* If the second call was made inside an AngularJS directive then it is likely that it matches the second
|
||||
programmatic event trigger scenario described earlier. In this case you may need to look further up
|
||||
the tree to what triggered the event in the first place.
|
||||
|
||||
@@ -259,11 +259,11 @@ $get.g.$apply angular.js:12742 <--- $apply
|
||||
q angular.js:320
|
||||
```
|
||||
|
||||
We can see (even though the Angular code is minified) that there were two calls to `$apply`, first
|
||||
We can see (even though the AngularJS code is minified) that there were two calls to `$apply`, first
|
||||
on line `19833`, then on line `12738` of `angular.js`.
|
||||
|
||||
It is this second call that caused the error. If we look at the angular.js code, we can see that
|
||||
this call is made by an Angular directive.
|
||||
this call is made by an AngularJS directive.
|
||||
|
||||
```
|
||||
var ngEventDirectives = {};
|
||||
@@ -308,5 +308,5 @@ We can now see that the second `$apply` was caused by us programmatically trigge
|
||||
`$timeout` as described above.
|
||||
|
||||
## Further Reading
|
||||
To learn more about Angular processing model please check out the
|
||||
To learn more about AngularJS processing model please check out the
|
||||
{@link guide/concepts concepts doc} as well as the {@link ng.$rootScope.Scope api} doc.
|
||||
|
||||
@@ -7,4 +7,4 @@ This error occurs when `$sanitize` sanitizer determines that `document.implement
|
||||
|
||||
This api is necessary for safe parsing of HTML strings into DOM trees and without it the sanitizer can't sanitize the input.
|
||||
|
||||
The api is present in all supported browsers including IE 9.0, so the presence of this error usually indicates that Angular's `$sanitize` is being used on an unsupported platform.
|
||||
The api is present in all supported browsers including IE 9.0, so the presence of this error usually indicates that AngularJS's `$sanitize` is being used on an unsupported platform.
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
|
||||
AngularJS' {@link ng.$sce Strict Contextual Escaping (SCE)} mode (enabled by default) has blocked loading a resource from an insecure URL.
|
||||
|
||||
Typically, this would occur if you're attempting to load an Angular template from an untrusted source.
|
||||
Typically, this would occur if you're attempting to load an AngularJS template from an untrusted source.
|
||||
It's also possible that a custom directive threw this error for a similar reason.
|
||||
|
||||
Angular only loads templates from trusted URLs (by calling {@link ng.$sce#getTrustedResourceUrl $sce.getTrustedResourceUrl} on the template URL).
|
||||
AngularJS only loads templates from trusted URLs (by calling {@link ng.$sce#getTrustedResourceUrl $sce.getTrustedResourceUrl} on the template URL).
|
||||
|
||||
By default, only URLs that belong to the same origin are trusted. These are urls with the same domain, protocol and port as the application document.
|
||||
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
|
||||
The value provided for use in a specific context was not found to be safe/trusted for use.
|
||||
|
||||
Angular's {@link ng.$sce Strict Contextual Escaping (SCE)} mode
|
||||
AngularJS's {@link ng.$sce Strict Contextual Escaping (SCE)} mode
|
||||
(enabled by default), requires bindings in certain
|
||||
contexts to result in a value that is trusted as safe for use in such a context. (e.g. loading an
|
||||
Angular template from a URL requires that the URL is one considered safe for loading resources.)
|
||||
AngularJS template from a URL requires that the URL is one considered safe for loading resources.)
|
||||
|
||||
This helps prevent XSS and other security issues. Read more at
|
||||
{@link ng.$sce Strict Contextual Escaping (SCE)}
|
||||
|
||||
@@ -3,9 +3,12 @@
|
||||
@fullName Unsupported Selector Lookup
|
||||
@description
|
||||
|
||||
In order to keep Angular small, Angular implements only a subset of the selectors in {@link angular.element#angular-s-jqlite jqLite}.
|
||||
In order to keep AngularJS small, AngularJS implements only a subset of the selectors in
|
||||
{@link angular.element#angularjs-s-jqlite jqLite}.
|
||||
This error occurs when a jqLite instance is invoked with a selector other than this subset.
|
||||
|
||||
In order to resolve this error, rewrite your code to only use tag name selectors and manually traverse the DOM using the APIs provided by jqLite.
|
||||
In order to resolve this error, rewrite your code to only use tag name selectors and manually
|
||||
traverse the DOM using the APIs provided by jqLite.
|
||||
|
||||
Alternatively, you can include a full version of jQuery, which Angular will automatically use and that will make all selectors available.
|
||||
Alternatively, you can include a full version of jQuery, which AngularJS will automatically use
|
||||
and that will make all selectors available.
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@fullName Testability Not Found
|
||||
@description
|
||||
|
||||
Angular's testability helper, getTestability, requires a root element to be
|
||||
passed in. This helps differentiate between different Angular apps on the same
|
||||
AngularJS's testability helper, getTestability, requires a root element to be
|
||||
passed in. This helps differentiate between different AngularJS apps on the same
|
||||
page. This error is thrown when no injector is found for root element. It is
|
||||
often because the root element is outside of the ng-app.
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
All date-related inputs like `<input type="date">` require the model to be a `Date` object.
|
||||
If the model is something else, this error will be thrown.
|
||||
Angular does not set validation errors on the `<input>` in this case
|
||||
AngularJS does not set validation errors on the `<input>` in this case
|
||||
as those errors are shown to the user, but the erroneous state was
|
||||
caused by incorrect application logic and not by the user.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ The `input[number]` and `input[range]` directives require the model to be a `num
|
||||
|
||||
If the model is something else, this error will be thrown.
|
||||
|
||||
Angular does not set validation errors on the `<input>` in this case
|
||||
AngularJS does not set validation errors on the `<input>` in this case
|
||||
as this error is caused by incorrect application logic and not by bad input from the user.
|
||||
|
||||
If your model does not contain actual numbers then it is up to the application developer
|
||||
|
||||
@@ -48,7 +48,7 @@ changes to `$location` are reflected into the browser address bar.
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="head">integration with angular application life-cycle</td>
|
||||
<td class="head">integration with AngularJS application life-cycle</td>
|
||||
<td>none</td>
|
||||
<td>knows about all internal life-cycle phases, integrates with {@link ng.$rootScope.Scope#$watch $watch}, ...</td>
|
||||
</tr>
|
||||
@@ -224,7 +224,7 @@ facilitate the browser URL change and history management.
|
||||
## Hashbang mode (default mode)
|
||||
|
||||
In this mode, `$location` uses Hashbang URLs in all browsers.
|
||||
Angular also does not intercept and rewrite links in this mode. I.e. links work
|
||||
AngularJS also does not intercept and rewrite links in this mode. I.e. links work
|
||||
as expected and also perform full page reloads when other parts of the url
|
||||
than the hash fragment was changed.
|
||||
|
||||
@@ -267,7 +267,7 @@ having to worry about whether the browser displaying your app supports the histo
|
||||
- Opening a regular URL in a legacy browser -> redirects to a hashbang URL
|
||||
- Opening hashbang URL in a modern browser -> rewrites to a regular URL
|
||||
|
||||
Note that in this mode, Angular intercepts all links (subject to the "Html link rewriting" rules below)
|
||||
Note that in this mode, AngularJS intercepts all links (subject to the "Html link rewriting" rules below)
|
||||
and updates the url in a way that never performs a full page reload.
|
||||
|
||||
|
||||
@@ -363,7 +363,7 @@ Note that [attribute name normalization](guide/directive#normalization) does not
|
||||
|
||||
### Relative links
|
||||
|
||||
Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url
|
||||
Be sure to check all relative links, images, scripts etc. AngularJS requires you to specify the url
|
||||
base in the head of your main html file (`<base href="/my-base/index.html">`) unless `html5Mode.requireBase`
|
||||
is set to `false` in the html5Mode definition object passed to `$locationProvider.html5Mode()`. With
|
||||
that, relative urls will always be resolved to this base url, even if the initial url of the
|
||||
@@ -378,7 +378,7 @@ to anchors on the same page without needing to know on which page the user curre
|
||||
|
||||
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links
|
||||
to entry point of your application (e.g. index.html). Requiring a `<base>` tag is also important for
|
||||
this case, as it allows Angular to differentiate between the part of the url that is the application
|
||||
this case, as it allows AngularJS to differentiate between the part of the url that is the application
|
||||
base and the path that should be handled by the application.
|
||||
|
||||
### Base href constraints
|
||||
@@ -391,7 +391,7 @@ called `/base`). The URL `/base` is actually outside the application (it refers
|
||||
in the root `/` folder).
|
||||
|
||||
If you wish to be able to navigate to the application via a URL such as `/base` then you should ensure that
|
||||
you server is setup to redirect such requests to `/base/`.
|
||||
your server is setup to redirect such requests to `/base/`.
|
||||
|
||||
See https://github.com/angular/angular.js/issues/14018 for more information.
|
||||
|
||||
@@ -728,14 +728,14 @@ use a lower level API, {@link ng.$window $window.location.href}.
|
||||
|
||||
## Using $location outside of the scope life-cycle
|
||||
|
||||
`$location` knows about Angular's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in
|
||||
`$location` knows about AngularJS's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in
|
||||
the browser it updates the `$location` and calls `$apply` so that all
|
||||
{@link ng.$rootScope.Scope#$watch $watchers} /
|
||||
{@link ng.$compile.directive.Attributes#$observe $observers} are notified.
|
||||
When you change the `$location` inside the `$digest` phase everything is ok; `$location` will
|
||||
propagate this change into browser and will notify all the {@link ng.$rootScope.Scope#$watch $watchers} /
|
||||
{@link ng.$compile.directive.Attributes#$observe $observers}.
|
||||
When you want to change the `$location` from outside Angular (for example, through a DOM Event or
|
||||
When you want to change the `$location` from outside AngularJS (for example, through a DOM Event or
|
||||
during testing) - you must call `$apply` to propagate the changes.
|
||||
|
||||
## $location.path() and ! or / prefixes
|
||||
@@ -787,7 +787,7 @@ describe('serviceUnderTest', function() {
|
||||
|
||||
# Migrating from earlier AngularJS releases
|
||||
|
||||
In earlier releases of Angular, `$location` used `hashPath` or `hashSearch` to process path and
|
||||
In earlier releases of AngularJS, `$location` used `hashPath` or `hashSearch` to process path and
|
||||
search methods. With this release, the `$location` service processes path and search methods and
|
||||
then uses the information it obtains to compose hashbang URLs (such as
|
||||
`http://server.com/#!/path?search=a`), when necessary.
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
# Accessibility with ngAria
|
||||
|
||||
The goal of ngAria is to improve Angular's default accessibility by enabling common
|
||||
The goal of ngAria is to improve AngularJS's default accessibility by enabling common
|
||||
[ARIA](http://www.w3.org/TR/wai-aria/) attributes that convey state or semantic information for
|
||||
assistive technologies used by persons with disabilities.
|
||||
|
||||
@@ -109,11 +109,11 @@ attributes (if they have not been explicitly specified by the developer):
|
||||
function isEmpty(value) {
|
||||
return !value;
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
elem[ctrl.$viewValue ? 'addClass' : 'removeClass']('checked');
|
||||
}
|
||||
|
||||
|
||||
function toggleCheckbox() {
|
||||
ctrl.$setViewValue(!ctrl.$viewValue);
|
||||
ctrl.$render();
|
||||
@@ -420,7 +420,7 @@ tell ngAria to ignore the attribute globally.
|
||||
|
||||
## Common Accessibility Patterns
|
||||
|
||||
Accessibility best practices that apply to web apps in general also apply to Angular.
|
||||
Accessibility best practices that apply to web apps in general also apply to AngularJS.
|
||||
|
||||
* **Text alternatives**: Add alternate text content to make visual information accessible using
|
||||
[these W3C guidelines](http://www.w3.org/TR/html-alt-techniques/). The appropriate technique
|
||||
|
||||
@@ -66,7 +66,7 @@ You may also want to setup a separate CSS file for defining CSS-based animations
|
||||
## How they work
|
||||
|
||||
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class
|
||||
attached to a HTML element within your application, you can apply animations to it. Lets say for
|
||||
attached to an HTML element within your application, you can apply animations to it. Let's say for
|
||||
example that we have an HTML template with a repeater like so:
|
||||
|
||||
```html
|
||||
@@ -467,7 +467,7 @@ You can also use one of the other
|
||||
strategies to disable animations}.
|
||||
|
||||
|
||||
## Enable animations outside of the application DOM tree: {@link ng.$animate#pin $animate.pin()}
|
||||
### Enable animations for elements outside of the AngularJS application DOM tree: {@link ng.$animate#pin $animate.pin()}
|
||||
|
||||
Before animating, `ngAnimate` checks if the animated element is inside the application DOM tree. If
|
||||
not, no animation is run. Usually, this is not a problem since most apps use the `html` or `body`
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
|
||||
# Bootstrap
|
||||
|
||||
This page explains the Angular initialization process and how you can manually initialize Angular
|
||||
This page explains the AngularJS initialization process and how you can manually initialize AngularJS
|
||||
if necessary.
|
||||
|
||||
|
||||
## Angular `<script>` Tag
|
||||
## AngularJS `<script>` Tag
|
||||
|
||||
This example shows the recommended path for integrating Angular with what we call automatic
|
||||
This example shows the recommended path for integrating AngularJS with what we call automatic
|
||||
initialization.
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@ initialization.
|
||||
* Choose: `angular-[version].min.js` for a compressed and obfuscated file, suitable for use in
|
||||
production.
|
||||
2. Place `ng-app` to the root of your application, typically on the `<html>` tag if you want
|
||||
angular to auto-bootstrap your application.
|
||||
AngularJS to auto-bootstrap your application.
|
||||
|
||||
<html ng-app>
|
||||
|
||||
@@ -51,16 +51,16 @@ initialization.
|
||||
|
||||
<img class="pull-right" style="padding-left: 3em;" src="img/guide/concepts-startup.png">
|
||||
|
||||
Angular initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is
|
||||
evaluated if at that time `document.readyState` is set to `'complete'`. At this point Angular looks
|
||||
AngularJS initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is
|
||||
evaluated if at that time `document.readyState` is set to `'complete'`. At this point AngularJS looks
|
||||
for the {@link ng.directive:ngApp `ngApp`} directive which designates your application root.
|
||||
If the {@link ng.directive:ngApp `ngApp`} directive is found then Angular will:
|
||||
If the {@link ng.directive:ngApp `ngApp`} directive is found then AngularJS will:
|
||||
|
||||
* load the {@link guide/module module} associated with the directive.
|
||||
* create the application {@link auto.$injector injector}
|
||||
* compile the DOM treating the {@link ng.directive:ngApp
|
||||
`ngApp`} directive as the root of the compilation. This allows you to tell it to treat only a
|
||||
portion of the DOM as an Angular application.
|
||||
portion of the DOM as an AngularJS application.
|
||||
|
||||
|
||||
```html
|
||||
@@ -96,9 +96,9 @@ for more.
|
||||
|
||||
If you need to have more control over the initialization process, you can use a manual
|
||||
bootstrapping method instead. Examples of when you'd need to do this include using script loaders
|
||||
or the need to perform an operation before Angular compiles a page.
|
||||
or the need to perform an operation before AngularJS compiles a page.
|
||||
|
||||
Here is an example of manually initializing Angular:
|
||||
Here is an example of manually initializing AngularJS:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
|
||||
If you're just getting started, we recommend the {@link tutorial/ tutorial} first.
|
||||
If you just want to create custom directives, we recommend the {@link guide/directive directives guide}.
|
||||
If you want a deeper look into Angular's compilation process, you're in the right place.
|
||||
If you want a deeper look into AngularJS's compilation process, you're in the right place.
|
||||
</div>
|
||||
|
||||
|
||||
## Overview
|
||||
|
||||
Angular's {@link ng.$compile HTML compiler} allows the developer to teach the
|
||||
AngularJS's {@link ng.$compile HTML compiler} allows the developer to teach the
|
||||
browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute
|
||||
and even create new HTML elements or attributes with custom behavior. Angular calls these behavior
|
||||
and even create new HTML elements or attributes with custom behavior. AngularJS calls these behavior
|
||||
extensions {@link ng.$compileProvider#directive directives}.
|
||||
|
||||
HTML has a lot of constructs for formatting the HTML for static documents in a declarative fashion.
|
||||
@@ -31,7 +31,7 @@ However, the declarative language is also limited, as it does not allow you to t
|
||||
syntax. For example, there is no easy way to get the browser to align the text at 1/3 the position
|
||||
instead of 1/2. What is needed is a way to teach the browser new HTML syntax.
|
||||
|
||||
Angular comes pre-bundled with common directives which are useful for building any app. We also
|
||||
AngularJS comes pre-bundled with common directives which are useful for building any app. We also
|
||||
expect that you will create directives that are specific to your app. These extensions become a
|
||||
Domain Specific Language for building your application.
|
||||
|
||||
@@ -41,7 +41,7 @@ involved.
|
||||
|
||||
## Compiler
|
||||
|
||||
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation
|
||||
Compiler is an AngularJS service which traverses the DOM looking for attributes. The compilation
|
||||
process happens in two phases.
|
||||
|
||||
1. **Compile:** traverse the DOM and collect all of the directives. The result is a linking
|
||||
@@ -142,16 +142,16 @@ This means that any changes to the data need to be re-merged with the template a
|
||||
3. managing the whole update process
|
||||
4. lack of behavior expressiveness
|
||||
|
||||
Angular is different. The Angular compiler consumes the DOM, not string templates.
|
||||
AngularJS is different. The AngularJS compiler consumes the DOM, not string templates.
|
||||
The result is a linking function, which when combined with a scope model results in a live view. The
|
||||
view and scope model bindings are transparent. The developer does not need to make any special calls to update
|
||||
the view. And because `innerHTML` is not used, you won't accidentally clobber user input.
|
||||
Furthermore, Angular directives can contain not just text bindings, but behavioral constructs as
|
||||
Furthermore, AngularJS directives can contain not just text bindings, but behavioral constructs as
|
||||
well.
|
||||
|
||||
<img src="img/Two_Way_Data_Binding.png">
|
||||
|
||||
The Angular approach produces a stable DOM. The DOM element instance bound to a model
|
||||
The AngularJS approach produces a stable DOM. The DOM element instance bound to a model
|
||||
item instance does not change for the lifetime of the binding. This means that the code can get
|
||||
hold of the elements and register event handlers and know that the reference will not be destroyed
|
||||
by template data merge.
|
||||
@@ -160,7 +160,7 @@ by template data merge.
|
||||
|
||||
## How directives are compiled
|
||||
|
||||
It's important to note that Angular operates on DOM nodes rather than strings. Usually, you don't
|
||||
It's important to note that AngularJS operates on DOM nodes rather than strings. Usually, you don't
|
||||
notice this restriction because when a page loads, the web browser parses HTML into the DOM automatically.
|
||||
|
||||
HTML compilation happens in three phases:
|
||||
@@ -186,7 +186,7 @@ The result of this is a live binding between the scope and the DOM. So at this p
|
||||
a model on the compiled scope will be reflected in the DOM.
|
||||
|
||||
Below is the corresponding code using the `$compile` service.
|
||||
This should help give you an idea of what Angular does internally.
|
||||
This should help give you an idea of what AngularJS does internally.
|
||||
|
||||
```js
|
||||
var $compile = ...; // injected into your code
|
||||
|
||||
@@ -10,11 +10,10 @@
|
||||
We are investigating backporting the new Angular Router to AngularJS, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).
|
||||
</div>
|
||||
|
||||
This guide describes the new Component Router for AngularJS 1.5.
|
||||
This guide describes the Component Router for AngularJS.
|
||||
|
||||
<div class="alert alert-info">
|
||||
If you are looking for information about the default router for AngularJS have a look at the {@link ngRoute} module.
|
||||
|
||||
If you are looking for information about the Component Router for the new Angular then
|
||||
check out the [Angular Router Guide](https://angular.io/docs/ts/latest/guide/router.html).
|
||||
</div>
|
||||
@@ -28,7 +27,7 @@ Here is a table of the main concepts used in the Component Router.
|
||||
| Router | Displays the Routing Components for the active Route. Manages navigation from one component to the next. |
|
||||
| RootRouter | The top level Router that interacts with the current URL location |
|
||||
| RouteConfig | Configures a Router with RouteDefinitions, each mapping a URL path to a component. |
|
||||
| Routing Component | An Angular component with a RouteConfig and an associated Router. |
|
||||
| Routing Component | An AngularJS component with a RouteConfig and an associated Router. |
|
||||
| RouteDefinition | Defines how the router should navigate to a component based on a URL pattern. |
|
||||
| ngOutlet | The directive (`<ng-outlet>`) that marks where the router should display a view. |
|
||||
| ngLink | The directive (`ng-link="..."`) for binding a clickable HTML element to a route, via a Link Parameters Array. |
|
||||
@@ -138,7 +137,7 @@ The result is that we end up with a hierarchy of **Routing Components** rendered
|
||||

|
||||
|
||||
|
||||
# Example Heroes App
|
||||
## Example Heroes App
|
||||
|
||||
You can see the complete application running below.
|
||||
|
||||
@@ -459,12 +458,12 @@ You can see the complete application running below.
|
||||
</example>
|
||||
|
||||
|
||||
# Getting Started
|
||||
### Getting Started
|
||||
|
||||
In the following sections we will step through building this application. The finished application has views
|
||||
to display list and detail views of Heroes and Crises.
|
||||
|
||||
## Install the libraries
|
||||
#### Install the libraries
|
||||
|
||||
It is easier to use [Yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com) to install the
|
||||
**Component Router** module. For this guide we will also install AngularJS itself via Yarn:
|
||||
@@ -475,9 +474,9 @@ yarn add angular@1.5.x @angular/router@0.2.0
|
||||
```
|
||||
|
||||
|
||||
## Load the scripts
|
||||
#### Load the scripts
|
||||
|
||||
Just like any Angular application, we load the JavaScript files into our `index.html`:
|
||||
Just like any AngularJS application, we load the JavaScript files into our `index.html`:
|
||||
|
||||
```html
|
||||
<script src="/node_modules/angular/angular.js"></script>
|
||||
@@ -494,7 +493,7 @@ You also need to include ES6 shims for browsers that do not support ES6 code (In
|
||||
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
|
||||
```
|
||||
|
||||
## Create the `app` module
|
||||
#### Create the `app` module
|
||||
|
||||
In the app.js file, create the main application module `app` which depends on the `ngComponentRouter`
|
||||
module, which is provided by the **Component Router** script.
|
||||
@@ -528,7 +527,7 @@ Configure the top level routed `App` Component.
|
||||
|
||||
Create a very simple App Component to test that the application is working.
|
||||
|
||||
We are using the Angular 1.5 {@link $compileProvider#component `.component()`} helper method to create
|
||||
We are using the AngularJS {@link $compileProvider#component `.component()`} helper method to create
|
||||
all the **Components** in our application. It is perfectly suited to this task.
|
||||
|
||||
```js
|
||||
@@ -547,9 +546,9 @@ must have a base URL.
|
||||
...
|
||||
```
|
||||
|
||||
## Bootstrap AngularJS
|
||||
#### Bootstrap AngularJS
|
||||
|
||||
Bootstrap the Angular application and add the top level App Component.
|
||||
Bootstrap the AngularJS application and add the top level App Component.
|
||||
|
||||
```html
|
||||
<body ng-app="app">
|
||||
@@ -559,7 +558,7 @@ Bootstrap the Angular application and add the top level App Component.
|
||||
```
|
||||
|
||||
|
||||
# Implementing the AppComponent
|
||||
### Implementing the AppComponent
|
||||
|
||||
In the previous section we have created a single top level **App Component**. Let's now create some more
|
||||
**Routing Components** and wire up **Route Config** for those. We start with a Heroes Feature, which
|
||||
@@ -577,7 +576,7 @@ We are going to have a `Heroes` Component for the Heroes feature of our applicat
|
||||
and `HeroDetail` **Components** that will actually display the two different views.
|
||||
|
||||
|
||||
## App Component
|
||||
#### App Component
|
||||
|
||||
Configure the **App Component** with a template and **Route Config**:
|
||||
|
||||
@@ -598,7 +597,7 @@ Configure the **App Component** with a template and **Route Config**:
|
||||
The **App Component** has an `<ng-outlet>` directive in its template. This is where the child **Components**
|
||||
of this view will be rendered.
|
||||
|
||||
### ngLink
|
||||
#### ngLink
|
||||
|
||||
We have used the `ng-link` directive to create a link to navigate to the Heroes Component. By using this
|
||||
directive we don't need to know what the actual URL will be. We can let the Router generate that for us.
|
||||
@@ -607,7 +606,7 @@ We have included a link to the Crisis Center but have not included the `ng-link`
|
||||
implemented the CrisisCenter component.
|
||||
|
||||
|
||||
### Non-terminal Routes
|
||||
#### Non-terminal Routes
|
||||
|
||||
We need to tell the **Router** that the `Heroes` **Route Definition** is **non-terminal**, that it should
|
||||
continue to match **Routes** in its child **Components**. We do this by adding a **continuation ellipsis
|
||||
@@ -616,16 +615,16 @@ Without the **continuation ellipsis** the `HeroList` **Route** will never be mat
|
||||
stop at the `Heroes` **Routing Component** and not try to match the rest of the URL.
|
||||
|
||||
|
||||
## Heroes Feature
|
||||
### Heroes Feature
|
||||
|
||||
Now we can implement our Heroes Feature which consists of three **Components**: `Heroes`, `HeroList` and
|
||||
`HeroDetail`. The `Heroes` **Routing Component** simply provides a template containing the {@link ngOutlet}
|
||||
directive and a **Route Config** that defines a set of child **Routes** which delegate through to the
|
||||
`HeroList` and `HeroDetail` **Components**.
|
||||
|
||||
## HeroesComponent
|
||||
### HeroesComponent
|
||||
|
||||
Create a new file `heroes.js`, which defines a new Angular module for the **Components** of this feature
|
||||
Create a new file `heroes.js`, which defines a new AngularJS module for the **Components** of this feature
|
||||
and registers the Heroes **Component**.
|
||||
|
||||
```js
|
||||
@@ -651,20 +650,20 @@ and also to add the module as a dependency of the `app` module:
|
||||
angular.module('app', ['ngComponentRouter', 'heroes'])
|
||||
```
|
||||
|
||||
### Use As Default
|
||||
#### Use As Default
|
||||
The `useAsDefault` property on the `HeroList` **Route Definition**, indicates that if no other **Route
|
||||
Definition** matches the URL, then this **Route Definition** should be used by default.
|
||||
|
||||
### Route Parameters
|
||||
#### Route Parameters
|
||||
The `HeroDetail` Route has a named parameter (`id`), indicated by prefixing the URL segment with a colon,
|
||||
as part of its `path` property. The **Router** will match anything in this segment and make that value
|
||||
available to the HeroDetail **Component**.
|
||||
|
||||
### Terminal Routes
|
||||
#### Terminal Routes
|
||||
Both the Routes in the `HeroesComponent` are terminal, i.e. their routes do not end with `...`. This is
|
||||
because the `HeroList` and `HeroDetail` will not contain any child routes.
|
||||
|
||||
### Route Names
|
||||
#### Route Names
|
||||
**What is the difference between the `name` and `component` properties on a Route Definition?**
|
||||
|
||||
The `component` property in a **Route Definition** defines the **Component** directive that will be rendered
|
||||
@@ -676,7 +675,7 @@ The `name` property is used to reference the **Route Definition** when generatin
|
||||
that has the `name` property of `"Heroes"`.
|
||||
|
||||
|
||||
## HeroList Component
|
||||
### HeroList Component
|
||||
|
||||
The HeroList **Component** is the first component in the application that actually contains significant
|
||||
functionality. It loads up a list of heroes from a `heroService` and displays them using `ng-repeat`.
|
||||
@@ -705,7 +704,7 @@ The template iterates through each `hero` object of the array in the `$ctrl.hero
|
||||
the `$ctrl` property on the scope of the template.*
|
||||
|
||||
|
||||
## HeroService
|
||||
### HeroService
|
||||
|
||||
Our HeroService simulates requesting a list of heroes from a server. In a real application this would be
|
||||
making an actual server request, perhaps over HTTP.
|
||||
@@ -735,7 +734,7 @@ Note that both the `getHeroes()` and `getHero(id)` methods return a promise for
|
||||
in real-life we would have to wait for the server to respond with the data.
|
||||
|
||||
|
||||
## Router Lifecycle Hooks
|
||||
### Router Lifecycle Hooks
|
||||
|
||||
**How do I know when my Component is active?**
|
||||
|
||||
@@ -780,7 +779,7 @@ By returning a promise for the list of heroes from `$routerOnActivate()` we can
|
||||
Route until the heroes have arrived successfully. This is similar to how a `resolve` works in {@link ngRoute}.
|
||||
|
||||
|
||||
## Route Parameters
|
||||
### Route Parameters
|
||||
|
||||
**How do I access parameters for the current route?**
|
||||
|
||||
@@ -811,11 +810,11 @@ by the **Router**. In this code it is used to identify a specific Hero to retrie
|
||||
This hero is then attached to the **Component** so that it can be accessed in the template.
|
||||
|
||||
|
||||
## Access to the Current Router
|
||||
### Access to the Current Router
|
||||
|
||||
**How do I get hold of the current router for my component?**
|
||||
|
||||
Each component has its own Router. Unlike in Angular 2, we cannot use the dependency injector to get hold of a component's Router.
|
||||
Each component has its own Router. Unlike in the new Angular, we cannot use the dependency injector to get hold of a component's Router.
|
||||
We can only inject the `$rootRouter`. Instead we use the fact that the `ng-outlet` directive binds the current router to a `$router`
|
||||
attribute on our component.
|
||||
|
||||
@@ -882,7 +881,7 @@ Other options for generating this navigation are:
|
||||
```
|
||||
this form gives you the possibility of caching the instruction, but is more verbose.
|
||||
|
||||
### Absolute vs Relative Navigation
|
||||
#### Absolute vs Relative Navigation
|
||||
|
||||
**Why not use `$rootRouter` to do the navigation?**
|
||||
|
||||
@@ -894,7 +893,7 @@ to the `HeroListComponent` with the `$rootRouter`, we would have to provide a co
|
||||
`['App','Heroes','HeroList']`.
|
||||
|
||||
|
||||
## Extra Parameters
|
||||
### Extra Parameters
|
||||
|
||||
We can also pass additional optional parameters to routes, which get encoded into the URL and are again
|
||||
available to the `$routerOnActivate(next, previous)` hook. If we pass the current `id` from the
|
||||
@@ -936,7 +935,7 @@ Finally, we can use this information to highlight the current hero in the templa
|
||||
</div>
|
||||
```
|
||||
|
||||
## Crisis Center
|
||||
### Crisis Center
|
||||
|
||||
Let's implement the Crisis Center feature, which displays a list if crises that need to be dealt with by a hero.
|
||||
The detailed crisis view has an additional feature where it blocks you from navigating if you have not saved
|
||||
@@ -951,7 +950,7 @@ changes to the crisis being edited.
|
||||

|
||||
|
||||
|
||||
## Crisis Feature
|
||||
### Crisis Feature
|
||||
|
||||
This feature is very similar to the Heroes feature. It contains the following **Components**:
|
||||
|
||||
@@ -962,7 +961,7 @@ This feature is very similar to the Heroes feature. It contains the following **
|
||||
CrisisService and CrisisListComponent are basically the same as HeroService and HeroListComponent
|
||||
respectively.
|
||||
|
||||
## Navigation Control Hooks
|
||||
### Navigation Control Hooks
|
||||
|
||||
**How do I prevent navigation from occurring?**
|
||||
|
||||
@@ -979,7 +978,7 @@ can complete, all the **Components** must agree that they can be deactivated or
|
||||
The **Router** will call the `$routerCanDeactivate` and `$canActivate` hooks, if they are provided. If any
|
||||
of the hooks resolve to `false` then the navigation is cancelled.
|
||||
|
||||
### Dialog Box Service
|
||||
#### Dialog Box Service
|
||||
|
||||
We can implement a very simple dialog box that will prompt the user whether they are happy to lose changes they
|
||||
have made. The result of the prompt is a promise that can be used in a `$routerCanDeactivate` hook.
|
||||
|
||||
@@ -5,17 +5,17 @@
|
||||
|
||||
# Understanding Components
|
||||
|
||||
In Angular, a Component is a special kind of {@link guide/directive directive} that uses a simpler
|
||||
In AngularJS, a Component is a special kind of {@link guide/directive directive} that uses a simpler
|
||||
configuration which is suitable for a component-based application structure.
|
||||
|
||||
This makes it easier to write an app in a way that's similar to using Web Components or using Angular
|
||||
2's style of application architecture.
|
||||
This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's
|
||||
style of application architecture.
|
||||
|
||||
Advantages of Components:
|
||||
- simpler configuration than plain directives
|
||||
- promote sane defaults and best practices
|
||||
- optimized for component-based architecture
|
||||
- writing component directives will make it easier to upgrade to Angular 2
|
||||
- writing component directives will make it easier to upgrade to Angular
|
||||
|
||||
When not to use Components:
|
||||
|
||||
@@ -25,7 +25,7 @@ When not to use Components:
|
||||
|
||||
## Creating and configuring a Component
|
||||
|
||||
Components can be registered using the `.component()` method of an Angular module (returned by {@link module `angular.module()`}). The method takes two arguments:
|
||||
Components can be registered using the `.component()` method of an AngularJS module (returned by {@link module `angular.module()`}). The method takes two arguments:
|
||||
|
||||
* The name of the Component (as string).
|
||||
* The Component config object. (Note that, unlike the `.directive()` method, this method does **not** take a factory function.)
|
||||
@@ -90,14 +90,14 @@ a component-based architecture. But what makes a component beyond the options th
|
||||
the component helper has?
|
||||
|
||||
- **Components only control their own View and Data:**
|
||||
Components should never modify any data or DOM that is out of their own scope. Normally, in Angular
|
||||
Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS
|
||||
it is possible to modify data anywhere in the application through scope inheritance and watches. This
|
||||
is practical, but can also lead to problems when it is not clear which part of the application is
|
||||
responsible for modifying the data. That is why component directives use an isolate scope, so a whole
|
||||
class of scope manipulation is not possible.
|
||||
|
||||
- **Components have a well-defined public API - Inputs and Outputs:**
|
||||
However, scope isolation only goes so far, because Angular uses two-way binding. So if you pass
|
||||
However, scope isolation only goes so far, because AngularJS uses two-way binding. So if you pass
|
||||
an object to a component like this - `bindings: {item: '='}`, and modify one of its properties, the
|
||||
change will be reflected in the parent component. For components however, only the component that owns
|
||||
the data should modify it, to make it easy to reason about what data is changed, and when. For that reason,
|
||||
@@ -158,7 +158,7 @@ of the component. The following hook methods can be implemented:
|
||||
changes. Any actions that you wish to take in response to the changes that you detect must be
|
||||
invoked from this hook; implementing this has no effect on when `$onChanges` is called. For example, this hook
|
||||
could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not
|
||||
be detected by Angular's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
|
||||
be detected by AngularJS's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
|
||||
if detecting changes, you must store the previous value(s) for comparison to the current values.
|
||||
* `$onDestroy()` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
|
||||
external resources, watches and event handlers.
|
||||
@@ -167,8 +167,8 @@ of the component. The following hook methods can be implemented:
|
||||
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
|
||||
they are waiting for their template to load asynchronously and their own compilation and linking has been
|
||||
suspended until that occurs.
|
||||
This hook can be considered analogous to the `ngAfterViewInit` and `ngAfterContentInit` hooks in Angular 2.
|
||||
Since the compilation process is rather different in Angular 1 there is no direct mapping and care should
|
||||
This hook can be considered analogous to the `ngAfterViewInit` and `ngAfterContentInit` hooks in Angular.
|
||||
Since the compilation process is rather different in AngularJS there is no direct mapping and care should
|
||||
be taken when upgrading.
|
||||
|
||||
By implementing these methods, your component can hook into its lifecycle.
|
||||
@@ -445,7 +445,7 @@ angular.module('docsTabsExample', [])
|
||||
</example>
|
||||
|
||||
|
||||
# Unit-testing Component Controllers
|
||||
## Unit-testing Component Controllers
|
||||
|
||||
The easiest way to unit-test a component controller is by using the
|
||||
{@link ngMock.$componentController $componentController} that is included in {@link ngMock}. The
|
||||
|
||||
@@ -54,20 +54,20 @@ Try out the Live Preview above, and then let's walk through the example and desc
|
||||
|
||||
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-databinding1.png">
|
||||
|
||||
This looks like normal HTML, with some new markup. In Angular, a file like this is called a
|
||||
<a name="template">{@link templates template}</a>. When Angular starts your application, it parses and
|
||||
This looks like normal HTML, with some new markup. In AngularJS, a file like this is called a
|
||||
<a name="template">{@link templates template}</a>. When AngularJS starts your application, it parses and
|
||||
processes this new markup from the template using the <a name="compiler">{@link compiler compiler}</a>.
|
||||
The loaded, transformed and rendered DOM is then called the <a name="view"></a>*view*.
|
||||
|
||||
The first kind of new markup are the <a name="directive">{@link directive directives}</a>.
|
||||
They apply special behavior to attributes or elements in the HTML. In the example above we use the
|
||||
{@link ng.directive:ngApp `ng-app`} attribute, which is linked to a directive that automatically
|
||||
initializes our application. Angular also defines a directive for the {@link ng.directive:input `input`}
|
||||
initializes our application. AngularJS also defines a directive for the {@link ng.directive:input `input`}
|
||||
element that adds extra behavior to the element. The {@link ng.directive:ngModel `ng-model`} directive
|
||||
stores/updates the value of the input field into/from a variable.
|
||||
|
||||
<div class="alert alert-info">
|
||||
**Custom directives to access the DOM**: In Angular, the only place where an application should access the DOM is
|
||||
**Custom directives to access the DOM**: In AngularJS, the only place where an application should access the DOM is
|
||||
within directives. This is important because artifacts that access the DOM are hard to test.
|
||||
If you need to access the DOM directly you should write a custom directive for this. The
|
||||
{@link directive directives guide} explains how to do this.
|
||||
@@ -76,12 +76,12 @@ stores/updates the value of the input field into/from a variable.
|
||||
The second kind of new markup are the double curly braces `{{ expression | filter }}`:
|
||||
When the compiler encounters this markup, it will replace it with the evaluated value of the markup.
|
||||
An <a name="expression">{@link expression expression}</a> in a template is a JavaScript-like code snippet that allows
|
||||
Angular to read and write variables. Note that those variables are not global variables.
|
||||
AngularJS to read and write variables. Note that those variables are not global variables.
|
||||
Just like variables in a JavaScript function live in a scope,
|
||||
Angular provides a <a name="scope">{@link scope scope}</a> for the variables accessible to expressions.
|
||||
AngularJS provides a <a name="scope">{@link scope scope}</a> for the variables accessible to expressions.
|
||||
The values that are stored in variables on the scope are referred to as the <a name="model"></a>*model*
|
||||
in the rest of the documentation.
|
||||
Applied to the example above, the markup directs Angular to "take the data we got from the input widgets
|
||||
Applied to the example above, the markup directs AngularJS to "take the data we got from the input widgets
|
||||
and multiply them together".
|
||||
|
||||
The example above also contains a <a name="filter">{@link guide/filter filter}</a>.
|
||||
@@ -89,7 +89,7 @@ A filter formats the value of an expression for display to the user.
|
||||
In the example above, the filter {@link ng.filter:currency `currency`} formats a number
|
||||
into an output that looks like money.
|
||||
|
||||
The important thing in the example is that Angular provides _live_ bindings:
|
||||
The important thing in the example is that AngularJS provides _live_ bindings:
|
||||
Whenever the input values change, the value of the expressions are automatically
|
||||
recalculated and the DOM is updated with their values.
|
||||
The concept behind this is <a name="databinding">{@link databinding two-way data binding}</a>.
|
||||
@@ -157,9 +157,9 @@ expressions and directives.
|
||||
|
||||
Besides the new file that contains the controller code, we also added an
|
||||
{@link ng.directive:ngController `ng-controller`} directive to the HTML.
|
||||
This directive tells Angular that the new `InvoiceController` is responsible for the element with the directive
|
||||
This directive tells AngularJS that the new `InvoiceController` is responsible for the element with the directive
|
||||
and all of the element's children.
|
||||
The syntax `InvoiceController as invoice` tells Angular to instantiate the controller
|
||||
The syntax `InvoiceController as invoice` tells AngularJS to instantiate the controller
|
||||
and save it in the variable `invoice` in the current scope.
|
||||
|
||||
We also changed all expressions in the page to read and write variables within that
|
||||
@@ -260,22 +260,22 @@ get a hold of the now separated function?
|
||||
This is where <a name="di">{@link di Dependency Injection}</a> comes into play.
|
||||
Dependency Injection (DI) is a software design pattern that
|
||||
deals with how objects and functions get created and how they get a hold of their dependencies.
|
||||
Everything within Angular (directives, filters, controllers,
|
||||
services, ...) is created and wired using dependency injection. Within Angular,
|
||||
Everything within AngularJS (directives, filters, controllers,
|
||||
services, ...) is created and wired using dependency injection. Within AngularJS,
|
||||
the DI container is called the <a name="injector">{@link di injector}</a>.
|
||||
|
||||
To use DI, there needs to be a place where all the things that should work together are registered.
|
||||
In Angular, this is the purpose of the <a name="module">{@link module modules}</a>.
|
||||
When Angular starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
|
||||
In AngularJS, this is the purpose of the <a name="module">{@link module modules}</a>.
|
||||
When AngularJS starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
|
||||
including the configuration of all modules that this module depends on.
|
||||
|
||||
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 AngularJS
|
||||
to use the `invoice2` module as the main module for the application.
|
||||
The code snippet `angular.module('invoice2', ['finance2'])` specifies that the `invoice2` module depends on the
|
||||
`finance2` module. By this, Angular uses the `InvoiceController` as well as the `currencyConverter` service.
|
||||
`finance2` module. By this, AngularJS 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 AngularJS 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 constructor function.
|
||||
For services, there are multiple ways to specify how they are created
|
||||
(see the {@link services service guide}).
|
||||
@@ -284,24 +284,24 @@ In the example above, we are using an anonymous function as the factory function
|
||||
This function should return the `currencyConverter` service instance.
|
||||
|
||||
Back to the initial question: How does the `InvoiceController` get a reference to the `currencyConverter` function?
|
||||
In Angular, this is done by simply defining arguments on the constructor function. With this, the injector
|
||||
In AngularJS, this is done by simply defining arguments on the constructor function. With this, the injector
|
||||
is able to create the objects in the right order and pass the previously created objects into the
|
||||
factories of the objects that depend on them.
|
||||
In our example, the `InvoiceController` has an argument named `currencyConverter`. By this, Angular knows about the
|
||||
In our example, the `InvoiceController` has an argument named `currencyConverter`. By this, AngularJS knows about the
|
||||
dependency between the controller and the service and calls the controller with the service instance as argument.
|
||||
|
||||
The last thing that changed in the example between the previous section and this section is that we
|
||||
now pass an array to the `module.controller` function, instead of a plain function. The array first
|
||||
contains the names of the service dependencies that the controller needs. The last entry
|
||||
in the array is the controller constructor function.
|
||||
Angular uses this array syntax to define the dependencies so that the DI also works after minifying
|
||||
AngularJS uses this array syntax to define the dependencies so that the DI also works after minifying
|
||||
the code, which will most probably rename the argument name of the controller constructor function
|
||||
to something shorter like `a`.
|
||||
|
||||
## Accessing the backend
|
||||
|
||||
Let's finish our example by fetching the exchange rates from the [Fixer.io](http://fixer.io) exchange rate API.
|
||||
The following example shows how this is done with Angular:
|
||||
The following example shows how this is done with AngularJS:
|
||||
|
||||
<example name="guide-concepts-3" ng-app-included="true">
|
||||
<file name="invoice3.js">
|
||||
@@ -371,7 +371,7 @@ The following example shows how this is done with Angular:
|
||||
|
||||
What changed?
|
||||
Our `currencyConverter` service of the `finance` module now uses the {@link ng.$http `$http`}, a
|
||||
built-in service provided by Angular for accessing a server backend. `$http` is a wrapper around
|
||||
built-in service provided by AngularJS for accessing a server backend. `$http` is a wrapper around
|
||||
[`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
||||
and [JSONP](http://en.wikipedia.org/wiki/JSONP) transports.
|
||||
|
||||
|
||||
@@ -5,16 +5,21 @@
|
||||
|
||||
# Understanding Controllers
|
||||
|
||||
In Angular, a Controller is defined by a JavaScript **constructor function** that is used to augment the
|
||||
{@link scope Angular Scope}.
|
||||
In AngularJS, a Controller is defined by a JavaScript **constructor function** that is used to augment the
|
||||
{@link scope AngularJS Scope}.
|
||||
|
||||
When a Controller is attached to the DOM via the {@link ng.directive:ngController ng-controller}
|
||||
directive, Angular will instantiate a new Controller object, using the specified Controller's
|
||||
**constructor function**. A new **child scope** will be created and made available as an injectable
|
||||
parameter to the Controller's constructor function as `$scope`.
|
||||
Controllers can be attached to the DOM in different ways. For each of them, AngularJS will
|
||||
instantiate a new Controller object, using the specified Controller's **constructor function**:
|
||||
|
||||
- the {@link ng.directive:ngController ngController} directive. A new **child scope** will be
|
||||
created and made available as an injectable parameter to the Controller's constructor function
|
||||
as `$scope`.
|
||||
- a route controller in a {@link ngRoute.$routeProvider $route definition}.
|
||||
- the controller of a {@link guide/directive regular directive}, or a
|
||||
{@link guide/component component directive}.
|
||||
|
||||
If the controller has been attached using the `controller as` syntax then the controller instance will
|
||||
be assigned to a property on the new scope.
|
||||
be assigned to a property on the scope.
|
||||
|
||||
Use controllers to:
|
||||
|
||||
@@ -24,18 +29,27 @@ Use controllers to:
|
||||
Do not use controllers to:
|
||||
|
||||
- Manipulate DOM — Controllers should contain only business logic.
|
||||
Putting any presentation logic into Controllers significantly affects its testability. Angular
|
||||
Putting any presentation logic into Controllers significantly affects its testability. AngularJS
|
||||
has {@link databinding databinding} for most cases and {@link guide/directive directives} to
|
||||
encapsulate manual DOM manipulation.
|
||||
- Format input — Use {@link forms angular form controls} instead.
|
||||
- Filter output — Use {@link guide/filter angular filters} instead.
|
||||
- Share code or state across controllers — Use {@link services angular
|
||||
- Format input — Use {@link forms AngularJS form controls} instead.
|
||||
- Filter output — Use {@link guide/filter AngularJS filters} instead.
|
||||
- Share code or state across controllers — Use {@link services AngularJS
|
||||
services} instead.
|
||||
- Manage the life-cycle of other components (for example, to create service instances).
|
||||
|
||||
In general, a Controller shouldn't try to do too much. It should contain only the business logic
|
||||
needed for a single view.
|
||||
|
||||
The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
|
||||
controllers into services and then using these services in Controllers via dependency injection.
|
||||
This is discussed in the {@link di Dependency Injection} and {@link services
|
||||
Services} sections of this guide.
|
||||
|
||||
|
||||
## Setting up the initial state of a `$scope` object
|
||||
|
||||
Typically, when you create an application you need to set up the initial state for the Angular
|
||||
Typically, when you create an application you need to set up the initial state for the AngularJS
|
||||
`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.
|
||||
The properties contain the **view model** (the model that will be presented by the view). All the
|
||||
`$scope` properties will be available to the {@link templates template} at the point in the DOM where the Controller
|
||||
@@ -52,13 +66,13 @@ myApp.controller('GreetingController', ['$scope', function($scope) {
|
||||
}]);
|
||||
```
|
||||
|
||||
We create an {@link module Angular Module}, `myApp`, for our application. Then we add the controller's
|
||||
We create an {@link module AngularJS Module}, `myApp`, for our application. Then we add the controller's
|
||||
constructor function to the module using the `.controller()` method. This keeps the controller's
|
||||
constructor function out of the global scope.
|
||||
|
||||
<div class="alert alert-info">
|
||||
We have used an **inline injection annotation** to explicitly specify the dependency
|
||||
of the Controller on the `$scope` service provided by Angular. See the guide on
|
||||
of the Controller on the `$scope` service provided by AngularJS. See the guide on
|
||||
{@link guide/di Dependency Injection} for more information.
|
||||
</div>
|
||||
|
||||
@@ -88,7 +102,7 @@ myApp.controller('DoubleController', ['$scope', function($scope) {
|
||||
}]);
|
||||
```
|
||||
|
||||
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
|
||||
Once the Controller has been attached to the DOM, the `double` method can be invoked in an AngularJS
|
||||
expression in the template:
|
||||
|
||||
```js
|
||||
@@ -99,29 +113,13 @@ expression in the template:
|
||||
|
||||
As discussed in the {@link concepts Concepts} section of this guide, any
|
||||
objects (or primitives) assigned to the scope become model properties. Any methods assigned to
|
||||
the scope are available in the template/view, and can be invoked via angular expressions
|
||||
the scope are available in the template/view, and can be invoked via AngularJS expressions
|
||||
and `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).
|
||||
|
||||
## Using Controllers Correctly
|
||||
|
||||
In general, a Controller shouldn't try to do too much. It should contain only the business logic
|
||||
needed for a single view.
|
||||
|
||||
The most common way to keep Controllers slim is by encapsulating work that doesn't belong to
|
||||
controllers into services and then using these services in Controllers via dependency injection.
|
||||
This is discussed in the {@link di Dependency Injection} and {@link services
|
||||
Services} sections of this guide.
|
||||
|
||||
|
||||
# Associating Controllers with Angular Scope Objects
|
||||
|
||||
You can associate Controllers with scope objects implicitly via the {@link ng.directive:ngController ngController
|
||||
directive} or {@link ngRoute.$route $route service}.
|
||||
|
||||
|
||||
## Simple Spicy Controller Example
|
||||
|
||||
To illustrate further how Controller components work in Angular, let's create a little app with the
|
||||
To illustrate further how Controller components work in AngularJS, let's create a little app with the
|
||||
following components:
|
||||
|
||||
- A {@link templates template} with two buttons and a simple message
|
||||
@@ -159,7 +157,7 @@ string "very". Depending on which button is clicked, the `spice` model is set to
|
||||
|
||||
Things to notice in the example above:
|
||||
|
||||
- The `ng-controller` directive is used to (implicitly) create a scope for our template, and the
|
||||
- The `ngController` directive is used to (implicitly) create a scope for our template, and the
|
||||
scope is augmented (managed) by the `SpicyController` Controller.
|
||||
- `SpicyController` is just a plain JavaScript function. As an (optional) naming convention the name
|
||||
starts with capital letter and ends with "Controller".
|
||||
@@ -262,7 +260,7 @@ Inheritance works with methods in the same way as it does with properties. So in
|
||||
examples, all of the properties could be replaced with methods that return string values.
|
||||
|
||||
|
||||
# Testing Controllers
|
||||
## Testing Controllers
|
||||
|
||||
Although there are many ways to test a Controller, one of the best conventions, shown below,
|
||||
involves injecting the {@link ng.$rootScope $rootScope} and {@link ng.$controller $controller}:
|
||||
|
||||
@@ -4,38 +4,38 @@
|
||||
@description
|
||||
|
||||
|
||||
Angular sets these CSS classes. It is up to your application to provide useful styling.
|
||||
AngularJS sets these CSS classes. It is up to your application to provide useful styling.
|
||||
|
||||
# CSS classes used by angular
|
||||
# CSS classes used by AngularJS
|
||||
|
||||
* `ng-scope`
|
||||
- **Usage:** angular applies this class to any element for which a new {@link $rootScope scope}
|
||||
- **Usage:** AngularJS applies this class to any element for which a new {@link $rootScope scope}
|
||||
is defined. (see {@link guide/scope scope} guide for more information about scopes)
|
||||
|
||||
* `ng-isolate-scope`
|
||||
- **Usage:** angular applies this class to any element for which a new
|
||||
- **Usage:** AngularJS applies this class to any element for which a new
|
||||
{@link guide/directive#isolating-the-scope-of-a-directive isolate scope} is defined.
|
||||
|
||||
* `ng-binding`
|
||||
- **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or
|
||||
- **Usage:** AngularJS 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)
|
||||
|
||||
* `ng-invalid`, `ng-valid`
|
||||
- **Usage:** angular applies this class to a form control widget element if that element's input does
|
||||
- **Usage:** AngularJS applies this class to a form control widget element if that element's input does
|
||||
not pass validation. (see {@link ng.directive:input input} directive)
|
||||
|
||||
* `ng-pristine`, `ng-dirty`
|
||||
- **Usage:** angular {@link ng.directive:ngModel ngModel} directive applies `ng-pristine` class
|
||||
- **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-pristine` class
|
||||
to a new form control widget which did not have user interaction. Once the user interacts with
|
||||
the form control, the class is changed to `ng-dirty`.
|
||||
|
||||
* `ng-touched`, `ng-untouched`
|
||||
- **Usage:** angular {@link ng.directive:ngModel ngModel} directive applies `ng-untouched` class
|
||||
- **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-untouched` class
|
||||
to a new form control widget which has not been blurred. Once the user blurs the form control,
|
||||
the class is changed to `ng-touched`.
|
||||
|
||||
|
||||
## Related Topics
|
||||
|
||||
* {@link guide/templates Angular Templates}
|
||||
* {@link guide/forms Angular Forms}
|
||||
* {@link guide/templates AngularJS Templates}
|
||||
* {@link guide/forms AngularJS Forms}
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
|
||||
# Data Binding
|
||||
|
||||
Data-binding in Angular apps is the automatic synchronization of data between the model and view
|
||||
components. The way that Angular implements data-binding lets you treat the model as the
|
||||
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view
|
||||
components. The way that AngularJS implements data-binding lets you treat the model as the
|
||||
single-source-of-truth in your application. The view is a projection of the model at all times.
|
||||
When the model changes, the view reflects the change, and vice versa.
|
||||
|
||||
@@ -19,10 +19,10 @@ or related sections of the view are NOT automatically reflected in the view. Wor
|
||||
that the user makes to the view are not reflected in the model. This means that the developer has
|
||||
to write code that constantly syncs the view with the model and the model with the view.
|
||||
|
||||
## Data Binding in Angular Templates
|
||||
## Data Binding in AngularJS Templates
|
||||
|
||||
<img class="right" src="img/Two_Way_Data_Binding.png"/><br />
|
||||
Angular templates work differently. First the template (which is the uncompiled HTML along with
|
||||
AngularJS templates work differently. First the template (which is the uncompiled HTML along with
|
||||
any additional markup or directives) is compiled on the browser. The compilation step produces a
|
||||
live view. Any changes to the view are immediately reflected in the model, and any changes in
|
||||
the model are propagated to the view. The model is the single-source-of-truth for the application
|
||||
@@ -36,5 +36,5 @@ isolation without the view and the related DOM/browser dependency.
|
||||
|
||||
## Related Topics
|
||||
|
||||
* {@link scope Angular Scopes}
|
||||
* {@link templates Angular Templates}
|
||||
* {@link scope AngularJS Scopes}
|
||||
* {@link templates AngularJS Templates}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
## What are decorators?
|
||||
|
||||
Decorators are a design pattern that is used to separate modification or *decoration* of a class without modifying the
|
||||
original source code. In Angular, decorators are functions that allow a service, directive or filter to be modified
|
||||
original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified
|
||||
prior to its usage.
|
||||
|
||||
## How to use decorators
|
||||
|
||||
+32
-24
@@ -8,32 +8,40 @@
|
||||
Dependency Injection (DI) is a software design pattern that deals with how components get hold of
|
||||
their dependencies.
|
||||
|
||||
The Angular injector subsystem is in charge of creating components, resolving their dependencies,
|
||||
The AngularJS injector subsystem is in charge of creating components, resolving their dependencies,
|
||||
and providing them to other components as requested.
|
||||
|
||||
|
||||
## Using Dependency Injection
|
||||
|
||||
DI is pervasive throughout Angular. You can use it when defining components or when providing `run`
|
||||
and `config` blocks for a module.
|
||||
Dependency Injection is pervasive throughout AngularJS. You can use it when defining components
|
||||
or when providing `run` and `config` blocks for a module.
|
||||
|
||||
- Components such as services, directives, filters, and animations are defined by an injectable
|
||||
factory method or constructor function. These components can be injected with "service" and "value"
|
||||
components as dependencies.
|
||||
- {@link angular.Module#service Services}, {@link angular.Module#directive directives},
|
||||
{@link angular.Module#filter filters}, and {@link angular.Module#animation animations} are
|
||||
defined by an injectable factory method or constructor function, and can be injected with
|
||||
"services", "values", and "constants" as dependencies.
|
||||
|
||||
- Controllers are defined by a constructor function, which can be injected with any of the "service"
|
||||
and "value" components as dependencies, but they can also be provided with special dependencies. See
|
||||
{@link di#controllers Controllers} below for a list of these special dependencies.
|
||||
- {@link ng.$controller Controllers} are defined by a constructor function, which can be injected
|
||||
with any of the "service" and "value" as dependencies, but they can also be provided with
|
||||
"special dependencies". See {@link di#controllers Controllers} below for a list of these
|
||||
special dependencies.
|
||||
|
||||
- The `run` method accepts a function, which can be injected with "service", "value" and "constant"
|
||||
components as dependencies. Note that you cannot inject "providers" into `run` blocks.
|
||||
- The {@link angular.Module#run `run`} method accepts a function, which can be injected with
|
||||
"services", "values" and, "constants" as dependencies. Note that you cannot inject "providers"
|
||||
into `run` blocks.
|
||||
|
||||
- The `config` method accepts a function, which can be injected with "provider" and "constant"
|
||||
components as dependencies. Note that you cannot inject "service" or "value" components into
|
||||
configuration.
|
||||
- The {@link angular.Module#config `config`} method accepts a function, which can be injected with
|
||||
"providers" and "constants" as dependencies. Note that you cannot inject "services" or
|
||||
"values" into configuration.
|
||||
|
||||
See {@link module#module-loading-dependencies Modules} for more details about `run` and `config`
|
||||
blocks.
|
||||
- The {@link angular.Module#provider `provider`} method can only be injected with other "providers".
|
||||
However, only those that have been **registered beforehand** can be injected. This is different
|
||||
from services, where the order of registration does not matter.
|
||||
|
||||
See {@link module#module-loading Modules} for more details about `run` and `config`
|
||||
blocks and {@link guide/providers Providers} for more information about the different provider
|
||||
types.
|
||||
|
||||
|
||||
### Factory Methods
|
||||
@@ -100,7 +108,7 @@ Moreover, additional dependencies are made available to Controllers:
|
||||
|
||||
## Dependency Annotation
|
||||
|
||||
Angular invokes certain functions (like service factories and controllers) via the injector.
|
||||
AngularJS invokes certain functions (like service factories and controllers) via the injector.
|
||||
You need to annotate these functions so that the injector knows what services to inject into
|
||||
the function. There are three ways of annotating your code with service name information:
|
||||
|
||||
@@ -204,11 +212,11 @@ angular.module('myApp', [])
|
||||
// $rootScope is implicitly injected
|
||||
})
|
||||
.run(['willBreak', function(willBreak) {
|
||||
// Angular will throw when this runs
|
||||
// AngularJS will throw when this runs
|
||||
}]);
|
||||
```
|
||||
|
||||
When the `willBreak` service is instantiated, Angular will throw an error because of strict mode.
|
||||
When the `willBreak` service is instantiated, AngularJS will throw an error because of strict mode.
|
||||
This is useful when using a tool like [ng-annotate](https://github.com/olov/ng-annotate) to
|
||||
ensure that all of your application components have annotations.
|
||||
|
||||
@@ -225,7 +233,7 @@ angular.bootstrap(document, ['myApp'], {
|
||||
|
||||
## Why Dependency Injection?
|
||||
|
||||
This section motivates and explains Angular's use of DI. For how to use DI, see above.
|
||||
This section motivates and explains AngularJS's use of DI. For how to use DI, see above.
|
||||
|
||||
For in-depth discussion about DI, see
|
||||
[Dependency Injection](http://en.wikipedia.org/wiki/Dependency_injection) at Wikipedia,
|
||||
@@ -264,7 +272,7 @@ code that constructs `SomeClass`.
|
||||
|
||||
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-module-injector.png">
|
||||
|
||||
To manage the responsibility of dependency creation, each Angular application has an {@link
|
||||
To manage the responsibility of dependency creation, each AngularJS application has an {@link
|
||||
angular.injector injector}. The injector is a
|
||||
[service locator](http://en.wikipedia.org/wiki/Service_locator_pattern) that is responsible for
|
||||
construction and lookup of dependencies.
|
||||
@@ -290,7 +298,7 @@ myModule.factory('greeter', function($window) {
|
||||
```
|
||||
|
||||
Create a new injector that can provide components defined in our `myModule` module and request our
|
||||
`greeter` service from the injector. (This is usually done automatically by angular bootstrap).
|
||||
`greeter` service from the injector. (This is usually done automatically by AngularJS bootstrap).
|
||||
|
||||
```js
|
||||
var injector = angular.injector(['ng', 'myModule']);
|
||||
@@ -317,7 +325,7 @@ function MyController($scope, greeter) {
|
||||
}
|
||||
```
|
||||
|
||||
When Angular compiles the HTML, it processes the `ng-controller` directive, which in turn
|
||||
When AngularJS compiles the HTML, it processes the `ng-controller` directive, which in turn
|
||||
asks the injector to create an instance of the controller and its dependencies.
|
||||
|
||||
```js
|
||||
@@ -332,6 +340,6 @@ This is the best outcome. The application code simply declares the dependencies
|
||||
having to deal with the injector. This setup does not break the Law of Demeter.
|
||||
|
||||
<div class="alert alert-info">
|
||||
**Note:** Angular uses
|
||||
**Note:** AngularJS uses
|
||||
[**constructor injection**](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).
|
||||
</div>
|
||||
|
||||
@@ -24,9 +24,9 @@ name, comment or CSS class) that tell AngularJS's **HTML compiler** ({@link ng.$
|
||||
to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform
|
||||
the DOM element and its children.
|
||||
|
||||
Angular comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`.
|
||||
Much like you create controllers and services, you can create your own directives for Angular to use.
|
||||
When Angular {@link guide/bootstrap bootstraps} your application, the
|
||||
AngularJS comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`.
|
||||
Much like you create controllers and services, you can create your own directives for AngularJS to use.
|
||||
When AngularJS {@link guide/bootstrap bootstraps} your application, the
|
||||
{@link guide/compiler HTML compiler} traverses the DOM matching directives against the DOM elements.
|
||||
|
||||
<div class="alert alert-info">
|
||||
@@ -41,7 +41,7 @@ mirrors the process of compiling source code in
|
||||
|
||||
## Matching Directives
|
||||
|
||||
Before we can write a directive, we need to know how Angular's {@link guide/compiler HTML compiler}
|
||||
Before we can write a directive, we need to know how AngularJS's {@link guide/compiler HTML compiler}
|
||||
determines when to use a given directive.
|
||||
|
||||
Similar to the terminology used when an [element **matches** a selector](https://developer.mozilla.org/en-US/docs/Web/API/Element.matches), we say an element **matches** a
|
||||
@@ -67,7 +67,7 @@ And the following `<person>` element **matches** the `person` directive:
|
||||
|
||||
### Normalization
|
||||
|
||||
Angular **normalizes** an element's tag and attribute name to determine which elements match which
|
||||
AngularJS **normalizes** an element's tag and attribute name to determine which elements match which
|
||||
directives. We typically refer to directives by their case-sensitive
|
||||
[camelCase](http://en.wikipedia.org/wiki/CamelCase) **normalized** name (e.g. `ngModel`).
|
||||
However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case
|
||||
@@ -178,7 +178,7 @@ and compilation process.
|
||||
directive names. For instance, if you created a `<carousel>` directive, it would be problematic if HTML7
|
||||
introduced the same element. A two or three letter prefix (e.g. `btfCarousel`) works well. Similarly, do
|
||||
not prefix your own directives with `ng` or they might conflict with directives included in a future
|
||||
version of Angular.
|
||||
version of AngularJS.
|
||||
</div>
|
||||
|
||||
For the following examples, we'll use the prefix `my` (e.g. `myCustomer`).
|
||||
@@ -257,7 +257,7 @@ using `templateUrl` instead:
|
||||
</example>
|
||||
|
||||
`templateUrl` can also be a function which returns the URL of an HTML template to be loaded and
|
||||
used for the directive. Angular will call the `templateUrl` function with two parameters: the
|
||||
used for the directive. AngularJS will call the `templateUrl` function with two parameters: the
|
||||
element that the directive was called on, and an `attr` object associated with that element.
|
||||
|
||||
<div class="alert alert-warning">
|
||||
@@ -544,7 +544,7 @@ directive logic will be put.
|
||||
`link` takes a function with the following signature,
|
||||
`function link(scope, element, attrs, controller, transcludeFn) { ... }`, where:
|
||||
|
||||
* `scope` is an Angular scope object.
|
||||
* `scope` is an AngularJS scope object.
|
||||
* `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
|
||||
corresponding attribute values.
|
||||
@@ -614,7 +614,7 @@ function.
|
||||
We register an event `element.on('$destroy', ...)`. What fires this `$destroy` event?
|
||||
|
||||
There are a few special events that AngularJS emits. When a DOM node that has been compiled
|
||||
with Angular's compiler is destroyed, it emits a `$destroy` event. Similarly, when an AngularJS
|
||||
with AngularJS's compiler is destroyed, it emits a `$destroy` event. Similarly, when an AngularJS
|
||||
scope is destroyed, it broadcasts a `$destroy` event to listening scopes.
|
||||
|
||||
By listening to this event, you can remove event listeners that might cause memory leaks.
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
<div class="alert alert-danger">
|
||||
**Note:** In the past, end-to-end testing could be done with a deprecated tool called
|
||||
[Angular Scenario Runner](http://code.angularjs.org/1.2.16/docs/guide/e2e-testing). That tool
|
||||
is now in maintenance mode.
|
||||
[AngularJS Scenario Runner](http://code.angularjs.org/1.2.16/docs/guide/e2e-testing). That tool
|
||||
is now in maintenance mode, and will be removed in version 1.7.0.
|
||||
</div>
|
||||
|
||||
As applications grow in size and complexity, it becomes unrealistic to rely on manual testing to
|
||||
@@ -19,7 +19,7 @@ these problems.
|
||||
|
||||
We have built [Protractor](https://github.com/angular/protractor), an end
|
||||
to end test runner which simulates user interactions that will help you verify the health of your
|
||||
Angular application.
|
||||
AngularJS application.
|
||||
|
||||
## Using Protractor
|
||||
|
||||
@@ -76,7 +76,7 @@ filter the list of items.
|
||||
|
||||
## Example
|
||||
See the [angular-seed](https://github.com/angular/angular-seed) project for more examples, or look
|
||||
at the embedded examples in the Angular documentation (For example, {@link $http $http}
|
||||
at the embedded examples in the AngularJS documentation (For example, {@link $http $http}
|
||||
has an end-to-end test in the example under the `protractor.js` tag).
|
||||
|
||||
## Caveats
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
@sortOrder 270
|
||||
@description
|
||||
|
||||
# Angular Expressions
|
||||
# AngularJS Expressions
|
||||
|
||||
Angular expressions are JavaScript-like code snippets that are mainly placed in
|
||||
AngularJS expressions are JavaScript-like code snippets that are mainly placed in
|
||||
interpolation bindings such as `<span title="{{ attrBinding }}">{{ textBinding }}</span>`,
|
||||
but also used directly in directive attributes such as `ng-click="functionExpression()"`.
|
||||
|
||||
For example, these are valid expressions in Angular:
|
||||
For example, these are valid expressions in AngularJS:
|
||||
|
||||
* `1+2`
|
||||
* `a+b`
|
||||
@@ -17,38 +17,38 @@ For example, these are valid expressions in Angular:
|
||||
* `items[index]`
|
||||
|
||||
|
||||
## Angular Expressions vs. JavaScript Expressions
|
||||
## AngularJS Expressions vs. JavaScript Expressions
|
||||
|
||||
Angular expressions are like JavaScript expressions with the following differences:
|
||||
AngularJS expressions are like JavaScript expressions with the following differences:
|
||||
|
||||
* **Context:** JavaScript expressions are evaluated against the global `window`.
|
||||
In Angular, expressions are evaluated against a {@link ng.$rootScope.Scope `scope`} object.
|
||||
In AngularJS, expressions are evaluated against a {@link ng.$rootScope.Scope `scope`} object.
|
||||
|
||||
* **Forgiving:** In JavaScript, trying to evaluate undefined properties generates `ReferenceError`
|
||||
or `TypeError`. In Angular, expression evaluation is forgiving to `undefined` and `null`.
|
||||
or `TypeError`. In AngularJS, expression evaluation is forgiving to `undefined` and `null`.
|
||||
|
||||
* **Filters:** You can use {@link guide/filter filters} within expressions to format data before
|
||||
displaying it.
|
||||
|
||||
* **No Control Flow Statements:** You cannot use the following in an Angular expression:
|
||||
* **No Control Flow Statements:** You cannot use the following in an AngularJS expression:
|
||||
conditionals, loops, or exceptions.
|
||||
|
||||
* **No Function Declarations:** You cannot declare functions in an Angular expression,
|
||||
* **No Function Declarations:** You cannot declare functions in an AngularJS expression,
|
||||
even inside `ng-init` directive.
|
||||
|
||||
* **No RegExp Creation With Literal Notation:** You cannot create regular expressions
|
||||
in an AngularJS expression. An exception to this rule is {@link ngPattern `ng-pattern`} which accepts valid
|
||||
RegExp.
|
||||
in an AngularJS expression. An exception to this rule is {@link ngPattern `ng-pattern`} which
|
||||
accepts valid RegExp.
|
||||
|
||||
* **No Object Creation With New Operator:** You cannot use `new` operator in an Angular expression.
|
||||
* **No Object Creation With New Operator:** You cannot use `new` operator in an AngularJS expression.
|
||||
|
||||
* **No Bitwise, Comma, And Void Operators:** You cannot use
|
||||
[Bitwise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators),
|
||||
`,` or `void` operators in an Angular expression.
|
||||
`,` or `void` operators in an AngularJS expression.
|
||||
|
||||
|
||||
If you want to run more complex JavaScript code, you should make it a controller method and call
|
||||
the method from your view. If you want to `eval()` an Angular expression yourself, use the
|
||||
the method from your view. If you want to `eval()` an AngularJS expression yourself, use the
|
||||
{@link ng.$rootScope.Scope#$eval `$eval()`} method.
|
||||
|
||||
## Example
|
||||
@@ -111,10 +111,10 @@ You can try evaluating different expressions here:
|
||||
|
||||
## Context
|
||||
|
||||
Angular does not use JavaScript's `eval()` to evaluate expressions. Instead Angular's
|
||||
AngularJS does not use JavaScript's `eval()` to evaluate expressions. Instead AngularJS's
|
||||
{@link ng.$parse $parse} service processes these expressions.
|
||||
|
||||
Angular expressions do not have direct access to global variables like `window`, `document` or `location`.
|
||||
AngularJS expressions do not have direct access to global variables like `window`, `document` or `location`.
|
||||
This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.
|
||||
|
||||
Instead use services like `$window` and `$location` in functions on controllers, which are then called from expressions.
|
||||
@@ -181,7 +181,7 @@ Similarly, invoking a function `a.b.c()` on `undefined` or `null` simply returns
|
||||
## No Control Flow Statements
|
||||
|
||||
Apart from the ternary operator (`a ? b : c`), you cannot write a control flow statement in an
|
||||
expression. The reason behind this is core to the Angular philosophy that application logic should
|
||||
expression. The reason behind this is core to the AngularJS philosophy that application logic should
|
||||
be in controllers, not the views. If you need a real conditional, loop, or to throw from a view
|
||||
expression, delegate to a JavaScript method instead.
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
@sortOrder 150
|
||||
@description
|
||||
|
||||
# External Angular 1 Resources
|
||||
# External AngularJS Resources
|
||||
|
||||
This is a collection of external, 3rd party resources for learning and developing Angular.
|
||||
This is a collection of external, 3rd party resources for learning and developing AngularJS.
|
||||
|
||||
## Articles, Videos, and Projects
|
||||
|
||||
@@ -21,7 +21,7 @@ This is a collection of external, 3rd party resources for learning and developin
|
||||
|
||||
#### Application Structure & Style Guides
|
||||
|
||||
* [Angular Styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
|
||||
* [AngularJS Styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
|
||||
* [Architecture, file structure, components, one-way dataflow and best practices](https://github.com/toddmotto/angular-styleguide)
|
||||
* [When to use directives, controllers or services](http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/)
|
||||
* [Service vs Factory](http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html)
|
||||
@@ -32,8 +32,8 @@ This is a collection of external, 3rd party resources for learning and developin
|
||||
|
||||
#### Mobile
|
||||
|
||||
* [Angular on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html)
|
||||
* [Angular and Cordova](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)
|
||||
* [AngularJS on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html)
|
||||
* [AngularJS and Cordova](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)
|
||||
* [Ionic Framework](http://ionicframework.com/)
|
||||
|
||||
#### Deployment
|
||||
@@ -48,7 +48,7 @@ This is a collection of external, 3rd party resources for learning and developin
|
||||
|
||||
* **Django:** [Tutorial](http://blog.mourafiq.com/post/55034504632/end-to-end-web-app-with-django-rest-framework), [Integrating AngularJS with Django](http://django-angular.readthedocs.org/en/latest/integration.html), [Getting Started with Django Rest Framework and AngularJS](http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html)
|
||||
* **FireBase:** [AngularFire](http://angularfire.com/), [Realtime Apps with AngularJS and FireBase (video)](http://www.youtube.com/watch?v=C7ZI7z7qnHU)
|
||||
* **Google Cloud Platform: **[with Cloud Endpoints](https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/), [with Go](https://github.com/GoogleCloudPlatform/appengine-angular-gotodos)
|
||||
* **Google Cloud Platform:** [with Go](https://github.com/GoogleCloudPlatform/appengine-angular-gotodos)
|
||||
* **Hood.ie:** [60 Minutes to Awesome](http://www.roberthorvick.com/2013/06/30/todomvc-angularjs-hood-ie-60-minutes-to-awesome/)
|
||||
* **MEAN Stack: **[Blog post](http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and), [Setup](http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/), [GDL Video](https://developers.google.com/live/shows/913996610)
|
||||
* **Rails: **[Tutorial](http://coderberry.me/blog/2013/04/22/angularjs-on-rails-4-part-1/), [AngularJS with Rails4](https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4), [angularjs-rails](https://github.com/hiravgandhi/angularjs-rails)
|
||||
@@ -75,12 +75,12 @@ This is a collection of external, 3rd party resources for learning and developin
|
||||
* **Getting Started:** [Comparison of the options for starting a new project](http://www.dancancro.com/comparison-of-angularjs-application-starters/)
|
||||
* **Debugging:** [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en)
|
||||
* **Editor support:** [Webstorm](http://plugins.jetbrains.com/plugin/6971) (and [video](http://www.youtube.com/watch?v=LJOyrSh1kDU)), [Sublime Text](https://github.com/angular-ui/AngularJS-sublime-package), [Visual Studio](http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012), [Atom](https://github.com/angular-ui/AngularJS-Atom), [Vim](https://github.com/burnettk/vim-angular)
|
||||
* **Workflow:** [Yeoman.io](https://github.com/yeoman/generator-angular) and [Angular Yeoman Tutorial](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)
|
||||
* **Workflow:** [Yeoman.io](https://github.com/yeoman/generator-angular) and [AngularJS Yeoman Tutorial](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)
|
||||
|
||||
## Complementary Libraries
|
||||
|
||||
This is a list of libraries that enhance Angular, add common UI components or integrate with other libraries.
|
||||
You can find a larger list of Angular external libraries at [ngmodules.org](http://ngmodules.org/).
|
||||
This is a list of libraries that enhance AngularJS, add common UI components or integrate with other libraries.
|
||||
You can find a larger list of AngularJS external libraries at [ngmodules.org](http://ngmodules.org/).
|
||||
|
||||
* **Advanced Routing:** [UI-Router](https://github.com/angular-ui/ui-router)
|
||||
* **Authentication:** [Http Auth Interceptor](https://github.com/witoldsz/angular-http-auth)
|
||||
@@ -98,21 +98,21 @@ You can find a larger list of Angular external libraries at [ngmodules.org](http
|
||||
- Data Modeling [JS-Data-Angular](https://github.com/js-data/js-data-angular)
|
||||
* **Fileupload:**
|
||||
- [ng-file-upload](https://github.com/danialfarid/ng-file-upload)
|
||||
- [blueimp-fileupload for Angular](https://blueimp.github.io/jQuery-File-Upload/angularjs.html)
|
||||
- [blueimp-fileupload for AngularJS](https://blueimp.github.io/jQuery-File-Upload/angularjs.html)
|
||||
* **General UI Libraries:**
|
||||
- [Angular Material](https://material.angularjs.org/latest/)
|
||||
- [Angular UI Bootstrap](http://angular-ui.github.io/)
|
||||
- [AngularJS Material](https://material.angularjs.org/latest/)
|
||||
- [AngularJS UI Bootstrap](http://angular-ui.github.io/)
|
||||
- [AngularStrap for Bootstrap 3](http://mgcrea.github.io/angular-strap/)
|
||||
- [KendoUI](http://kendo-labs.github.io/angular-kendo/#/)
|
||||
- [Wijmo](http://wijmo.com/tag/angularjs-2/)
|
||||
* **Specific UI Elements:**
|
||||
- [ngInfiniteScroll](https://sroze.github.io/ngInfiniteScroll/)
|
||||
- [ngTable](https://github.com/esvit/ng-table)
|
||||
- [Angular UI Grid](http://angular-ui.github.io/grid)
|
||||
- [AngularJS UI Grid](http://angular-ui.github.io/grid)
|
||||
- [Toaster Notifications](https://github.com/jirikavi/AngularJS-Toaster)
|
||||
- [textAngular Rich Text Editor / contenteditable](http://textangular.com/) (Rich Text Editor /
|
||||
binding to contenteditable)
|
||||
- [Angular UI Map (Google Maps)](https://github.com/angular-ui/ui-map)
|
||||
- [AngularJS UI Map (Google Maps)](https://github.com/angular-ui/ui-map)
|
||||
|
||||
## General Learning Resources
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
# Filters
|
||||
|
||||
Filters format the value of an expression for display to the user. They can be used in view
|
||||
templates, controllers or services. Angular comes with a collection of
|
||||
templates, controllers or services. AngularJS comes with a collection of
|
||||
[built-in filters](api/ng/filter), but it is easy to define your own as well.
|
||||
|
||||
The underlying API is the {@link ng.$filterProvider}.
|
||||
@@ -44,7 +44,7 @@ as inputs. Filters that receive [Objects](https://developer.mozilla.org/en-US/do
|
||||
as input are executed on each `$digest`, as it would be too costly to track if the inputs have changed.
|
||||
|
||||
2. Filters that are marked as `$stateful` are also executed on each $digest.
|
||||
See {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no Angular
|
||||
See {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no AngularJS
|
||||
core filters are $stateful.
|
||||
|
||||
|
||||
@@ -110,12 +110,12 @@ function.
|
||||
|
||||
The filter function should be a [pure function](http://en.wikipedia.org/wiki/Pure_function), which
|
||||
means that it should always return the same result given the same input arguments and should not affect
|
||||
external state, for example, other Angular services. Angular relies on this contract and will by default
|
||||
external state, for example, other AngularJS services. AngularJS relies on this contract and will by default
|
||||
execute a filter only when the inputs to the function change.
|
||||
{@link guide/filter#stateful-filters Stateful filters} are possible, but less performant.
|
||||
|
||||
<div class="alert alert-warning">
|
||||
**Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
|
||||
**Note:** Filter names must be valid AngularJS {@link expression} identifiers, such as `uppercase` or `orderBy`.
|
||||
Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
|
||||
your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
|
||||
(`myapp_subsection_filterx`).
|
||||
@@ -162,7 +162,7 @@ text upper-case.
|
||||
### Stateful filters
|
||||
|
||||
It is strongly discouraged to write filters that are stateful, because the execution of those can't
|
||||
be optimized by Angular, which often leads to performance issues. Many stateful filters can be
|
||||
be optimized by AngularJS, which often leads to performance issues. Many stateful filters can be
|
||||
converted into stateless filters just by exposing the hidden state as a model and turning it into an
|
||||
argument for the filter.
|
||||
|
||||
|
||||
@@ -303,7 +303,7 @@ after last change.
|
||||
|
||||
## Custom Validation
|
||||
|
||||
Angular provides basic implementation for most common HTML5 {@link ng.directive:input input}
|
||||
AngularJS provides basic implementation for most common HTML5 {@link ng.directive:input input}
|
||||
types: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url},
|
||||
{@link input[email] email}, {@link input[date] date}, {@link input[radio] radio}, {@link input[checkbox] checkbox}),
|
||||
as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`,
|
||||
@@ -314,7 +314,7 @@ the {@link ngModel.NgModelController `ngModelController`}. To get a hold of the
|
||||
you require it in the directive as shown in the example below.
|
||||
|
||||
Each function in the `$validators` object receives the `modelValue` and the `viewValue`
|
||||
as parameters. Angular will then call `$setValidity` internally with the function's return value
|
||||
as parameters. AngularJS will then call `$setValidity` internally with the function's return value
|
||||
(`true`: valid, `false`: invalid). The validation functions are executed every time an input
|
||||
is changed (`$setViewValue` is called) or whenever the bound `model` changes.
|
||||
Validation happens after successfully running `$parsers` and `$formatters`, respectively.
|
||||
@@ -422,7 +422,7 @@ In the following example we create two directives:
|
||||
|
||||
## Modifying built-in validators
|
||||
|
||||
Since Angular itself uses `$validators`, you can easily replace or remove built-in validators,
|
||||
Since AngularJS itself uses `$validators`, you can easily replace or remove built-in validators,
|
||||
should you find it necessary. The following example shows you how to overwrite the email validator
|
||||
in `input[email]` from a custom directive so that it requires a specific top-level domain,
|
||||
`example.com` to be present.
|
||||
@@ -451,10 +451,10 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
|
||||
return {
|
||||
require: '?ngModel',
|
||||
link: function(scope, elm, attrs, ctrl) {
|
||||
// only apply the validator if ngModel is present and Angular has added the email validator
|
||||
// only apply the validator if ngModel is present and AngularJS has added the email validator
|
||||
if (ctrl && ctrl.$validators.email) {
|
||||
|
||||
// this will overwrite the default Angular email validator
|
||||
// this will overwrite the default AngularJS email validator
|
||||
ctrl.$validators.email = function(modelValue) {
|
||||
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
|
||||
};
|
||||
@@ -467,7 +467,7 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
|
||||
|
||||
|
||||
## Implementing custom form controls (using `ngModel`)
|
||||
Angular implements all of the basic HTML form controls ({@link ng.directive:input input},
|
||||
AngularJS implements all of the basic HTML form controls ({@link ng.directive:input input},
|
||||
{@link ng.directive:select select}, {@link ng.directive:textarea textarea}),
|
||||
which should be sufficient for most cases. However, if you need more flexibility,
|
||||
you can write your own form control as a directive.
|
||||
|
||||
@@ -13,9 +13,9 @@ other locale-specific bits (such as date or currency formats) out of the applica
|
||||
application means providing translations and localized formats for the abstracted bits.
|
||||
|
||||
|
||||
## How does Angular support i18n/l10n?
|
||||
## How does AngularJS support i18n/l10n?
|
||||
|
||||
Angular supports i18n/l10n for {@link ng.filter:date date}, {@link ng.filter:number number} and
|
||||
AngularJS supports i18n/l10n for {@link ng.filter:date date}, {@link ng.filter:number number} and
|
||||
{@link ng.filter:currency currency} filters.
|
||||
|
||||
Localizable pluralization is supported via the {@link ng.directive:ngPluralize `ngPluralize`
|
||||
@@ -23,11 +23,11 @@ directive}. Additionally, you can use {@link guide/i18n#messageformat-extension
|
||||
`$interpolate` for localizable pluralization and gender support in all interpolations via the
|
||||
`ngMessageFormat` module.
|
||||
|
||||
All localizable Angular components depend on locale-specific rule sets managed by the {@link
|
||||
All localizable AngularJS components depend on locale-specific rule sets managed by the {@link
|
||||
ng.$locale `$locale` service}.
|
||||
|
||||
There are a few examples that showcase how to use Angular filters with various locale rule sets in the
|
||||
[`i18n/e2e` directory](https://github.com/angular/angular.js/tree/master/i18n/e2e) of the Angular
|
||||
There are a few examples that showcase how to use AngularJS filters with various locale rule sets in the
|
||||
[`i18n/e2e` directory](https://github.com/angular/angular.js/tree/master/i18n/e2e) of the AngularJS
|
||||
source code.
|
||||
|
||||
|
||||
@@ -41,20 +41,20 @@ also valid. See the [ICU](http://userguide.icu-project.org/locale) website for m
|
||||
about using locale IDs.
|
||||
|
||||
|
||||
## Supported locales in Angular
|
||||
## Supported locales in AngularJS
|
||||
|
||||
Angular separates number and datetime format rule sets into different files, each file for a
|
||||
AngularJS separates number and datetime format rule sets into different files, each file for a
|
||||
particular locale. You can find a list of currently supported locales
|
||||
[here](https://github.com/angular/angular.js/tree/master/src/ngLocale)
|
||||
|
||||
|
||||
## Providing locale rules to Angular
|
||||
## Providing locale rules to AngularJS
|
||||
|
||||
There are two approaches to providing locale rules to Angular:
|
||||
There are two approaches to providing locale rules to AngularJS:
|
||||
|
||||
### 1. Pre-bundled rule sets
|
||||
|
||||
You can pre-bundle the desired locale file with Angular by concatenating the content of the
|
||||
You can pre-bundle the desired locale file with AngularJS by concatenating the content of the
|
||||
locale-specific file to the end of `angular.js` or `angular.min.js` file.
|
||||
|
||||
For example on *nix, to create an angular.js file that contains localization rules for german
|
||||
@@ -63,7 +63,7 @@ locale, you can do the following:
|
||||
`cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js`
|
||||
|
||||
When the application containing `angular_de-de.js` script instead of the generic angular.js script
|
||||
starts, Angular is automatically pre-configured with localization rules for the german locale.
|
||||
starts, AngularJS is automatically pre-configured with localization rules for the german locale.
|
||||
|
||||
### 2. Including a locale script in `index.html`
|
||||
|
||||
@@ -93,12 +93,12 @@ an extra script needs to be loaded.
|
||||
|
||||
## Caveats
|
||||
|
||||
Although Angular makes i18n convenient, there are several things you need to be conscious of as you
|
||||
Although AngularJS makes i18n convenient, there are several things you need to be conscious of as you
|
||||
develop your app.
|
||||
|
||||
### Currency symbol
|
||||
|
||||
Angular's {@link ng.filter:currency currency filter} allows you to use the default currency symbol
|
||||
AngularJS's {@link ng.filter:currency currency filter} allows you to use the default currency symbol
|
||||
from the {@link ng.$locale locale service}, or you can provide the filter with a custom currency
|
||||
symbol.
|
||||
|
||||
@@ -122,7 +122,7 @@ This is problematic because $1000 is not the same as ¥1000.
|
||||
In this case, you need to override the default currency symbol by providing the
|
||||
{@link ng.filter:currency} currency filter with a currency symbol as a parameter.
|
||||
|
||||
If we change the above to `{{ 1000 | currency:"USD$"}}`, Angular will always show a balance of
|
||||
If we change the above to `{{ 1000 | currency:"USD$"}}`, AngularJS will always show a balance of
|
||||
`USD$1000` regardless of locale.
|
||||
|
||||
### Translation length
|
||||
@@ -135,16 +135,16 @@ as expected even when their contents vary greatly in content size.
|
||||
|
||||
### Timezones
|
||||
|
||||
The Angular datetime filter uses the time zone settings of the browser. The same
|
||||
The AngularJS datetime filter uses the time zone settings of the browser. The same
|
||||
application will show different time information depending on the time zone settings of the
|
||||
computer that the application is running on. Neither JavaScript nor Angular currently supports
|
||||
computer that the application is running on. Neither JavaScript nor AngularJS currently supports
|
||||
displaying the date with a timezone specified by the developer.
|
||||
|
||||
|
||||
<a name="MessageFormat"></a>
|
||||
## MessageFormat extensions
|
||||
|
||||
You can write localizable plural and gender based messages in Angular interpolation expressions and
|
||||
You can write localizable plural and gender based messages in AngularJS interpolation expressions and
|
||||
`$interpolate` calls.
|
||||
|
||||
This syntax extension is provided by way of the `ngMessageFormat` module that your application can
|
||||
@@ -271,7 +271,7 @@ actual message text that occurs in curly braces. Whitespace is generally used t
|
||||
Here, `NUMERIC_EXPRESSION` is an expression that evaluates to a numeric value based on which the
|
||||
displayed message should change based on pluralization rules.
|
||||
|
||||
Following the Angular expression, you would denote the plural extension syntax by the `, plural,`
|
||||
Following the AngularJS expression, you would denote the plural extension syntax by the `, plural,`
|
||||
syntax element. The spaces there are optional.
|
||||
|
||||
This is followed by a list of selection keyword and corresponding message pairs. The "other"
|
||||
@@ -303,7 +303,7 @@ later.)
|
||||
#### Messages
|
||||
|
||||
Messages immediately follow a selection keyword and are optionally preceded by whitespace. They are
|
||||
written in single curly braces (`{}`). They may contain Angular interpolation syntax inside them.
|
||||
written in single curly braces (`{}`). They may contain AngularJS interpolation syntax inside them.
|
||||
In addition, the `#` symbol is a placeholder for the actual numeric value of the expression.
|
||||
|
||||
### Simple plural example
|
||||
@@ -316,7 +316,7 @@ In addition, the `#` symbol is a placeholder for the actual numeric value of the
|
||||
}}
|
||||
```
|
||||
|
||||
Because these messages can themselves contain Angular expressions, you could also write this as
|
||||
Because these messages can themselves contain AngularJS expressions, you could also write this as
|
||||
follows:
|
||||
|
||||
```text
|
||||
@@ -342,7 +342,7 @@ explain this with an example.
|
||||
}}
|
||||
```
|
||||
|
||||
When an `offset` is specified, the matching works as follows. First, the exact value of the Angular
|
||||
When an `offset` is specified, the matching works as follows. First, the exact value of the AngularJS
|
||||
expression is matched against the exact matches (i.e. `=N` selectors) to find a match. If there is
|
||||
one, that message is used. If there was no match, then the offset value is subtracted from the
|
||||
value of the expression and locale specific pluralization rules are applied to this new value to
|
||||
@@ -379,10 +379,10 @@ The syntax for gender based message selection looks like the following:
|
||||
Please note that whitespace (including newline) is generally insignificant except as part of the
|
||||
actual message text that occurs in curly braces. Whitespace is generally used to aid readability.
|
||||
|
||||
Here, `EXPRESSION` is an Angular expression that evaluates to the gender of the person that
|
||||
Here, `EXPRESSION` is an AngularJS expression that evaluates to the gender of the person that
|
||||
is used to select the message that should be displayed.
|
||||
|
||||
The Angular expression is followed by `, select,` where the spaces are optional.
|
||||
The AngularJS expression is followed by `, select,` where the spaces are optional.
|
||||
|
||||
This is followed by a list of selection keyword and corresponding message pairs. The "other"
|
||||
keyword and corresponding message are **required** but you may have as few or as many of the other
|
||||
@@ -392,13 +392,13 @@ matching is **case-sensitive**.
|
||||
#### Selection Keywords
|
||||
|
||||
Selection keywords are simple words like "male" and "female". The keyword, "other", and its
|
||||
corresponding message are required while others are optional. It is used when the Angular
|
||||
corresponding message are required while others are optional. It is used when the AngularJS
|
||||
expression does not match (case-insensitively) any of the other keywords specified.
|
||||
|
||||
#### Messages
|
||||
|
||||
Messages immediately follow a selection keyword and are optionally preceded by whitespace. They are
|
||||
written in single curly braces (`{}`). They may contain Angular interpolation syntax inside them.
|
||||
written in single curly braces (`{}`). They may contain AngularJS interpolation syntax inside them.
|
||||
|
||||
### Simple gender example
|
||||
|
||||
@@ -412,8 +412,8 @@ written in single curly braces (`{}`). They may contain Angular interpolation s
|
||||
|
||||
### Nesting
|
||||
|
||||
As mentioned in the syntax for plural and select, the embedded messages can contain Angular
|
||||
interpolation syntax. Since you can use MessageFormat extensions in Angular interpolation, this
|
||||
As mentioned in the syntax for plural and select, the embedded messages can contain AngularJS
|
||||
interpolation syntax. Since you can use MessageFormat extensions in AngularJS interpolation, this
|
||||
allows you to nest plural and gender expressions in any order.
|
||||
|
||||
Please note that if these are intended to reach a translator and be translated, it is recommended
|
||||
@@ -450,7 +450,7 @@ This syntax extension, while based on MessageFormat, has been designed to be bac
|
||||
with existing AngularJS interpolation expressions. The key rule is simply this: **All
|
||||
interpolations are done inside double curlies.** The top level comma operator after an expression
|
||||
inside the double curlies causes MessageFormat extensions to be recognized. Such a top level comma
|
||||
is otherwise illegal in an Angular expression and is used by MessageFormat to specify the function
|
||||
is otherwise illegal in an AngularJS expression and is used by MessageFormat to specify the function
|
||||
(such as plural/select) and it's related syntax.
|
||||
|
||||
To understand the extension, take a look at the ICU MessageFormat syntax as specified by the ICU
|
||||
|
||||
@@ -13,7 +13,7 @@ addressing issues specific to IE8 or earlier.
|
||||
</div>
|
||||
|
||||
This document describes the Internet Explorer (IE) idiosyncrasies when dealing with custom HTML
|
||||
attributes and tags. Read this document if you are planning on deploying your Angular application
|
||||
attributes and tags. Read this document if you are planning on deploying your AngularJS application
|
||||
on IE.
|
||||
|
||||
The project currently supports and will attempt to fix bugs for IE9 and above. The continuous
|
||||
@@ -25,16 +25,16 @@ We do not run tests on IE8 and below. A subset of the AngularJS functionality ma
|
||||
browsers, but it is up to you to test and decide whether it works for your particular app.
|
||||
|
||||
|
||||
To ensure your Angular application works on IE please consider:
|
||||
To ensure your AngularJS application works on IE please consider:
|
||||
|
||||
1. Use `ng-style` tags instead of `style="{{ someCss }}"`. The latter works in Chrome, Firefox,
|
||||
Safari and Edge but does not work in Internet Explorer (even 11).
|
||||
2. For the `type` attribute of buttons, use `ng-attr-type` tags instead of
|
||||
`type="{{ someExpression }}"`. If using the latter, Internet Explorer overwrites the expression
|
||||
with `type="submit"` before Angular has a chance to interpolate it.
|
||||
with `type="submit"` before AngularJS has a chance to interpolate it.
|
||||
3. For the `value` attribute of progress, use `ng-attr-value` tags instead of
|
||||
`value="{{ someExpression}}"`. If using the latter, Internet Explorer overwrites the expression
|
||||
with `value="0"` before Angular has a chance to interpolate it.
|
||||
with `value="0"` before AngularJS has a chance to interpolate it.
|
||||
4. For the `placeholder` attribute of textarea, use `ng-attr-placeholder` tags instead
|
||||
of `placeholder="{{ someExpression }}"`. If using the latter, Internet Explorer will error
|
||||
on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11
|
||||
|
||||
@@ -2,26 +2,26 @@
|
||||
@name Developer Guide
|
||||
@description
|
||||
|
||||
# Guide to Angular 1 Documentation
|
||||
# Guide to AngularJS Documentation
|
||||
|
||||
On this page, you will find a list of official Angular resources on various topics.
|
||||
On this page, you will find a list of official AngularJS resources on various topics.
|
||||
|
||||
Just starting out with Angular 1? Try working through our step by step tutorial or try
|
||||
Just starting out with AngularJS? Try working through our step by step tutorial or try
|
||||
building on our seed project.
|
||||
|
||||
* {@link tutorial/index Official Angular 1 Tutorial}
|
||||
* [Angular Seed](https://github.com/angular/angular-seed)
|
||||
* {@link tutorial/index Official AngularJS Tutorial}
|
||||
* [AngularJS Seed](https://github.com/angular/angular-seed)
|
||||
|
||||
Ready to find out more about Angular 1?
|
||||
Ready to find out more about AngularJS?
|
||||
|
||||
* {@link guide/introduction What is Angular 1?}
|
||||
* {@link guide/introduction What is AngularJS?}
|
||||
* {@link guide/concepts Conceptual Overview}
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### Templates
|
||||
|
||||
In Angular applications, you move the job of filling page templates with data from the server to the client. The result is a system better structured for dynamic page updates. Below are the core features you'll use.
|
||||
In AngularJS applications, you move the job of filling page templates with data from the server to the client. The result is a system better structured for dynamic page updates. Below are the core features you'll use.
|
||||
|
||||
* {@link guide/databinding Data binding}
|
||||
* {@link guide/expression Expressions}
|
||||
@@ -43,7 +43,7 @@ In Angular applications, you move the job of filling page templates with data fr
|
||||
|
||||
* **Animation:** {@link guide/animations Core concepts}, {@link ngAnimate ngAnimate API}
|
||||
* **Security:** {@link guide/security Security Docs}, {@link ng.$sce Strict Contextual Escaping}, {@link ng.directive:ngCsp Content Security Policy}, {@link ngSanitize.$sanitize $sanitize}, [video](https://www.youtube.com/watch?v=18ifoT-Id54)
|
||||
* **Internationalization and Localization:** {@link guide/i18n Angular Guide to i18n and l10n}, {@link ng.filter:date date filter}, {@link ng.filter:currency currency filter}, [Creating multilingual support](http://www.novanet.no/blog/hallstein-brotan/dates/2013/10/creating-multilingual-support-using-angularjs/)
|
||||
* **Internationalization and Localization:** {@link guide/i18n AngularJS Guide to i18n and l10n}, {@link ng.filter:date date filter}, {@link ng.filter:currency currency filter}, [Creating multilingual support](http://www.novanet.no/blog/hallstein-brotan/dates/2013/10/creating-multilingual-support-using-angularjs/)
|
||||
* **Touch events:** {@link ngTouch Touch events}
|
||||
* **Accessibility:** {@link guide/accessibility ngAria}
|
||||
|
||||
@@ -58,7 +58,7 @@ In Angular applications, you move the job of filling page templates with data fr
|
||||
We have set up a guide to many resources provided by the community, where you can find lots
|
||||
of additional information and material on these topics, a list of complimentary libraries, and much more.
|
||||
|
||||
* {@link guide/external-resources External Angular 1 resources}
|
||||
* {@link guide/external-resources External AngularJS resources}
|
||||
|
||||
|
||||
## Getting Help
|
||||
@@ -66,27 +66,27 @@ of additional information and material on these topics, a list of complimentary
|
||||
The recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on [Plunker](http://plnkr.co/), [JSFiddle](http://jsfiddle.net/), or similar site and then post to one of the following:
|
||||
|
||||
* [Stackoverflow.com](http://stackoverflow.com/search?q=angularjs)
|
||||
* [Angular 1 mailing list](https://groups.google.com/forum/#!forum/angular)
|
||||
* [Angular 1 IRC channel](http://webchat.freenode.net/?channels=angularjs&uio=d4)
|
||||
* [AngularJS mailing list](https://groups.google.com/forum/#!forum/angular)
|
||||
* [AngularJS IRC channel](http://webchat.freenode.net/?channels=angularjs&uio=d4)
|
||||
|
||||
## Official Communications
|
||||
|
||||
Official announcements, news and releases are posted to our blog, G+ and Twitter:
|
||||
|
||||
* [Angular Blog](http://blog.angularjs.org/)
|
||||
* [AngularJS Blog](http://blog.angularjs.org/)
|
||||
* [Google+](https://plus.google.com/u/0/+AngularJS)
|
||||
* [Twitter](https://twitter.com/angularjs)
|
||||
* [Angular on YouTube](http://youtube.com/angularjs)
|
||||
* [AngularJS on YouTube](http://youtube.com/angularjs)
|
||||
|
||||
## Contributing to Angular 1
|
||||
## Contributing to AngularJS
|
||||
|
||||
Though we have a core group of core contributors at Google, Angular is an open source project with hundreds of contributors.
|
||||
We'd love you to be one of them. When you're ready, please read the {@link misc/contribute Guide for contributing to Angular}.
|
||||
Though we have a core group of core contributors at Google, AngularJS is an open source project with hundreds of contributors.
|
||||
We'd love you to be one of them. When you're ready, please read the {@link misc/contribute Guide for contributing to AngularJS}.
|
||||
|
||||
## Something Missing?
|
||||
|
||||
Didn't find what you're looking for here? Check out the {@link guide/external-resources External Angular 1 resources guide}.
|
||||
Didn't find what you're looking for here? Check out the {@link guide/external-resources External AngularJS resources guide}.
|
||||
|
||||
If you have awesome Angular 1 resources that belong on that page, please tell us about them on
|
||||
If you have awesome AngularJS resources that belong on that page, please tell us about them on
|
||||
[Google+](https://plus.google.com/u/0/+AngularJS) or [Twitter](https://twitter.com/angularjs).
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
# Interpolation and data-binding
|
||||
|
||||
Interpolation markup with embedded {@link guide/expression expressions} is used by Angular to
|
||||
Interpolation markup with embedded {@link guide/expression expressions} is used by AngularJS to
|
||||
provide data-binding to text nodes and attribute values.
|
||||
|
||||
An example of interpolation is shown below:
|
||||
@@ -40,7 +40,7 @@ a custom `toString()` function on the object, and uses that. Custom means that
|
||||
Attributes such as `disabled` are called `boolean` attributes, because their presence means `true` and
|
||||
their absence means `false`. We cannot use normal attribute bindings with them, because the HTML
|
||||
specification does not require browsers to preserve the values of boolean attributes. This means that
|
||||
if we put an Angular interpolation expression into such an attribute then the binding information
|
||||
if we put an AngularJS interpolation expression into such an attribute then the binding information
|
||||
would be lost, because the browser ignores the attribute value.
|
||||
|
||||
In the following example, the interpolation information would be ignored and the browser would simply
|
||||
@@ -51,7 +51,7 @@ interpret the attribute as present, meaning that the button would always be disa
|
||||
<button disabled="{{isDisabled}}">Disabled</button>
|
||||
```
|
||||
|
||||
For this reason, Angular provides special `ng`-prefixed directives for the following boolean attributes:
|
||||
For this reason, AngularJS provides special `ng`-prefixed directives for the following boolean attributes:
|
||||
{@link ngDisabled `disabled`}, {@link ngRequired `required`}, {@link ngSelected `selected`},
|
||||
{@link ngChecked `checked`}, {@link ngReadonly `readOnly`} , and {@link ngOpen `open`}.
|
||||
|
||||
@@ -75,7 +75,7 @@ For example, considering this template:
|
||||
</svg>
|
||||
```
|
||||
|
||||
We would expect Angular to be able to bind to this, but when we check the console we see
|
||||
We would expect AngularJS to be able to bind to this, but when we check the console we see
|
||||
something like `Error: Invalid value for attribute cx="{{cx}}"`. Because of the SVG DOM API's
|
||||
restrictions, you cannot simply write `cx="{{cx}}"`.
|
||||
|
||||
@@ -131,7 +131,7 @@ directive that changes the content of that attribute, such as `ngStyle`.
|
||||
### Embedding interpolation markup inside expressions
|
||||
|
||||
<div class="alert alert-danger">
|
||||
**Note:** Angular directive attributes take either expressions *or* interpolation markup with embedded expressions.
|
||||
**Note:** AngularJS directive attributes take either expressions *or* interpolation markup with embedded expressions.
|
||||
It is considered **bad practice** to embed interpolation markup inside an expression:
|
||||
</div>
|
||||
|
||||
@@ -165,4 +165,4 @@ If another directive accesses attribute data before interpolation has run, it wi
|
||||
interpolation markup and not data.
|
||||
- It impacts performance, as interpolation adds another watcher to the scope.
|
||||
- Since this is not recommended usage, we do not test for this, and changes to
|
||||
Angular core may break your code.
|
||||
AngularJS core may break your code.
|
||||
|
||||
@@ -4,15 +4,15 @@
|
||||
@description
|
||||
|
||||
|
||||
# What Is Angular?
|
||||
# What Is AngularJS?
|
||||
|
||||
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template
|
||||
language and lets you extend HTML's syntax to express your application's components clearly and
|
||||
succinctly. Angular's data binding and dependency injection eliminate much of the code you
|
||||
succinctly. AngularJS's data binding and dependency injection eliminate much of the code you
|
||||
would otherwise have to write. And it all happens within the browser, making it
|
||||
an ideal partner with any server technology.
|
||||
|
||||
Angular is what HTML would have been, had it been designed for applications. HTML is a great
|
||||
AngularJS is what HTML would have been, had it been designed for applications. HTML is a great
|
||||
declarative language for static documents. It does not contain much in the way of creating
|
||||
applications, and as a result building web applications is an exercise in *what do I have to do
|
||||
to trick the browser into doing what I want?*
|
||||
@@ -26,8 +26,8 @@ The impedance mismatch between dynamic applications and static documents is ofte
|
||||
app specific. E.g., `durandal`, `ember`, etc.
|
||||
|
||||
|
||||
Angular takes another approach. It attempts to minimize the impedance mismatch between document
|
||||
centric HTML and what an application needs by creating new HTML constructs. Angular teaches the
|
||||
AngularJS takes another approach. It attempts to minimize the impedance mismatch between document
|
||||
centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the
|
||||
browser new syntax through a construct we call *directives*. Examples include:
|
||||
|
||||
* Data binding, as in `{{}}`.
|
||||
@@ -40,11 +40,11 @@ browser new syntax through a construct we call *directives*. Examples include:
|
||||
|
||||
## A complete client-side solution
|
||||
|
||||
Angular is not a single piece in the overall puzzle of building the client-side of a web
|
||||
AngularJS is not a single piece in the overall puzzle of building the client-side of a web
|
||||
application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a
|
||||
well-defined structure. This makes Angular opinionated about how a CRUD (Create, Read, Update, Delete)
|
||||
application should be built. But while it is opinionated, it also tries to make sure that its opinion
|
||||
is just a starting point you can easily change. Angular comes with the following out-of-the-box:
|
||||
well-defined structure. This makes AngularJS opinionated about how a CRUD (Create, Read, Update, Delete)
|
||||
application should be built. But while it is opinionated, it also tries to make sure that its opinion
|
||||
is just a starting point you can easily change. AngularJS comes with the following out-of-the-box:
|
||||
|
||||
* Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating
|
||||
directives, form validation, routing, deep-linking, reusable components and dependency injection.
|
||||
@@ -52,21 +52,21 @@ is just a starting point you can easily change. Angular comes with the following
|
||||
* Seed application with directory layout and test scripts as a starting point.
|
||||
|
||||
|
||||
## Angular's sweet spot
|
||||
## AngularJS's sweet spot
|
||||
|
||||
Angular simplifies application development by presenting a higher level of abstraction to the
|
||||
AngularJS simplifies application development by presenting a higher level of abstraction to the
|
||||
developer. Like any abstraction, it comes at a cost of flexibility. In other words, not every app
|
||||
is a good fit for Angular. Angular was built with the CRUD application in mind. Luckily CRUD
|
||||
applications represent the majority of web applications. To understand what Angular is
|
||||
good at, though, it helps to understand when an app is not a good fit for Angular.
|
||||
is a good fit for AngularJS. AngularJS was built with the CRUD application in mind. Luckily CRUD
|
||||
applications represent the majority of web applications. To understand what AngularJS is
|
||||
good at, though, it helps to understand when an app is not a good fit for AngularJS.
|
||||
|
||||
Games and GUI editors are examples of applications with intensive and tricky DOM manipulation.
|
||||
These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular.
|
||||
These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for AngularJS.
|
||||
In these cases it may be better to use a library with a lower level of abstraction, such as `jQuery`.
|
||||
|
||||
# The Zen of Angular
|
||||
## The Zen of AngularJS
|
||||
|
||||
Angular is built around the belief that declarative code is better than imperative when it comes
|
||||
AngularJS is built around the belief that declarative code is better than imperative when it comes
|
||||
to building UIs and wiring software components together, while imperative code is excellent for
|
||||
expressing business logic.
|
||||
|
||||
@@ -83,7 +83,7 @@ expressing business logic.
|
||||
|
||||
|
||||
|
||||
Angular frees you from the following pains:
|
||||
AngularJS frees you from the following pains:
|
||||
|
||||
* **Registering callbacks:** Registering callbacks clutters your code, making it hard to see the
|
||||
forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It
|
||||
@@ -92,16 +92,16 @@ Angular frees you from the following pains:
|
||||
* **Manipulating HTML DOM programmatically:** Manipulating HTML DOM is a cornerstone of AJAX
|
||||
applications, but it's cumbersome and error-prone. By declaratively describing how the UI
|
||||
should change as your application state changes, you are freed from low-level DOM manipulation
|
||||
tasks. Most applications written with Angular never have to programmatically manipulate the
|
||||
tasks. Most applications written with AngularJS never have to programmatically manipulate the
|
||||
DOM, although you can if you want to.
|
||||
* **Marshaling data to and from the UI:** CRUD operations make up the majority of AJAX
|
||||
applications' tasks. The flow of marshaling data from the server to an internal object to an HTML
|
||||
form, allowing users to modify the form, validating the form, displaying validation errors,
|
||||
returning to an internal model, and then back to the server, creates a lot of boilerplate
|
||||
code. Angular eliminates almost all of this boilerplate, leaving code that describes the
|
||||
code. AngularJS eliminates almost all of this boilerplate, leaving code that describes the
|
||||
overall flow of the application rather than all of the implementation details.
|
||||
* **Writing tons of initialization code just to get started:** Typically you need to write a lot
|
||||
of plumbing just to get a basic "Hello World" AJAX app working. With Angular you can bootstrap
|
||||
of plumbing just to get a basic "Hello World" AJAX app working. With AngularJS you can bootstrap
|
||||
your app easily using services, which are auto-injected into your application in a
|
||||
[Guice](https://github.com/google/guice)-like dependency-injection style. This allows you
|
||||
to get started developing features quickly. As a bonus, you get full control over the
|
||||
|
||||
@@ -17,7 +17,7 @@ which drives many of these changes.
|
||||
|
||||
## Migrating from 1.5 to 1.6
|
||||
|
||||
Angular 1.6 fixes numerous bugs and adds new features, both in core and in external modules.
|
||||
AngularJS 1.6 fixes numerous bugs and adds new features, both in core and in external modules.
|
||||
In addition, it includes several security and performance improvements in commonly used services,
|
||||
such as `$compile`, `$injector`, `$parse`, `$animate`, and directives, such as `input`, `ngModel`
|
||||
and `select`.
|
||||
@@ -587,7 +587,7 @@ HTTP requests now update the outstanding request count synchronously. Previously
|
||||
would not have been updated until the request to the server was actually in flight. Now the request
|
||||
count is updated before any async interceptor is called.
|
||||
|
||||
The new behavior will also allow end-2-end tests to more correctly detect when Angular is stable,
|
||||
The new behavior will also allow end-2-end tests to more correctly detect when AngularJS is stable,
|
||||
but there is a chance it may change the observed behaviour in cases where an async request
|
||||
interceptor is being used.
|
||||
|
||||
@@ -800,11 +800,11 @@ elem.data('foo-bar'); // 2
|
||||
<major />
|
||||
**Due to [73050c](https://github.com/angular/angular.js/commit/73050cdda04675bfa6705dc841ddbbb6919eb048)**,
|
||||
the way jqLite camelCases keys passed to `.css()` is aligned with jQuery. Previously, when using
|
||||
Angular without jQuery, `.css()` would camelCase keys more aggressively. Now, only a single hyphen
|
||||
AngularJS without jQuery, `.css()` would camelCase keys more aggressively. Now, only a single hyphen
|
||||
followed by a lowercase letter is getting transformed. This change also affects other APIs that rely
|
||||
on the `.css()` method, such as `ngStyle`.
|
||||
|
||||
If you are using Angular with jQuery, your application is not affected by this change. If you are
|
||||
If you are using AngularJS with jQuery, your application is not affected by this change. If you are
|
||||
not using jQuery, then you need to update your code as shown in the following examples:
|
||||
|
||||
Before:
|
||||
@@ -864,7 +864,7 @@ var bgColor = elem.css('backgroundColor');
|
||||
getting/setting boolean attributes will no longer take the corresponding properties into account.
|
||||
Previously, all boolean attributes were reflected into the corresponding property when calling a
|
||||
setter and from the corresponding property when calling a getter, even on elements that don't treat
|
||||
those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
|
||||
those attributes in a special way. Now AngularJS doesn't do it by itself, but relies on browsers to
|
||||
know when to reflect the property. Note that this browser-level conversion differs between browsers;
|
||||
if you need to dynamically change the state of an element, you should modify the property, not the
|
||||
attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
|
||||
@@ -1213,10 +1213,10 @@ the `$route` service will no longer instantiate controllers nor call `resolve` o
|
||||
|
||||
## Migrating from 1.4 to 1.5
|
||||
|
||||
Angular 1.5 takes a big step towards preparing developers for a smoother transition to Angular 2 in
|
||||
AngularJS 1.5 takes a big step towards preparing developers for a smoother transition to Angular in
|
||||
the future. Architecting your applications using components, multi-slot transclusion, one-way
|
||||
bindings in isolate scopes, using lifecycle hooks in directive controllers and relying on native ES6
|
||||
features (such as classes and arrow functions) are now all possible with Angular 1.5.
|
||||
features (such as classes and arrow functions) are now all possible with AngularJS 1.5.
|
||||
|
||||
|
||||
This release includes numerous bug and security fixes, as well as performance improvements to core
|
||||
@@ -1228,7 +1228,7 @@ New features have been added to more than a dozen services, directives and filte
|
||||
Among them, a few stand out:
|
||||
|
||||
* `angular.component()`: Introducing "components", a special sort of directive that are easy to
|
||||
configure and promote best practices (plus can bring Angular 1 applications closer to Angular 2's
|
||||
configure and promote best practices (plus can bring AngularJS applications closer to Angular's
|
||||
style of architecture).
|
||||
* Multi-slot transclusion: Enabling the design of more powerful and complex UI elements with a much
|
||||
simpler configuration and reduced boilerplate.
|
||||
@@ -1406,7 +1406,7 @@ angular.module('myApp').config(function($touchProvider) {
|
||||
```
|
||||
|
||||
Going forward, we recommend using [FastClick](https://github.com/ftlabs/fastclick) or perhaps one of
|
||||
the [Angular 3rd party touch-related modules](http://ngmodules.org/tags/touch) that provide similar
|
||||
the [AngularJS 3rd party touch-related modules](http://ngmodules.org/tags/touch) that provide similar
|
||||
functionality.
|
||||
|
||||
Also note that modern browsers already remove the 300ms delay under some circumstances:
|
||||
@@ -1431,7 +1431,8 @@ For more info on the topic, you can take a look at this
|
||||
## Migrating from 1.3 to 1.4
|
||||
|
||||
AngularJS 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there
|
||||
are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions`, `ngPattern`, `pattern` and some fixes to core filters: `limitTo` and `filter`.
|
||||
are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions`, `ngPattern`, `pattern`, and
|
||||
some fixes to core filters: `limitTo` and `filter`.
|
||||
|
||||
The reason for the ngAnimate refactor was to fix timing issues and to expose new APIs to allow
|
||||
for developers to construct more versatile animations. We now have access to `$animateCss`
|
||||
@@ -1465,7 +1466,7 @@ possibilities, can be achieved by injecting `$animateCss` into a
|
||||
JavaScript-defined animation and creating custom CSS-based animations
|
||||
from there.
|
||||
|
||||
By using `$animateCss` inside of a JavaScript animation in Angular 1.4, we can trigger custom CSS-based animations
|
||||
By using `$animateCss` inside of a JavaScript animation in AngularJS 1.4, we can trigger custom CSS-based animations
|
||||
directly from our JavaScript code.
|
||||
|
||||
```js
|
||||
@@ -1634,7 +1635,7 @@ the `select` directive will now use strict comparison of the `ngModel` scope val
|
||||
values to determine which option is selected. This means non-string scope values (such as `Number` or `Boolean`)
|
||||
will not be matched against equivalent option strings (such as the strings `"123"`, `"true"` or `"false"`).
|
||||
|
||||
In Angular 1.3.x, setting `scope.x = 200` would select the option with the value 200 in the following `select`:
|
||||
In AngularJS 1.3.x, setting `scope.x = 200` would select the option with the value 200 in the following `select`:
|
||||
|
||||
```
|
||||
<select ng-model="x">
|
||||
@@ -1643,7 +1644,7 @@ In Angular 1.3.x, setting `scope.x = 200` would select the option with the value
|
||||
</select>
|
||||
```
|
||||
|
||||
In Angular 1.4.x, the 'unknown option' will be selected.
|
||||
In AngularJS 1.4.x, the 'unknown option' will be selected.
|
||||
|
||||
To remedy this, you can initialize the model as a string: `scope.x = '200'`, or if you want to
|
||||
keep the model as a `Number`, you can do the conversion via `$formatters` and `$parsers` on `ngModel`:
|
||||
@@ -1736,11 +1737,11 @@ the built-in pattern validator:
|
||||
|
||||
Due to [94533e57](https://github.com/angular/angular.js/commit/94533e570673e6b2eb92073955541fa289aabe02),
|
||||
the `name` attribute of `form` elements can now only contain characters that can be evaluated as part
|
||||
of an Angular expression. This is because Angular uses the value of `name` as an assignable expression
|
||||
of an AngularJS expression. This is because AngularJS uses the value of `name` as an assignable expression
|
||||
to set the form on the `$scope`. For example, `name="myForm"` assigns the form to `$scope.myForm` and
|
||||
`name="myObj.myForm"` assigns it to `$scope.myObj.myForm`.
|
||||
|
||||
Previously, it was possible to also use names such `name="my:name"`, because Angular used a special setter
|
||||
Previously, it was possible to also use names such `name="my:name"`, because AngularJS used a special setter
|
||||
function for the form name. Now the general, more robust `$parse` setter is used.
|
||||
|
||||
The easiest way to migrate your code is therefore to remove all special characters from the `name` attribute.
|
||||
@@ -1968,30 +1969,30 @@ angular.module('myModule').config(['$controllerProvider', function($controllerPr
|
||||
}]);
|
||||
```
|
||||
|
||||
### Angular Expression Parsing (`$parse` + `$interpolate`)
|
||||
### AngularJS Expression Parsing (`$parse` + `$interpolate`)
|
||||
|
||||
- due to [77ada4c8](https://github.com/angular/angular.js/commit/77ada4c82d6b8fc6d977c26f3cdb48c2f5fbe5a5),
|
||||
|
||||
You can no longer invoke .bind, .call or .apply on a function in angular expressions.
|
||||
You can no longer invoke .bind, .call or .apply on a function in AngularJS expressions.
|
||||
This is to disallow changing the behaviour of existing functions
|
||||
in an unforeseen fashion.
|
||||
|
||||
- due to [6081f207](https://github.com/angular/angular.js/commit/6081f20769e64a800ee8075c168412b21f026d99),
|
||||
|
||||
The (deprecated) __proto__ property does not work inside angular expressions
|
||||
The (deprecated) __proto__ property does not work inside AngularJS expressions
|
||||
anymore.
|
||||
|
||||
|
||||
- due to [48fa3aad](https://github.com/angular/angular.js/commit/48fa3aadd546036c7e69f71046f659ab1de244c6),
|
||||
|
||||
This prevents the use of __{define,lookup}{Getter,Setter}__ inside angular
|
||||
This prevents the use of __{define,lookup}{Getter,Setter}__ inside AngularJS
|
||||
expressions. If you really need them for some reason, please wrap/bind them to make them
|
||||
less dangerous, then make them available through the scope object.
|
||||
|
||||
|
||||
- due to [528be29d](https://github.com/angular/angular.js/commit/528be29d1662122a34e204dd607e1c0bd9c16bbc),
|
||||
|
||||
This prevents the use of `Object` inside angular expressions.
|
||||
This prevents the use of `Object` inside AngularJS expressions.
|
||||
If you need Object.keys, make it accessible in the scope.
|
||||
|
||||
|
||||
@@ -2026,7 +2027,7 @@ expression parser; there are six of them: false, null, undefined, NaN, 0 and "".
|
||||
|
||||
|
||||
|
||||
### Miscellaneous Angular helpers
|
||||
### Miscellaneous AngularJS helpers
|
||||
|
||||
- **Angular.copy:** due to [b59b04f9](https://github.com/angular/angular.js/commit/b59b04f98a0b59eead53f6a53391ce1bbcbe9b57),
|
||||
|
||||
@@ -2074,13 +2075,13 @@ jQuery. We don't expect that app code actually depends on this accidental featur
|
||||
|
||||
- **jqLite:** due to [d71dbb1a](https://github.com/angular/angular.js/commit/d71dbb1ae50f174680533492ce4c7db3ff74df00),
|
||||
the jQuery `detach()` method does not trigger the `$destroy` event.
|
||||
If you want to destroy Angular data attached to the element, use `remove()`.
|
||||
If you want to destroy AngularJS data attached to the element, use `remove()`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Angular HTML Compiler (`$compile`)
|
||||
### AngularJS HTML Compiler (`$compile`)
|
||||
|
||||
|
||||
- due to [2ee29c5d](https://github.com/angular/angular.js/commit/2ee29c5da81ffacdc1cabb438f5d125d5e116cb9),
|
||||
@@ -2108,7 +2109,7 @@ to request both an isolate and a non-isolate scope and fix your code.
|
||||
|
||||
|
||||
- due to [eec6394a](https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb), The `replace` flag for defining directives that
|
||||
replace the element that they are on will be removed in the next major angular version.
|
||||
replace the element that they are on will be removed in the next major AngularJS version.
|
||||
This feature has difficult semantics (e.g. how attributes are merged) and leads to more
|
||||
problems compared to what it solves. Also, with Web Components it is normal to have
|
||||
custom elements in the DOM.
|
||||
@@ -2331,7 +2332,7 @@ More details on the new interceptors API (which has been around as of v1.1.4) ca
|
||||
|
||||
|
||||
- **$httpBackend:** due to [6680b7b9](https://github.com/angular/angular.js/commit/6680b7b97c0326a80bdccaf0a35031e4af641e0e), the JSONP behavior for erroneous and empty responses changed:
|
||||
Previously, a JSONP response was regarded as erroneous if it was empty. Now Angular is listening to the
|
||||
Previously, a JSONP response was regarded as erroneous if it was empty. Now AngularJS is listening to the
|
||||
correct events to detect errors, i.e. even empty responses can be successful.
|
||||
|
||||
|
||||
@@ -2625,7 +2626,7 @@ See [04cebcc1](https://github.com/angular/angular.js/commit/04cebcc133c8b433a3ac
|
||||
With the exception of `<a>` and `<img>` elements, you cannot bind more than one expression to the
|
||||
`src` or `action` attribute of elements.
|
||||
|
||||
This is one of several improvements to security introduces by Angular 1.2.
|
||||
This is one of several improvements to security introduces by AngularJS 1.2.
|
||||
|
||||
Concatenating expressions makes it hard to understand whether some combination of concatenated
|
||||
values are unsafe to use and potentially subject to XSS vulnerabilities. To simplify the task of
|
||||
@@ -2700,7 +2701,7 @@ See [38deedd6](https://github.com/angular/angular.js/commit/38deedd6e3d806eb8262
|
||||
DOM event handlers execute arbitrary JavaScript code. Using an interpolation for such handlers
|
||||
means that the interpolated value is a JS string that is evaluated. Storing or generating such
|
||||
strings is error prone and leads to XSS vulnerabilities. On the other hand, `ngClick` and other
|
||||
Angular specific event handlers evaluate Angular expressions in non-window (Scope) context which
|
||||
AngularJS specific event handlers evaluate AngularJS expressions in non-window (Scope) context which
|
||||
makes them much safer.
|
||||
|
||||
To migrate the code follow the example below:
|
||||
@@ -3027,7 +3028,7 @@ See [1adf29af](https://github.com/angular/angular.js/commit/1adf29af13890d612868
|
||||
### Isolate scope only exposed to directives with `scope` property
|
||||
|
||||
If you declare a scope option on a directive, that directive will have an
|
||||
[isolate scope](https://github.com/angular/angular.js/wiki/Understanding-Scopes). In Angular 1.0, if a
|
||||
[isolate scope](https://github.com/angular/angular.js/wiki/Understanding-Scopes). In AngularJS 1.0, if a
|
||||
directive with an isolate scope is used on an element, all directives on that same element have access
|
||||
to the same isolate scope. For example, say we have the following directives:
|
||||
|
||||
@@ -3058,12 +3059,12 @@ Now what happens if we use both directives on the same element?
|
||||
<div isolate-scope non-isolate-scope></div>
|
||||
```
|
||||
|
||||
In Angular 1.0, the nonIsolateScope directive will have access to the isolateScope directive’s scope. The
|
||||
log statements will print the same id, because the scope is the same. But in Angular 1.2, the nonIsolateScope
|
||||
In AngularJS 1.0, the nonIsolateScope directive will have access to the isolateScope directive’s scope. The
|
||||
log statements will print the same id, because the scope is the same. But in AngularJS 1.2, the nonIsolateScope
|
||||
will not use the same scope as isolateScope. Instead, it will inherit the parent scope. The log statements
|
||||
will print different id’s.
|
||||
|
||||
If your code depends on the Angular 1.0 behavior (non-isolate directive needs to access state
|
||||
If your code depends on the AngularJS 1.0 behavior (non-isolate directive needs to access state
|
||||
from within the isolate scope), change the isolate directive to use scope locals to pass these explicitly:
|
||||
|
||||
**Before**
|
||||
@@ -3118,13 +3119,13 @@ See [79223eae](https://github.com/angular/angular.js/commit/79223eae502283889334
|
||||
|
||||
This change introduces the notion of "private" properties (properties
|
||||
whose names begin and/or end with an underscore) on the scope chain.
|
||||
These properties will not be available to Angular expressions (i.e. {{
|
||||
These properties will not be available to AngularJS expressions (i.e. {{
|
||||
}} interpolation in templates and strings passed to `$parse`) They are
|
||||
freely available to JavaScript code (as before).
|
||||
|
||||
**Motivation**
|
||||
|
||||
Angular expressions execute in a limited context. They do not have
|
||||
AngularJS expressions execute in a limited context. They do not have
|
||||
direct access to the global scope, `window`, `document` or the Function
|
||||
constructor. However, they have direct access to names/properties on
|
||||
the scope chain. It has been a long standing best practice to keep
|
||||
@@ -3133,17 +3134,17 @@ controller.) That's easier said than done for two reasons:
|
||||
|
||||
1. JavaScript does not have a notion of private properties so if you need
|
||||
someone on the scope chain for JavaScript use, you also expose it to
|
||||
Angular expressions
|
||||
AngularJS expressions
|
||||
2. The new `controller as` syntax that's now in increased usage exposes the
|
||||
entire controller on the scope chain greatly increasing the exposed surface.
|
||||
|
||||
Though Angular expressions are written and controlled by the developer, they:
|
||||
Though AngularJS expressions are written and controlled by the developer, they:
|
||||
|
||||
1. Typically deal with user input
|
||||
2. Don't get the kind of test coverage that JavaScript code would
|
||||
|
||||
This commit provides a way, via a naming convention, to allow restricting properties from
|
||||
controllers/scopes. This means Angular expressions can access only those properties that
|
||||
controllers/scopes. This means AngularJS expressions can access only those properties that
|
||||
are actually needed by the expressions.
|
||||
|
||||
See [3d6a89e8](https://github.com/angular/angular.js/commit/3d6a89e8888b14ae5cb5640464e12b7811853c7e).
|
||||
@@ -3162,7 +3163,7 @@ See [d87fa004](https://github.com/angular/angular.js/commit/d87fa0042375b025b98c
|
||||
### Uncommon region-specific local files were removed from i18n
|
||||
|
||||
AngularJS uses the Google Closure library's locale files. The following locales were removed from
|
||||
Closure, so Angular is not able to continue to support them:
|
||||
Closure, so AngularJS is not able to continue to support them:
|
||||
|
||||
`chr`, `cy`, `el-polyton`, `en-zz`, `fr-rw`, `fr-sn`, `fr-td`, `fr-tg`, `haw`, `it-ch`, `ln-cg`,
|
||||
`mo`, `ms-bn`, `nl-aw`, `nl-be`, `pt-ao`, `pt-gw`, `pt-mz`, `pt-st`, `ro-md`, `ru-md`, `ru-ua`,
|
||||
|
||||
@@ -3,17 +3,19 @@
|
||||
@sortOrder 320
|
||||
@description
|
||||
|
||||
# What is a Module?
|
||||
# Modules
|
||||
|
||||
## What is a Module?
|
||||
|
||||
You can think of a module as a container for the different parts of your app – controllers,
|
||||
services, filters, directives, etc.
|
||||
|
||||
# Why?
|
||||
## Why?
|
||||
|
||||
Most applications have a main method that instantiates and wires together the different parts of
|
||||
the application.
|
||||
|
||||
Angular apps don't have a main method. Instead modules declaratively specify how an application
|
||||
AngularJS apps don't have a main method. Instead modules declaratively specify how an application
|
||||
should be bootstrapped. There are several advantages to this approach:
|
||||
|
||||
* The declarative process is easier to understand.
|
||||
@@ -23,7 +25,7 @@ should be bootstrapped. There are several advantages to this approach:
|
||||
* End-to-end tests can use modules to override configuration.
|
||||
|
||||
|
||||
# The Basics
|
||||
## The Basics
|
||||
|
||||
I'm in a hurry. How do I get a Hello World module working?
|
||||
|
||||
@@ -65,7 +67,7 @@ Important things to notice:
|
||||
This array is the list of modules `myApp` depends on.
|
||||
|
||||
|
||||
# Recommended Setup
|
||||
## Recommended Setup
|
||||
|
||||
While the example above is simple, it will not scale to large applications. Instead we recommend
|
||||
that you break your application to multiple modules like this:
|
||||
@@ -136,39 +138,46 @@ The above is a suggestion. Tailor it to your needs.
|
||||
|
||||
|
||||
|
||||
# Module Loading & Dependencies
|
||||
## Module Loading
|
||||
|
||||
A module is a collection of configuration and run blocks which get applied to the application
|
||||
during the bootstrap process. In its simplest form the module consists of a collection of two kinds
|
||||
of blocks:
|
||||
A {@link angular.Module module} is a collection of providers, services, directives etc.,
|
||||
and optionally config and run blocks which get applied to the application during the
|
||||
bootstrap process.
|
||||
|
||||
1. **Configuration blocks** - get executed during the provider registrations and configuration
|
||||
phase. Only providers and constants can be injected into configuration blocks. This is to
|
||||
prevent accidental instantiation of services before they have been fully configured.
|
||||
2. **Run blocks** - get executed after the injector is created and are used to kickstart the
|
||||
application. Only instances and constants can be injected into run blocks. This is to prevent
|
||||
further system configuration during application run time.
|
||||
The {@link angular.Module module API} describes all the available methods and how they can be used.
|
||||
|
||||
```js
|
||||
angular.module('myModule', []).
|
||||
config(function(injectables) { // provider-injector
|
||||
// This is an example of config block.
|
||||
// You can have as many of these as you want.
|
||||
// You can only inject Providers (not instances)
|
||||
// into config blocks.
|
||||
}).
|
||||
run(function(injectables) { // instance-injector
|
||||
// This is an example of a run block.
|
||||
// You can have as many of these as you want.
|
||||
// You can only inject instances (not Providers)
|
||||
// into run blocks
|
||||
});
|
||||
```
|
||||
See {@link guide/di#using-dependency-injection Using Dependency Injection} to find out which
|
||||
dependencies can be injected in each method.
|
||||
|
||||
## Configuration Blocks
|
||||
### Dependencies and Order of execution
|
||||
|
||||
Modules can list other modules as their dependencies. Depending on a module implies that the required
|
||||
module will be loaded before the requiring module is loaded.
|
||||
|
||||
In a single module the order of execution is as follows:
|
||||
|
||||
1. {@link angular.Module#provider provider} functions are executed, so they and the services they
|
||||
define can be made available to the {@link auto.$injector $injector}.
|
||||
|
||||
2. After that, the configuration blocks ({@link angular.Module#config config} functions) are executed.
|
||||
This means the configuration blocks of the required modules execute before the configuration blocks
|
||||
of any requiring module.
|
||||
|
||||
This continues until all module dependencies has been resolved.
|
||||
|
||||
Then, the {@link angular.Module#run run} blocks that have been collected from each module are
|
||||
executed in order of requirement.
|
||||
|
||||
Note: each module is only loaded once, even if multiple other modules require it.
|
||||
Note: the factory function for "values" and "services" is called lazily when the value/service is
|
||||
injected for the first time.
|
||||
|
||||
### Registration in the config block
|
||||
|
||||
While it is recommended to register injectables directly with the {@link angular.Module module API},
|
||||
it is also possible to register services, directives etc. by injecting
|
||||
{@link $provide $provide} or the individual service providers into the config function:
|
||||
|
||||
There are some convenience methods on the module which are equivalent to the `config` block. For
|
||||
example:
|
||||
|
||||
```js
|
||||
angular.module('myModule', []).
|
||||
@@ -188,35 +197,22 @@ angular.module('myModule', []).
|
||||
});
|
||||
```
|
||||
|
||||
<div class="alert alert-info">
|
||||
When bootstrapping, first Angular applies all constant definitions.
|
||||
Then Angular applies configuration blocks in the same order they were registered.
|
||||
</div>
|
||||
### Run Blocks
|
||||
|
||||
## Run Blocks
|
||||
|
||||
Run blocks are the closest thing in Angular to the main method. A run block is the code which
|
||||
Run blocks are the closest thing in AngularJS to the main method. A run block is the code which
|
||||
needs to run to kickstart the application. It is executed after all of the services have been
|
||||
configured and the injector has been created. Run blocks typically contain code which is hard
|
||||
to unit-test, and for this reason should be declared in isolated modules, so that they can be
|
||||
ignored in the unit-tests.
|
||||
|
||||
## Dependencies
|
||||
|
||||
Modules can list other modules as their dependencies. Depending on a module implies that the required
|
||||
module needs to be loaded before the requiring module is loaded. In other words the configuration
|
||||
blocks of the required modules execute before the configuration blocks of the requiring module.
|
||||
The same is true for the run blocks. Each module can only be loaded once, even if multiple other
|
||||
modules require it.
|
||||
|
||||
## Asynchronous Loading
|
||||
### Asynchronous Loading
|
||||
|
||||
Modules are a way of managing $injector configuration, and have nothing to do with loading of
|
||||
scripts into a VM. There are existing projects which deal with script loading, which may be used
|
||||
with Angular. Because modules do nothing at load time they can be loaded into the VM in any order
|
||||
with AngularJS. Because modules do nothing at load time they can be loaded into the VM in any order
|
||||
and thus script loaders can take advantage of this property and parallelize the loading process.
|
||||
|
||||
## Creation versus Retrieval
|
||||
### Creation versus Retrieval
|
||||
|
||||
Beware that using `angular.module('myModule', [])` will create the module `myModule` and overwrite any
|
||||
existing module named `myModule`. Use `angular.module('myModule')` to retrieve an existing module.
|
||||
@@ -235,14 +231,14 @@ var myModule = angular.module('myModule', []);
|
||||
var myModule = angular.module('myOtherModule');
|
||||
```
|
||||
|
||||
# Unit Testing
|
||||
## Unit Testing
|
||||
|
||||
A unit test is a way of instantiating a subset of an application to apply stimulus to it.
|
||||
Small, structured modules help keep unit tests concise and focused.
|
||||
|
||||
<div class="did you know...">
|
||||
Each module can only be loaded once per injector.
|
||||
Usually an Angular app has only one injector and modules are only loaded once.
|
||||
Usually an AngularJS app has only one injector and modules are only loaded once.
|
||||
Each test has its own injector and modules are loaded multiple times.
|
||||
</div>
|
||||
|
||||
|
||||
@@ -81,13 +81,13 @@ For more information, see the
|
||||
## Disable comment and css class directives
|
||||
|
||||
By default AngularJS compiles and executes all directives inside comments and element classes.
|
||||
In order to perform this task, angular compiler must look for directives by:
|
||||
In order to perform this task, the AngularJS compiler must look for directives by:
|
||||
|
||||
- Parse all your application element classes.
|
||||
|
||||
- Parse all your application html comments.
|
||||
|
||||
Nowadays most of the Angular projects are using only element and attribute directives,
|
||||
Nowadays most of the AngularJS projects are using only element and attribute directives,
|
||||
and in such projects there is no need to compile comments and classes.
|
||||
|
||||
If you are sure that your project only uses element and attribute directives,
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
# Providers
|
||||
|
||||
Each web application you build is composed of objects that collaborate to get stuff done. These
|
||||
objects need to be instantiated and wired together for the app to work. In Angular apps most of
|
||||
objects need to be instantiated and wired together for the app to work. In AngularJS apps most of
|
||||
these objects are instantiated and wired together automatically by the {@link auto.$injector
|
||||
injector service}.
|
||||
|
||||
@@ -14,7 +14,7 @@ The injector creates two types of objects, **services** and **specialized object
|
||||
|
||||
Services are objects whose API is defined by the developer writing the service.
|
||||
|
||||
Specialized objects conform to a specific Angular framework API. These objects are one of
|
||||
Specialized objects conform to a specific AngularJS framework API. These objects are one of
|
||||
controllers, directives, filters or animations.
|
||||
|
||||
The injector needs to know how to create these objects. You tell it by registering a "recipe" for
|
||||
@@ -35,11 +35,11 @@ In order for the injector to know how to create and wire together all of these o
|
||||
a registry of "recipes". Each recipe has an identifier of the object and the description of how to
|
||||
create this object.
|
||||
|
||||
Each recipe belongs to an {@link angular.Module Angular module}. An Angular module is a bag
|
||||
Each recipe belongs to an {@link angular.Module AngularJS module}. An AngularJS module is a bag
|
||||
that holds one or more recipes. And since manually keeping track of module dependencies is no fun,
|
||||
a module can contain information about dependencies on other modules as well.
|
||||
|
||||
When an Angular application starts with a given application module, Angular creates a new instance
|
||||
When an AngularJS application starts with a given application module, AngularJS creates a new instance
|
||||
of injector, which in turn creates a registry of recipes as a union of all recipes defined in the
|
||||
core "ng" module, application module and its dependencies. The injector then consults the recipe
|
||||
registry when it needs to create an object for your application.
|
||||
@@ -55,10 +55,10 @@ var myApp = angular.module('myApp', []);
|
||||
myApp.value('clientId', 'a12345654321x');
|
||||
```
|
||||
|
||||
Notice how we created an Angular module called `myApp`, and specified that this module definition
|
||||
Notice how we created an AngularJS module called `myApp`, and specified that this module definition
|
||||
contains a "recipe" for constructing the `clientId` service, which is a simple string in this case.
|
||||
|
||||
And this is how you would display it via Angular's data-binding:
|
||||
And this is how you would display it via AngularJS's data-binding:
|
||||
|
||||
|
||||
```javascript
|
||||
@@ -95,7 +95,7 @@ The Factory recipe constructs a new service using a function with zero or more a
|
||||
are dependencies on other services). The return value of this function is the service instance
|
||||
created by this recipe.
|
||||
|
||||
Note: All services in Angular are singletons. That means that the injector uses each recipe at most
|
||||
Note: All services in AngularJS are singletons. That means that the injector uses each recipe at most
|
||||
once to create the object. The injector then caches the reference for all future needs.
|
||||
|
||||
Since a Factory is a more powerful version of the Value recipe, the same service can be constructed with it.
|
||||
@@ -246,7 +246,7 @@ Notice that the unicorn provider is injected into the config function. This inje
|
||||
provider injector which is different from the regular instance injector, in that it instantiates
|
||||
and wires (injects) all provider instances only.
|
||||
|
||||
During application bootstrap, before Angular goes off creating all services, it configures and
|
||||
During application bootstrap, before AngularJS goes off creating all services, it configures and
|
||||
instantiates all providers. We call this the configuration phase of the application life-cycle.
|
||||
During this phase, services aren't accessible because they haven't been created yet.
|
||||
|
||||
@@ -256,7 +256,7 @@ creating services starts. We call this part of the application life-cycle the ru
|
||||
|
||||
## Constant Recipe
|
||||
|
||||
We've just learned how Angular splits the life-cycle into configuration phase and run phase and how
|
||||
We've just learned how AngularJS splits the life-cycle into configuration phase and run phase and how
|
||||
you can provide configuration to your application via the config function. Since the config
|
||||
function runs in the configuration phase when no services are available, it doesn't have access
|
||||
even to simple value objects created via the Value recipe.
|
||||
@@ -308,7 +308,7 @@ myApp.controller('DemoController', ["clientId", "planetName", function DemoContr
|
||||
|
||||
Earlier we mentioned that we also have special purpose objects that are different from services.
|
||||
These objects extend the framework as plugins and therefore must implement interfaces specified by
|
||||
Angular. These interfaces are Controller, Directive, Filter and Animation.
|
||||
AngularJS. These interfaces are Controller, Directive, Filter and Animation.
|
||||
|
||||
The instructions for the injector to create these special objects (with the exception of the
|
||||
Controller objects) use the Factory recipe behind the scenes.
|
||||
@@ -340,7 +340,7 @@ We can then use the component like this:
|
||||
</html>
|
||||
```
|
||||
|
||||
Using Factory recipes, you can also define Angular's filters and animations, but the controllers
|
||||
Using Factory recipes, you can also define AngularJS's filters and animations, but the controllers
|
||||
are a bit special. You create a controller as a custom type that declares its dependencies as
|
||||
arguments for its constructor function. This constructor is then registered with a module. Let's
|
||||
take a look at the `DemoController`, created in one of the early examples:
|
||||
|
||||
@@ -16,8 +16,8 @@ watch {@link guide/expression expressions} and propagate events.
|
||||
model mutations.
|
||||
|
||||
- Scopes provide APIs ({@link ng.$rootScope.Scope#$apply $apply}) to
|
||||
propagate any model changes through the system into the view from outside of the "Angular
|
||||
realm" (controllers, services, Angular event handlers).
|
||||
propagate any model changes through the system into the view from outside of the "AngularJS
|
||||
realm" (controllers, services, AngularJS event handlers).
|
||||
|
||||
- Scopes can be nested to limit access to the properties of application components while providing
|
||||
access to shared model properties. Nested scopes are either "child scopes" or "isolate scopes".
|
||||
@@ -108,7 +108,7 @@ to test the behavior without being distracted by the rendering details.
|
||||
|
||||
## Scope Hierarchies
|
||||
|
||||
Each Angular application has exactly one {@link ng.$rootScope root scope}, but
|
||||
Each AngularJS application has exactly one {@link ng.$rootScope root scope}, but
|
||||
may have several child scopes.
|
||||
|
||||
The application can have multiple scopes, because some {@link guide/directive directives} create
|
||||
@@ -116,7 +116,7 @@ new child scopes (refer to directive documentation to see which directives creat
|
||||
When new scopes are created, they are added as children of their parent scope. This creates a tree
|
||||
structure which parallels the DOM where they're attached.
|
||||
|
||||
When Angular evaluates `{{name}}`, it first looks at the scope associated with the given
|
||||
When AngularJS evaluates `{{name}}`, it first looks at the scope associated with the given
|
||||
element for the `name` property. If no such property is found, it searches the parent scope
|
||||
and so on until the root scope is reached. In JavaScript this behavior is known as prototypical
|
||||
inheritance, and child scopes prototypically inherit from their parents.
|
||||
@@ -141,7 +141,7 @@ a diagram depicting the scope boundaries.
|
||||
angular.module('scopeExample', [])
|
||||
.controller('GreetController', ['$scope', '$rootScope', function($scope, $rootScope) {
|
||||
$scope.name = 'World';
|
||||
$rootScope.department = 'Angular';
|
||||
$rootScope.department = 'AngularJS';
|
||||
}])
|
||||
.controller('ListController', ['$scope', function($scope) {
|
||||
$scope.names = ['Igor', 'Misko', 'Vojta'];
|
||||
@@ -158,7 +158,7 @@ a diagram depicting the scope boundaries.
|
||||
|
||||
<img class="center" src="img/guide/concepts-scope.png">
|
||||
|
||||
Notice that Angular automatically places `ng-scope` class on elements where scopes are
|
||||
Notice that AngularJS automatically places `ng-scope` class on elements where scopes are
|
||||
attached. The `<style>` definition in this example highlights in red the new scope locations. The
|
||||
child scopes are necessary because the repeater evaluates `{{name}}` expression, but
|
||||
depending on which scope the expression is evaluated it produces different result. Similarly the
|
||||
@@ -173,7 +173,7 @@ purposes. (It is unlikely that one would need to retrieve scopes in this way ins
|
||||
application.) The location where the root scope is attached to the DOM is defined by the location
|
||||
of {@link ng.directive:ngApp `ng-app`} directive. Typically
|
||||
`ng-app` is placed on the `<html>` element, but it can be placed on other elements as well, if,
|
||||
for example, only a portion of the view needs to be controlled by Angular.
|
||||
for example, only a portion of the view needs to be controlled by AngularJS.
|
||||
|
||||
To examine the scope in the debugger:
|
||||
|
||||
@@ -230,11 +230,11 @@ The normal flow of a browser receiving an event is that it executes a correspond
|
||||
callback. Once the callback completes the browser re-renders the DOM and returns to waiting for
|
||||
more events.
|
||||
|
||||
When the browser calls into JavaScript the code executes outside the Angular execution context,
|
||||
which means that Angular is unaware of model modifications. To properly process model
|
||||
modifications the execution has to enter the Angular execution context using the {@link
|
||||
When the browser calls into JavaScript the code executes outside the AngularJS execution context,
|
||||
which means that AngularJS is unaware of model modifications. To properly process model
|
||||
modifications the execution has to enter the AngularJS execution context using the {@link
|
||||
ng.$rootScope.Scope#$apply `$apply`} method. Only model modifications which
|
||||
execute inside the `$apply` method will be properly accounted for by Angular. For example if a
|
||||
execute inside the `$apply` method will be properly accounted for by AngularJS. For example if a
|
||||
directive listens on DOM events, such as {@link
|
||||
ng.directive:ngClick `ng-click`} it must evaluate the
|
||||
expression inside the `$apply` method.
|
||||
@@ -264,14 +264,14 @@ the `$digest` phase. This delay is desirable, since it coalesces multiple model
|
||||
3. **Model mutation**
|
||||
|
||||
For mutations to be properly observed, you should make them only within the {@link
|
||||
ng.$rootScope.Scope#$apply scope.$apply()}. Angular APIs do this
|
||||
ng.$rootScope.Scope#$apply scope.$apply()}. AngularJS APIs do this
|
||||
implicitly, so no extra `$apply` call is needed when doing synchronous work in controllers,
|
||||
or asynchronous work with {@link ng.$http $http}, {@link ng.$timeout $timeout}
|
||||
or {@link ng.$interval $interval} services.
|
||||
|
||||
4. **Mutation observation**
|
||||
|
||||
At the end of `$apply`, Angular performs a {@link ng.$rootScope.Scope#$digest
|
||||
At the end of `$apply`, AngularJS performs a {@link ng.$rootScope.Scope#$digest
|
||||
$digest} cycle on the root scope, which then propagates throughout all child scopes. During
|
||||
the `$digest` cycle, all `$watch`ed expressions or functions are checked for model mutation
|
||||
and if a mutation is detected, the `$watch` listener is called.
|
||||
@@ -334,7 +334,7 @@ information.
|
||||
|
||||
### Scope `$watch` Performance Considerations
|
||||
|
||||
Dirty checking the scope for property changes is a common operation in Angular and for this reason
|
||||
Dirty checking the scope for property changes is a common operation in AngularJS and for this reason
|
||||
the dirty checking function must be efficient. Care should be taken that the dirty checking
|
||||
function does not do any DOM access, as DOM access is orders of magnitude slower than property
|
||||
access on JavaScript object.
|
||||
@@ -354,7 +354,7 @@ Dirty checking can be done with three strategies: By reference, by collection co
|
||||
## Integration with the browser event loop
|
||||
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-runtime.png">
|
||||
|
||||
The diagram and the example below describe how Angular interacts with the browser's event loop.
|
||||
The diagram and the example below describe how AngularJS interacts with the browser's event loop.
|
||||
|
||||
1. The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event,
|
||||
or network event (response from a server).
|
||||
@@ -363,19 +363,19 @@ The diagram and the example below describe how Angular interacts with the browse
|
||||
3. Once the callback executes, the browser leaves the JavaScript context and
|
||||
re-renders the view based on DOM changes.
|
||||
|
||||
Angular modifies the normal JavaScript flow by providing its own event processing loop. This
|
||||
splits the JavaScript into classical and Angular execution context. Only operations which are
|
||||
applied in the Angular execution context will benefit from Angular data-binding, exception handling,
|
||||
property watching, etc... You can also use $apply() to enter the Angular execution context from JavaScript. Keep in
|
||||
AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This
|
||||
splits the JavaScript into classical and AngularJS execution context. Only operations which are
|
||||
applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling,
|
||||
property watching, etc... You can also use $apply() to enter the AngularJS execution context from JavaScript. Keep in
|
||||
mind that in most places (controllers, services) $apply has already been called for you by the
|
||||
directive which is handling the event. An explicit call to $apply is needed only when
|
||||
implementing custom event callbacks, or when working with third-party library callbacks.
|
||||
|
||||
1. Enter the Angular execution context by calling {@link guide/scope scope}`.`{@link
|
||||
1. Enter the AngularJS execution context by calling {@link guide/scope scope}`.`{@link
|
||||
ng.$rootScope.Scope#$apply $apply}`(stimulusFn)`, where `stimulusFn` is
|
||||
the work you wish to do in the Angular execution context.
|
||||
2. Angular executes the `stimulusFn()`, which typically modifies application state.
|
||||
3. Angular enters the {@link ng.$rootScope.Scope#$digest $digest} loop. The
|
||||
the work you wish to do in the AngularJS execution context.
|
||||
2. AngularJS executes the `stimulusFn()`, which typically modifies application state.
|
||||
3. AngularJS enters the {@link ng.$rootScope.Scope#$digest $digest} loop. The
|
||||
loop is made up of two smaller loops which process {@link
|
||||
ng.$rootScope.Scope#$evalAsync $evalAsync} queue and the {@link
|
||||
ng.$rootScope.Scope#$watch $watch} list. The {@link
|
||||
@@ -391,8 +391,8 @@ implementing custom event callbacks, or when working with third-party library ca
|
||||
5. The {@link ng.$rootScope.Scope#$watch $watch} list is a set of expressions
|
||||
which may have changed since last iteration. If a change is detected then the `$watch`
|
||||
function is called which typically updates the DOM with the new value.
|
||||
6. Once the Angular {@link ng.$rootScope.Scope#$digest $digest} loop finishes,
|
||||
the execution leaves the Angular and JavaScript context. This is followed by the browser
|
||||
6. Once the AngularJS {@link ng.$rootScope.Scope#$digest $digest} loop finishes,
|
||||
the execution leaves the AngularJS and JavaScript context. This is followed by the browser
|
||||
re-rendering the DOM to reflect any changes.
|
||||
|
||||
|
||||
@@ -411,12 +411,12 @@ user enters text into the text field.
|
||||
2. The {@link ng.directive:input input} directive
|
||||
captures the change to the input's value and calls {@link
|
||||
ng.$rootScope.Scope#$apply $apply}`("name = 'X';")` to update the
|
||||
application model inside the Angular execution context.
|
||||
3. Angular applies the `name = 'X';` to the model.
|
||||
application model inside the AngularJS execution context.
|
||||
3. AngularJS applies the `name = 'X';` to the model.
|
||||
4. The {@link ng.$rootScope.Scope#$digest $digest} loop begins
|
||||
5. The {@link ng.$rootScope.Scope#$watch $watch} list detects a change
|
||||
on the `name` property and notifies the {@link ng.$interpolate interpolation},
|
||||
which in turn updates the DOM.
|
||||
6. Angular exits the execution context, which in turn exits the `keydown` event and with it
|
||||
6. AngularJS exits the execution context, which in turn exits the `keydown` event and with it
|
||||
the JavaScript execution context.
|
||||
7. The browser re-renders the view with the updated text.
|
||||
|
||||
@@ -14,7 +14,7 @@ keep in mind as you build your application.
|
||||
Email us at [security@angularjs.org](mailto:security@angularjs.org) to report any potential
|
||||
security issues in AngularJS.
|
||||
|
||||
Please keep in mind the points below about Angular's expression language.
|
||||
Please keep in mind the points below about AngularJS's expression language.
|
||||
|
||||
|
||||
## Use the latest AngularJS possible
|
||||
@@ -25,19 +25,19 @@ of upcoming security patches and other updates.
|
||||
|
||||
Be ready to update rapidly when new security-centric patches are available.
|
||||
|
||||
Those that stray from Angular standards (such as modifying Angular's core) may have difficulty updating,
|
||||
Those that stray from AngularJS standards (such as modifying AngularJS's core) may have difficulty updating,
|
||||
so keeping to AngularJS standards is not just a functionality issue, it's also critical in order to
|
||||
facilitate rapid security updates.
|
||||
|
||||
|
||||
## Angular Templates and Expressions
|
||||
## AngularJS Templates and Expressions
|
||||
|
||||
**If an attacker has access to control Angular templates or expressions, they can exploit an Angular application
|
||||
**If an attacker has access to control AngularJS templates or expressions, they can exploit an AngularJS application
|
||||
via an XSS attack, regardless of the version.**
|
||||
|
||||
There are a number of ways that templates and expressions can be controlled:
|
||||
|
||||
* **Generating Angular templates on the server containing user-provided content**. This is the most common pitfall
|
||||
* **Generating AngularJS templates on the server containing user-provided content**. This is the most common pitfall
|
||||
where you are generating HTML via some server-side engine such as PHP, Java or ASP.NET.
|
||||
* **Passing an expression generated from user-provided content in calls to the following methods on a {@link scope scope}**:
|
||||
* `$watch(userContent, ...)`
|
||||
@@ -55,14 +55,14 @@ There are a number of ways that templates and expressions can be controlled:
|
||||
`{{ value | orderBy : userContent }}`
|
||||
|
||||
### Sandbox removal
|
||||
Each version of Angular 1 up to, but not including 1.6, contained an expression sandbox, which reduced the surface area of
|
||||
the vulnerability but never removed it. **In Angular 1.6 we removed this sandbox as developers kept relying upon it as a security
|
||||
feature even though it was always possible to access arbitrary JavaScript code if one could control the Angular templates
|
||||
Each version of AngularJS 1 up to, but not including 1.6, contained an expression sandbox, which reduced the surface area of
|
||||
the vulnerability but never removed it. **In AngularJS 1.6 we removed this sandbox as developers kept relying upon it as a security
|
||||
feature even though it was always possible to access arbitrary JavaScript code if one could control the AngularJS templates
|
||||
or expressions of applications.**
|
||||
|
||||
Control of the Angular templates makes applications vulnerable even if there was a completely secure sandbox:
|
||||
Control of the AngularJS templates makes applications vulnerable even if there was a completely secure sandbox:
|
||||
* https://ryhanson.com/stealing-session-tokens-on-plunker-with-an-angular-expression-injection/ in this blog post the author shows
|
||||
a (now closed) vulnerability in the Plunker application due to server-side rendering inside an Angular template.
|
||||
a (now closed) vulnerability in the Plunker application due to server-side rendering inside an AngularJS template.
|
||||
* https://ryhanson.com/angular-expression-injection-walkthrough/ in this blog post the author describes an attack, which does not
|
||||
rely upon an expression sandbox bypass, that can be made because the sample application is rendering a template on the server that
|
||||
contains user entered content.
|
||||
@@ -75,9 +75,9 @@ Control of the Angular templates makes applications vulnerable even if there was
|
||||
* Consider using {@link ng.directive:ngCsp CSP} (but don't rely only on CSP)
|
||||
|
||||
**You can use suitably sanitized server-side templating to dynamically generate CSS, URLs, etc, but not for generating templates that are
|
||||
bootstrapped/compiled by Angular.**
|
||||
bootstrapped/compiled by AngularJS.**
|
||||
|
||||
**If you must continue to allow user-provided content in an Angular template then the safest option is to ensure that it is only
|
||||
**If you must continue to allow user-provided content in an AngularJS template then the safest option is to ensure that it is only
|
||||
present in the part of the template that is made inert via the {@link ngNonBindable} directive.**
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ present in the part of the template that is made inert via the {@link ngNonBinda
|
||||
|
||||
Whenever your application makes requests to a server there are potential security issues that need
|
||||
to be blocked. Both server and the client must cooperate in order to eliminate these threats.
|
||||
Angular comes pre-configured with strategies that address these issues, but for this to work backend
|
||||
AngularJS comes pre-configured with strategies that address these issues, but for this to work backend
|
||||
server cooperation is required.
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ For more information please visit {@link $http#cross-site-request-forgery-xsrf-p
|
||||
### JSON Hijacking Protection
|
||||
|
||||
Protection from JSON Hijacking is provided if the server prefixes all JSON requests with following string `")]}',\n"`.
|
||||
Angular will automatically strip the prefix before processing it as JSON.
|
||||
AngularJS will automatically strip the prefix before processing it as JSON.
|
||||
For more information please visit {@link $http#json-vulnerability-protection JSON Hijacking Protection}.
|
||||
|
||||
Bear in mind that calling `$http.jsonp` gives the remote server (and, if the request is not secured, any Man-in-the-Middle attackers)
|
||||
@@ -123,7 +123,7 @@ For more information please visit {@link $sce} and {@link ngSanitize.$sanitize}.
|
||||
|
||||
## Using Local Caches
|
||||
|
||||
There are various places that the browser can store (or cache) data. Within Angular there are objects created by
|
||||
There are various places that the browser can store (or cache) data. Within AngularJS there are objects created by
|
||||
the {@link $cacheFactory}. These objects, such as {@link $templateCache} are used to store and retrieve data,
|
||||
primarily used by {@link $http} and the {@link script} directive to cache templates and other data.
|
||||
|
||||
|
||||
@@ -5,29 +5,29 @@
|
||||
|
||||
# Services
|
||||
|
||||
Angular services are substitutable objects that are wired together using {@link di dependency
|
||||
AngularJS services are substitutable objects that are wired together using {@link di dependency
|
||||
injection (DI)}. You can use services to organize and share code across your app.
|
||||
|
||||
Angular services are:
|
||||
AngularJS services are:
|
||||
|
||||
* Lazily instantiated – Angular only instantiates a service when an application component depends
|
||||
* Lazily instantiated – AngularJS only instantiates a service when an application component depends
|
||||
on it.
|
||||
* Singletons – Each component dependent on a service gets a reference to the single instance
|
||||
generated by the service factory.
|
||||
|
||||
Angular offers several useful services (like {@link ng.$http `$http`}), but for most applications
|
||||
AngularJS offers several useful services (like {@link ng.$http `$http`}), but for most applications
|
||||
you'll also want to {@link services#creating-services create your own}.
|
||||
|
||||
<div class="alert alert-info">
|
||||
**Note:** Like other core Angular identifiers, built-in services always start with `$`
|
||||
**Note:** Like other core AngularJS identifiers, built-in services always start with `$`
|
||||
(e.g. `$http`).
|
||||
</div>
|
||||
|
||||
|
||||
## Using a Service
|
||||
|
||||
To use an Angular service, you add it as a dependency for the component (controller, service,
|
||||
filter or directive) that depends on the service. Angular's {@link di dependency injection}
|
||||
To use an AngularJS service, you add it as a dependency for the component (controller, service,
|
||||
filter or directive) that depends on the service. AngularJS's {@link di dependency injection}
|
||||
subsystem takes care of the rest.
|
||||
|
||||
<example module="myServiceModule" name="services-usage">
|
||||
@@ -72,7 +72,7 @@ subsystem takes care of the rest.
|
||||
## Creating Services
|
||||
|
||||
Application developers are free to define their own services by registering the service's name and
|
||||
**service factory function**, with an Angular module.
|
||||
**service factory function**, with an AngularJS module.
|
||||
|
||||
The **service factory function** generates the single object or function that represents the
|
||||
service to the rest of the application. The object or function returned by the service is
|
||||
@@ -180,7 +180,7 @@ This technique is often used in unit tests to mock out a service's dependencies.
|
||||
## Unit Testing
|
||||
|
||||
The following is a unit test for the `notify` service from the {@link services#creating-services
|
||||
Creating Angular Services} example above. The unit test example uses a Jasmine spy (mock) instead
|
||||
Creating AngularJS Services} example above. The unit test example uses a Jasmine spy (mock) instead
|
||||
of a real browser alert.
|
||||
|
||||
```js
|
||||
@@ -233,5 +233,5 @@ it('should clear messages after alert', function() {
|
||||
|
||||
## Related API
|
||||
|
||||
* {@link ./api/ng/service Angular Service API}
|
||||
* {@link ./api/ng/service AngularJS Service API}
|
||||
* {@link angular.injector Injector API}
|
||||
|
||||
@@ -5,16 +5,16 @@
|
||||
|
||||
# Templates
|
||||
|
||||
In Angular, templates are written with HTML that contains Angular-specific elements and attributes.
|
||||
Angular combines the template with information from the model and controller to render the dynamic
|
||||
In AngularJS, templates are written with HTML that contains AngularJS-specific elements and attributes.
|
||||
AngularJS combines the template with information from the model and controller to render the dynamic
|
||||
view that a user sees in the browser.
|
||||
|
||||
These are the types of Angular elements and attributes you can use:
|
||||
These are the types of AngularJS elements and attributes you can use:
|
||||
|
||||
* {@link guide/directive Directive} — An attribute or element that
|
||||
augments an existing DOM element or represents a reusable DOM component.
|
||||
* {@link ng.$interpolate Markup} — The double curly brace notation `{{ }}` to bind expressions
|
||||
to elements is built-in Angular markup.
|
||||
to elements is built-in AngularJS markup.
|
||||
* {@link guide/filter Filter} — Formats data for display.
|
||||
* {@link forms Form controls} — Validates user input.
|
||||
|
||||
@@ -35,13 +35,13 @@ curly-brace {@link expression expression} bindings:
|
||||
</html>
|
||||
```
|
||||
|
||||
In a simple app, the template consists of HTML, CSS, and Angular directives contained
|
||||
In a simple app, the template consists of HTML, CSS, and AngularJS directives contained
|
||||
in just one HTML file (usually `index.html`).
|
||||
|
||||
In a more complex app, you can display multiple views within one main page using "partials" –
|
||||
segments of template located in separate HTML files. You can use the
|
||||
{@link ngRoute.directive:ngView ngView} directive to load partials based on configuration passed
|
||||
to the {@link ngRoute.$route $route} service. The {@link tutorial/ angular tutorial} shows this
|
||||
to the {@link ngRoute.$route $route} service. The {@link tutorial/ AngularJS tutorial} shows this
|
||||
technique in steps seven and eight.
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
JavaScript is a dynamically typed language which comes with great power of expression, but it also
|
||||
comes with almost no help from the compiler. For this reason we feel very strongly that any code
|
||||
written in JavaScript needs to come with a strong set of tests. We have built many features into
|
||||
Angular which make testing your Angular applications easy. With Angular, there is no excuse for not testing.
|
||||
AngularJS which make testing your AngularJS applications easy. With AngularJS, there is no excuse for not testing.
|
||||
|
||||
## Separation of Concerns
|
||||
|
||||
@@ -25,7 +25,7 @@ typical project. The reason is that the developers often mix concerns resulting
|
||||
piece of code which does everything. It makes an XHR request, it sorts the response data, and then it
|
||||
manipulates the DOM.
|
||||
|
||||
With Angular, we try to make it easy for you to do the right thing. For your XHR requests, we
|
||||
With AngularJS, we try to make it easy for you to do the right thing. For your XHR requests, we
|
||||
provide dependency injection, so your requests can be simulated. For the DOM, we abstract it, so you can
|
||||
test your model without having to manipulate the DOM directly. Your tests can then
|
||||
assert that the data has been sorted without having to create or look at the state of the DOM or to
|
||||
@@ -33,22 +33,22 @@ wait for any XHR requests to return data. The individual sort function can be te
|
||||
|
||||
## With great power comes great responsibility
|
||||
|
||||
Angular is written with testability in mind, but it still requires that you do the right thing.
|
||||
AngularJS is written with testability in mind, but it still requires that you do the right thing.
|
||||
We tried to make the right thing easy, but if you ignore these guidelines you may end up with an
|
||||
untestable application.
|
||||
|
||||
## Dependency Injection
|
||||
|
||||
Angular comes with {@link di dependency injection} built-in, which makes testing components much
|
||||
AngularJS comes with {@link di dependency injection} built-in, which makes testing components much
|
||||
easier, because you can pass in a component's dependencies and stub or mock them as you wish.
|
||||
|
||||
Components that have their dependencies injected allow them to be easily mocked on a test by
|
||||
test basis, without having to mess with any global variables that could inadvertently affect
|
||||
another test.
|
||||
|
||||
## Additional tools for testing Angular applications
|
||||
## Additional tools for testing AngularJS applications
|
||||
|
||||
For testing Angular applications there are certain tools that you should use that will make testing much
|
||||
For testing AngularJS applications there are certain tools that you should use that will make testing much
|
||||
easier to set up and run.
|
||||
|
||||
### Karma
|
||||
@@ -65,7 +65,7 @@ are available on [the Karma website](http://karma-runner.github.io/0.12/intro/in
|
||||
### Jasmine
|
||||
|
||||
[Jasmine](http://jasmine.github.io/1.3/introduction.html) is a behavior driven development framework for
|
||||
JavaScript that has become the most popular choice for testing Angular applications. Jasmine
|
||||
JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine
|
||||
provides functions to help with structuring your tests and also making assertions. As your tests
|
||||
grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.
|
||||
|
||||
@@ -109,15 +109,15 @@ what they are. To use Jasmine with Karma, we use the
|
||||
|
||||
### angular-mocks
|
||||
|
||||
Angular also provides the {@link ngMock} module, which provides mocking for your tests. This is used
|
||||
to inject and mock Angular services within unit tests. In addition, it is able to extend other
|
||||
AngularJS also provides the {@link ngMock} module, which provides mocking for your tests. This is used
|
||||
to inject and mock AngularJS services within unit tests. In addition, it is able to extend other
|
||||
modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work
|
||||
with. One of the most useful parts of ngMock is {@link ngMock.$httpBackend}, which lets us mock XHR
|
||||
requests in tests, and return sample data instead.
|
||||
|
||||
## Testing a Controller
|
||||
|
||||
Because Angular separates logic from the view layer, it keeps controllers easy to test. Let's take a
|
||||
Because AngularJS separates logic from the view layer, it keeps controllers easy to test. Let's take a
|
||||
look at how we might test the controller below, which provides `$scope.grade`, which sets a property
|
||||
on the scope based on the length of the password.
|
||||
|
||||
@@ -282,13 +282,13 @@ describe('length filter', function() {
|
||||
```
|
||||
|
||||
## Testing Directives
|
||||
Directives in angular are responsible for encapsulating complex functionality within custom HTML tags,
|
||||
Directives in AngularJS are responsible for encapsulating complex functionality within custom HTML tags,
|
||||
attributes, classes or comments. Unit tests are very important for directives because the components
|
||||
you create with directives may be used throughout your application and in many different contexts.
|
||||
|
||||
### Simple HTML Element Directive
|
||||
|
||||
Let's start with an angular app with no dependencies.
|
||||
Let's start with an AngularJS app with no dependencies.
|
||||
|
||||
```js
|
||||
var app = angular.module('myApp', []);
|
||||
|
||||
@@ -2,26 +2,26 @@
|
||||
@name Downloading
|
||||
@description
|
||||
|
||||
# Including Angular scripts from the Google CDN
|
||||
# Including AngularJS scripts from the Google CDN
|
||||
The quickest way to get started is to point your html `<script>` tag to a
|
||||
[Google CDN](https://developers.google.com/speed/libraries/#angularjs) URL.
|
||||
This way, you don't have to download anything or maintain a local copy.
|
||||
|
||||
There are two types of Angular script URLs you can point to, one for development and one for
|
||||
There are two types of AngularJS script URLs you can point to, one for development and one for
|
||||
production:
|
||||
|
||||
* __angular.js__ — This is the human-readable, non-minified version, suitable for web development.
|
||||
* __angular.min.js__ — This is the minified version, which we strongly suggest you use in
|
||||
production.
|
||||
|
||||
To point your code to an angular script on the Google CDN server, use the following template. This
|
||||
To point your code to an AngularJS script on the Google CDN server, use the following template. This
|
||||
example points to the minified version 1.5.6:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html ng-app>
|
||||
<head>
|
||||
<title>My Angular App</title>
|
||||
<title>My AngularJS App</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -32,22 +32,22 @@ example points to the minified version 1.5.6:
|
||||
<div class="alert alert-info">
|
||||
Note that only versions 1.0.1 and above are available on the CDN. If you need an earlier version
|
||||
(which you shouldn't) you can use the https://code.angularjs.org/ URL, which was the previous
|
||||
recommended location for hosted code source. If you're still using the Angular server you should
|
||||
recommended location for hosted code source. If you're still using the AngularJS server you should
|
||||
switch to the CDN version for even faster loading times.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
# Downloading and hosting angular files locally
|
||||
This option is for those who want to work with Angular offline, or those who want to host the
|
||||
Angular files on their own servers.
|
||||
# Downloading and hosting AngularJS files locally
|
||||
This option is for those who want to work with AngularJS offline, or those who want to host the
|
||||
AngularJS files on their own servers.
|
||||
|
||||
If you navigate to https://code.angularjs.org/, you'll see a directory listing with all of the
|
||||
Angular versions since we started releasing versioned build artifacts. Each directory contains all
|
||||
AngularJS versions since we started releasing versioned build artifacts. Each directory contains all
|
||||
artifacts that we released for a particular version. Download the version you want and have fun.
|
||||
|
||||
<div class="alert alert-warning">
|
||||
You can ignore directories starting with `2.` (e.g. `2.0.0-beta.17`) — they are not related to
|
||||
AngularJS. They contain build artifacts from [Angular 2](https://angular.io) versions.
|
||||
AngularJS. They contain build artifacts from [Angular](https://angular.io) versions.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
@@ -72,10 +72,10 @@ development) come in two flavors — one suitable for development, the other for
|
||||
<br />
|
||||
The set of files included in each version directory are:
|
||||
|
||||
* __`angular.zip`__ — This is a zip archive that contains all of the files released for this Angular
|
||||
* __`angular.zip`__ — This is a zip archive that contains all of the files released for this AngularJS
|
||||
version. Use this file to get everything in a single download.
|
||||
|
||||
* __`angular.js`__ — The core Angular framework. This is all you need to get your Angular app
|
||||
* __`angular.js`__ — The core AngularJS framework. This is all you need to get your AngularJS app
|
||||
running.
|
||||
|
||||
* __`angular-csp.css`__ — You only need this file if you are using
|
||||
@@ -86,14 +86,14 @@ The set of files included in each version directory are:
|
||||
apps even easier. Your unit/integration test harness should load this file after `angular.js` is
|
||||
loaded.
|
||||
|
||||
* __`angular-loader.js`__ — Module loader for Angular modules. If you are loading multiple
|
||||
script files containing Angular modules, you can load them asynchronously and in any order as long
|
||||
* __`angular-loader.js`__ — Module loader for AngularJS modules. If you are loading multiple
|
||||
script files containing AngularJS modules, you can load them asynchronously and in any order as long
|
||||
as you load this file first. Often the contents of this file are copy&pasted into the `index.html`
|
||||
to avoid even the initial request to `angular-loader[.min].js`.
|
||||
See [angular-seed](https://github.com/angular/angular-seed/blob/master/app/index-async.html) for
|
||||
an example of usage.
|
||||
|
||||
* __Additional Angular modules:__ Optional modules with additional functionality. These files
|
||||
* __Additional AngularJS modules:__ Optional modules with additional functionality. These files
|
||||
should be loaded after the core `angular[.min].js` file:
|
||||
* __`angular-animate.js`__ — Enable animation support. ({@link module:ngAnimate API docs})
|
||||
* __`angular-aria.js`__ — Make your apps [accessible](http://www.w3.org/TR/wai-aria/) to users of
|
||||
@@ -104,11 +104,11 @@ The set of files included in each version directory are:
|
||||
messages in interpolated text. ({@link module:ngMessageFormat API docs})
|
||||
* __`angular-messages.js`__ — Enhanced support for displaying validation messages.
|
||||
({@link module:ngMessages API docs})
|
||||
* __`angular-parse-ext.js`__ — Allow Unicode characters in identifiers inside Angular expressions.
|
||||
* __`angular-parse-ext.js`__ — Allow Unicode characters in identifiers inside AngularJS expressions.
|
||||
({@link module:ngParseExt API docs})
|
||||
* __`angular-resource.js`__ — Easy interaction with RESTful services.
|
||||
({@link module:ngResource API docs})
|
||||
* __`angular-route.js`__ — Routing and deep-linking services and directives for Angular apps.
|
||||
* __`angular-route.js`__ — Routing and deep-linking services and directives for AngularJS apps.
|
||||
({@link module:ngRoute API docs})
|
||||
* __`angular-sanitize.js`__ — Functionality to sanitize HTML. ({@link module:ngSanitize API docs})
|
||||
* __`angular-touch.js`__ — Touch events and other helpers for touch-enabled devices.
|
||||
@@ -120,4 +120,4 @@ The set of files included in each version directory are:
|
||||
importantly, view the docs offline.
|
||||
|
||||
* __`i18n/`__ - This directory contains [locale specific](https://docs.angularjs.org/guide/i18n)
|
||||
`ngLocale` Angular modules to override the defaults defined in the main `ng` module.
|
||||
`ngLocale` AngularJS modules to override the defaults defined in the main `ng` module.
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
### Why is this project called "AngularJS"? Why is the namespace called "ng"?
|
||||
|
||||
Because HTML has Angular brackets and "ng" sounds like "Angular".
|
||||
Because HTML has AngularJS brackets and "ng" sounds like "AngularJS".
|
||||
|
||||
|
||||
### Is AngularJS a library, framework, plugin or a browser extension?
|
||||
@@ -94,7 +94,8 @@ When adding new code to AngularJS, we have a very stringent commit policy:
|
||||
- Commit messages must be written in a specific manner that allows us to parse them and extract the changes
|
||||
for release notes ([see the contributing guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md))
|
||||
|
||||
The AngularJS code base has a very large set of unit tests and end-to-end tests. This means that a breaking change will require one or more tests to be changed to allow the
|
||||
The AngularJS code base has a very large set of unit tests and end-to-end tests. This means that
|
||||
a breaking change will require one or more tests to be changed to allow the
|
||||
tests to pass. So when a commit includes tests that are being removed or modified, this is a flag that the
|
||||
code might include a breaking change. When reviewing the commit we can then decide whether there really is
|
||||
a breaking change and if it is appropriate for the branch to which it is being merged. If so, then we
|
||||
@@ -108,8 +109,8 @@ not used at Google or without sufficient test coverage, have a chance of making
|
||||
|
||||
### Is AngularJS a templating system?
|
||||
|
||||
At the highest level, Angular does look like just another templating system. But there is one
|
||||
important reason why the Angular templating system is different, that makes it very good fit for
|
||||
At the highest level, AngularJS does look like just another templating system. But there is one
|
||||
important reason why the AngularJS templating system is different, that makes it very good fit for
|
||||
application development: bidirectional data binding. The template is compiled in the browser and
|
||||
the compilation step produces a live view. This means you, the developers, don't need to write
|
||||
code to constantly sync the view with the model and the model with the view as in other
|
||||
@@ -118,7 +119,7 @@ templating systems.
|
||||
|
||||
### Do I need to worry about security holes in AngularJS?
|
||||
|
||||
Like any other technology, AngularJS is not impervious to attack. Angular does, however, provide
|
||||
Like any other technology, AngularJS is not impervious to attack. AngularJS does, however, provide
|
||||
built-in protection from basic security holes, including cross-site scripting and HTML injection
|
||||
attacks. AngularJS does round-trip escaping on all strings for you and even offers XSRF protection
|
||||
for server-side communication.
|
||||
@@ -127,7 +128,7 @@ AngularJS was designed to be compatible with other security measures like Conten
|
||||
(CSP), HTTPS (SSL/TLS) and server-side authentication and authorization that greatly reduce the
|
||||
possible attack vectors and we highly recommend their use.
|
||||
|
||||
Please read {@link security} for more detailed information about securing Angular apps.
|
||||
Please read {@link security} for more detailed information about securing AngularJS apps.
|
||||
|
||||
|
||||
### Can I download the source, build, and host the AngularJS environment locally?
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
|
||||
# Getting Started
|
||||
|
||||
We want you to have an easy time while starting to use Angular. We've put together the following steps on your path to
|
||||
becoming an Angular expert.
|
||||
We want you to have an easy time while starting to use AngularJS. We've put together the following steps on your path to
|
||||
becoming an AngularJS expert.
|
||||
|
||||
1. Read the {@link guide/concepts conceptual overview}.<br/>Understand Angular's vocabulary and how all the Angular
|
||||
1. Read the {@link guide/concepts conceptual overview}.<br/>Understand AngularJS's vocabulary and how all the AngularJS
|
||||
components work together.
|
||||
1. Do the {@link tutorial/ AngularJS Tutorial}.<br/>Walk end-to-end through building an application complete with tests
|
||||
on top of a node.js web server. Covers every major AngularJS feature and shows you how to set up your development
|
||||
|
||||
@@ -6,19 +6,19 @@
|
||||
# PhoneCat Tutorial App
|
||||
|
||||
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
|
||||
the construction of an Angular web app. The app you will build is a catalog that displays a list
|
||||
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
|
||||
of Android devices, lets you filter the list to see only devices that interest you, and then view
|
||||
details for any device.
|
||||
|
||||
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413"
|
||||
alt="demo application running in the browser">
|
||||
|
||||
Follow the tutorial to see how Angular makes browsers smarter — without the use of native
|
||||
Follow the tutorial to see how AngularJS makes browsers smarter — without the use of native
|
||||
extensions or plug-ins:
|
||||
|
||||
* See examples of how to use client-side data binding to build dynamic views of data that change
|
||||
immediately in response to user actions.
|
||||
* See how Angular keeps your views in sync with your data without the need for DOM manipulation.
|
||||
* See how AngularJS keeps your views in sync with your data without the need for DOM manipulation.
|
||||
* Learn a better, easier way to test your web apps, with Karma and Protractor.
|
||||
* Learn how to use dependency injection and services to make common web tasks, such as getting data
|
||||
into your app, easier.
|
||||
@@ -30,9 +30,9 @@ When you finish the tutorial you will be able to:
|
||||
* Create and run unit tests, with Karma.
|
||||
* Create and run end-to-end tests, with Protractor.
|
||||
* Move application logic out of the template and into components and controllers.
|
||||
* Get data from a server using Angular services.
|
||||
* Get data from a server using AngularJS services.
|
||||
* Apply animations to your application, using the `ngAnimate` module.
|
||||
* Structure your Angular applications in a modular way that scales well for larger projects.
|
||||
* Structure your AngularJS applications in a modular way that scales well for larger projects.
|
||||
* Identify resources for learning more about AngularJS.
|
||||
|
||||
The tutorial guides you through the entire process of building a simple application, including
|
||||
@@ -54,7 +54,7 @@ If you just want to _read_ the tutorial, you can go straight to the first step:
|
||||
## Working with the Code
|
||||
|
||||
You can follow along with this tutorial and hack on the code in the comfort of your own computer.
|
||||
This way, you can get hands-on practice of really writing Angular code and also on using the
|
||||
This way, you can get hands-on practice of really writing AngularJS code and also on using the
|
||||
recommended testing tools.
|
||||
|
||||
The tutorial relies on the use of the [Git][git] versioning system for source code management.
|
||||
@@ -182,7 +182,7 @@ bower install
|
||||
|
||||
### Running the Development Web Server
|
||||
|
||||
While Angular applications are purely client-side code, and it is possible to open them in a web
|
||||
While AngularJS applications are purely client-side code, and it is possible to open them in a web
|
||||
browser directly from the file system, it is better to serve them from an HTTP web server. In
|
||||
particular, for security reasons, most modern browsers will not allow JavaScript to make server
|
||||
requests if the page is loaded directly from the file system.
|
||||
@@ -199,7 +199,7 @@ You can now browse to the application at http://localhost:8000/index.html.
|
||||
|
||||
<div class="alert alert-info">
|
||||
To serve the web app on a different IP address or port, edit the "start" script within
|
||||
`package.json`. You can use `-a` to set the address and `-p` to set the port. You also need to
|
||||
`package.json`. You can use `-a` to set the address and `-p` to set the port. You also need to
|
||||
update the `baseUrl` configuration property in `e2e-test/protractor.conf.js`.
|
||||
</div>
|
||||
|
||||
@@ -284,9 +284,9 @@ a new commit of changes to a remote repository.
|
||||
<br />
|
||||
**Firewall / Proxy issues**
|
||||
|
||||
Git and other tools, often use the `git:` protocol for accessing files in remote repositories.
|
||||
Some firewall configurations are blocking `git://` URLs, which leads to errors when trying to clone
|
||||
repositories or download dependencies. (For example corporate firewalls are "notorious" for blocking
|
||||
Git and other tools, often use the `git:` protocol for accessing files in remote repositories.
|
||||
Some firewall configurations are blocking `git://` URLs, which leads to errors when trying to clone
|
||||
repositories or download dependencies. (For example corporate firewalls are "notorious" for blocking
|
||||
`git:`.)
|
||||
|
||||
If you run into this issue, you can force the use of `https:` instead, by running the following
|
||||
@@ -304,8 +304,8 @@ In that case, you can delete the `node_modules/` directory and run `npm install`
|
||||
<br />
|
||||
**Protractor dependencies**
|
||||
|
||||
Under the hood, Protractor uses the [Selenium Standalone Server][selenium], which in turn requires
|
||||
the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running
|
||||
Under the hood, Protractor uses the [Selenium Standalone Server][selenium], which in turn requires
|
||||
the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running
|
||||
`java -version` from the command line.
|
||||
|
||||
If JDK is not already installed, you can download it [here][jdk-download].
|
||||
@@ -313,8 +313,8 @@ If JDK is not already installed, you can download it [here][jdk-download].
|
||||
<br />
|
||||
**Error running the web server**
|
||||
|
||||
The web server is configured to use port 8000. If the port is already in use (for example by another
|
||||
instance of a running web server) you will get an `EADDRINUSE` error. Make sure the port is
|
||||
The web server is configured to use port 8000. If the port is already in use (for example by another
|
||||
instance of a running web server) you will get an `EADDRINUSE` error. Make sure the port is
|
||||
available, before running `npm start`.
|
||||
|
||||
<hr />
|
||||
|
||||
@@ -42,7 +42,7 @@ the page.
|
||||
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 code contains some key Angular elements that we will need as we progress.
|
||||
The code contains some key AngularJS elements that we will need as we progress.
|
||||
|
||||
**`app/index.html`:**
|
||||
|
||||
@@ -73,10 +73,10 @@ The code contains some key Angular elements that we will need as we progress.
|
||||
<html ng-app>
|
||||
```
|
||||
|
||||
The `ng-app` attribute represents an Angular directive, named `ngApp` (Angular uses `kebab-case` for
|
||||
The `ng-app` attribute represents an AngularJS directive, named `ngApp` (AngularJS uses `kebab-case` for
|
||||
its custom attributes and `camelCase` for the corresponding directives which implement them). This
|
||||
directive is used to flag the HTML element that Angular should consider to be the root element of
|
||||
our application. This gives application developers the freedom to tell Angular if the entire HTML
|
||||
directive is used to flag the HTML element that AngularJS should consider to be the root element of
|
||||
our application. This gives application developers the freedom to tell AngularJS if the entire HTML
|
||||
page or only a portion of it should be treated as the AngularJS application.
|
||||
|
||||
For more info on `ngApp`, check out the {@link ngApp API Reference}.
|
||||
@@ -89,8 +89,8 @@ For more info on `ngApp`, check out the {@link ngApp API Reference}.
|
||||
```
|
||||
|
||||
This code downloads the `angular.js` script which registers a callback that will be executed by the
|
||||
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
|
||||
looks for the {@link ngApp ngApp} directive. If Angular finds the directive, it will bootstrap the
|
||||
browser when the containing HTML page is fully downloaded. When the callback is executed, AngularJS
|
||||
looks for the {@link ngApp ngApp} directive. If AngularJS finds the directive, it will bootstrap the
|
||||
application with the root of the application DOM being the element on which the `ngApp` directive
|
||||
was defined.
|
||||
|
||||
@@ -104,29 +104,29 @@ Developer Guide.
|
||||
Nothing here {{'yet' + '!'}}
|
||||
```
|
||||
|
||||
This line demonstrates two core features of Angular's templating capabilities:
|
||||
This line demonstrates two core features of AngularJS's templating capabilities:
|
||||
|
||||
* A binding, denoted by double-curlies: `{{ }}`
|
||||
* A simple expression used in this binding: `'yet' + '!'`
|
||||
|
||||
The binding tells Angular that it should evaluate an expression and insert the result into the DOM
|
||||
The binding tells AngularJS that it should evaluate an expression and insert the result into the DOM
|
||||
in place of the binding. As we will see in the next steps, rather than a one-time insert, a binding
|
||||
will result in efficient continuous updates whenever the result of the expression evaluation
|
||||
changes.
|
||||
|
||||
{@link guide/expression Angular expressions} are JavaScript-like code snippets that are evaluated by
|
||||
Angular in the context of the current model scope, rather than within the scope of the global
|
||||
{@link guide/expression AngularJS expressions} are JavaScript-like code snippets that are evaluated by
|
||||
AngularJS in the context of the current model scope, rather than within the scope of the global
|
||||
context (`window`).
|
||||
|
||||
As expected, once this template is processed by Angular, the HTML page contains the text:
|
||||
As expected, once this template is processed by AngularJS, the HTML page contains the text:
|
||||
|
||||
```
|
||||
Nothing here yet!
|
||||
```
|
||||
|
||||
## Bootstrapping Angular Applications
|
||||
## Bootstrapping AngularJS Applications
|
||||
|
||||
Bootstrapping Angular applications automatically using the `ngApp` directive is very easy and
|
||||
Bootstrapping AngularJS applications automatically using the `ngApp` directive is very easy and
|
||||
suitable for most cases. In advanced cases, such as when using script loaders, you can use the
|
||||
{@link guide/bootstrap#manual-initialization imperative/manual way} to bootstrap the application.
|
||||
|
||||
@@ -137,12 +137,12 @@ There are 3 important things that happen during the bootstrap phase:
|
||||
2. The injector will then create the {@link ng.$rootScope root scope} that will become the context
|
||||
for the model of our application.
|
||||
|
||||
3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
|
||||
3. AngularJS will then "compile" the DOM starting at the `ngApp` root element, processing any
|
||||
directives and bindings found along the way.
|
||||
|
||||
Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
|
||||
clicks, key presses or incoming HTTP responses) that might change the model. Once such an event
|
||||
occurs, Angular detects if it caused any model changes and if changes are found, Angular will
|
||||
occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS will
|
||||
reflect them in the view by updating all of the affected bindings.
|
||||
|
||||
The structure of our application is currently very simple. The template contains just one directive
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<ul doc-tutorial-nav="1"></ul>
|
||||
|
||||
|
||||
In order to illustrate how Angular enhances standard HTML, you will create a purely *static* HTML
|
||||
page and then examine how we can turn this HTML code into a template that Angular will use to
|
||||
In order to illustrate how AngularJS enhances standard HTML, you will create a purely *static* HTML
|
||||
page and then examine how we can turn this HTML code into a template that AngularJS will use to
|
||||
dynamically display the same result with any set of data.
|
||||
|
||||
In this step you will add some basic information about two cell phones to an HTML page.
|
||||
@@ -51,7 +51,7 @@ In this step you will add some basic information about two cell phones to an HTM
|
||||
# Summary
|
||||
|
||||
This addition to your app uses static HTML to display the list. Now, let's go to
|
||||
{@link step_02 step 2} to learn how to use Angular to dynamically generate the same list.
|
||||
{@link step_02 step 2} to learn how to use AngularJS to dynamically generate the same list.
|
||||
|
||||
|
||||
<ul doc-tutorial-nav="1"></ul>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@ngdoc tutorial
|
||||
@name 2 - Angular Templates
|
||||
@name 2 - AngularJS Templates
|
||||
@step 2
|
||||
@description
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
Now, it's time to make the web page dynamic — with AngularJS. We will also add a test that verifies
|
||||
the code for the controller we are going to add.
|
||||
|
||||
There are many ways to structure the code for an application. For Angular applications, we encourage
|
||||
There are many ways to structure the code for an application. For AngularJS applications, we encourage
|
||||
the use of the [Model-View-Controller (MVC) design pattern][mvc-pattern] to decouple the code and
|
||||
separate concerns. With that in mind, let's use a little Angular and JavaScript to add models,
|
||||
separate concerns. With that in mind, let's use a little AngularJS and JavaScript to add models,
|
||||
views, and controllers to our app.
|
||||
|
||||
* The list of three phones is now generated dynamically from data
|
||||
@@ -21,11 +21,11 @@ views, and controllers to our app.
|
||||
|
||||
## View and Template
|
||||
|
||||
In Angular, the **view** is a projection of the model through the HTML **template**. This means that
|
||||
whenever the model changes, Angular refreshes the appropriate binding points, which updates the
|
||||
In AngularJS, the **view** is a projection of the model through the HTML **template**. This means that
|
||||
whenever the model changes, AngularJS refreshes the appropriate binding points, which updates the
|
||||
view.
|
||||
|
||||
The view is constructed by Angular from this template.
|
||||
The view is constructed by AngularJS from this template.
|
||||
|
||||
<br />
|
||||
**`app/index.html`:**
|
||||
@@ -51,10 +51,10 @@ The view is constructed by Angular from this template.
|
||||
```
|
||||
|
||||
We replaced the hard-coded phone list with the {@link ngRepeat ngRepeat} directive and two
|
||||
{@link guide/expression Angular expressions}:
|
||||
{@link guide/expression AngularJS expressions}:
|
||||
|
||||
* The `ng-repeat="phone in phones"` attribute on the `<li>` tag is an Angular repeater directive.
|
||||
The repeater tells Angular to create a `<li>` element for each phone in the list, using the `<li>`
|
||||
* The `ng-repeat="phone in phones"` attribute on the `<li>` tag is an AngularJS repeater directive.
|
||||
The repeater tells AngularJS to create a `<li>` element for each phone in the list, using the `<li>`
|
||||
tag as the template.
|
||||
* The expressions wrapped in curly braces (`{{phone.name}}` and `{{phone.snippet}}`) will be
|
||||
replaced by the values of the expressions.
|
||||
@@ -67,7 +67,7 @@ We have also added a new directive, called {@link ngController ngController}, wh
|
||||
are referring to our application model, which is set up in our `PhoneListController` controller.
|
||||
|
||||
<div class="alert alert-info">
|
||||
Note: We have specified an {@link angular.Module Angular Module} to load using
|
||||
Note: We have specified an {@link angular.Module AngularJS Module} to load using
|
||||
`ng-app="phonecatApp"`, where `phonecatApp` is the name of our module. This module will contain
|
||||
the `PhoneListController`.
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ phonecatApp.controller('PhoneListController', function PhoneListController($scop
|
||||
|
||||
```
|
||||
|
||||
Here we declared a controller called `PhoneListController` and registered it in an Angular module,
|
||||
Here we declared a controller called `PhoneListController` and registered it in an AngularJS module,
|
||||
`phonecatApp`. Notice that our `ngApp` directive (on the `<html>` tag) now specifies the
|
||||
`phonecatApp` module name as the module to load when bootstrapping the application.
|
||||
|
||||
@@ -123,19 +123,19 @@ view. We connected the dots between the presentation, data, and logic components
|
||||
|
||||
### Scope
|
||||
|
||||
The concept of a scope in Angular is crucial. A scope can be seen as the glue which allows the
|
||||
template, model, and controller to work together. Angular uses scopes, along with the information
|
||||
The concept of a scope in AngularJS is crucial. A scope can be seen as the glue which allows the
|
||||
template, model, and controller to work together. AngularJS uses scopes, along with the information
|
||||
contained in the template, data model, and controller, to keep models and views separate, but in
|
||||
sync. Any changes made to the model are reflected in the view; any changes that occur in the view
|
||||
are reflected in the model.
|
||||
|
||||
To learn more about Angular scopes, see the {@link ng.$rootScope.Scope angular scope documentation}.
|
||||
To learn more about AngularJS scopes, see the {@link ng.$rootScope.Scope AngularJS scope documentation}.
|
||||
|
||||
<img class="diagram" src="img/tutorial/tutorial_02.png">
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<p>
|
||||
Angular scopes prototypically inherit from their parent scope, all the way up to the *root scope*
|
||||
AngularJS scopes prototypically inherit from their parent scope, all the way up to the *root scope*
|
||||
of the application. As a result, assigning values directly on the scope makes it easy to share
|
||||
data across different parts of the page and create interactive applications.
|
||||
While this approach works for prototypes and smaller applications, it quickly leads to tight
|
||||
@@ -150,7 +150,7 @@ To learn more about Angular scopes, see the {@link ng.$rootScope.Scope angular s
|
||||
|
||||
# Testing
|
||||
|
||||
The "Angular way" of separating controller from the view, makes it easy to test code as it is being
|
||||
The "AngularJS way" of separating controller from the view, makes it easy to test code as it is being
|
||||
developed. If our controller were available on the global namespace, we could simply instantiate it
|
||||
with a mock scope object:
|
||||
|
||||
@@ -170,8 +170,8 @@ describe('PhoneListController', function() {
|
||||
|
||||
The test instantiates `PhoneListController` and verifies that the phones array property on the
|
||||
scope contains three records. This example demonstrates how easy it is to create a unit test for
|
||||
code in Angular. Since testing is such a critical part of software development, we make it easy to
|
||||
create tests in Angular so that developers are encouraged to write them.
|
||||
code in AngularJS. Since testing is such a critical part of software development, we make it easy to
|
||||
create tests in AngularJS so that developers are encouraged to write them.
|
||||
|
||||
|
||||
## Testing non-global Controllers
|
||||
@@ -179,7 +179,7 @@ create tests in Angular so that developers are encouraged to write them.
|
||||
In practice, you will not want to have your controller functions in the global namespace. Instead,
|
||||
you can see that we have registered it via a constructor function on the `phonecatApp` module.
|
||||
|
||||
In this case Angular provides a service, `$controller`, which will retrieve your controller by name.
|
||||
In this case AngularJS provides a service, `$controller`, which will retrieve your controller by name.
|
||||
Here is the same test using `$controller`:
|
||||
|
||||
<br />
|
||||
@@ -200,8 +200,8 @@ describe('PhoneListController', function() {
|
||||
});
|
||||
```
|
||||
|
||||
* Before each test we tell Angular to load the `phonecatApp` module.
|
||||
* We ask Angular to `inject` the `$controller` service into our test function.
|
||||
* Before each test we tell AngularJS to load the `phonecatApp` module.
|
||||
* We ask AngularJS to `inject` the `$controller` service into our test function.
|
||||
* We use `$controller` to create an instance of the `PhoneListController`.
|
||||
* With this instance, we verify that the phones array property on the scope contains three records.
|
||||
|
||||
@@ -224,9 +224,9 @@ describe('PhoneListController', function() {
|
||||
|
||||
## Writing and Running Tests
|
||||
|
||||
Many Angular developers prefer the syntax of
|
||||
Many AngularJS developers prefer the syntax of
|
||||
[Jasmine's Behavior-Driven Development (BDD) framework][jasmine-home], when writing tests. Although
|
||||
Angular does not require you to use Jasmine, we wrote all of the tests in this tutorial in Jasmine
|
||||
AngularJS does not require you to use Jasmine, we wrote all of the tests in this tutorial in Jasmine
|
||||
v2.4. You can learn about Jasmine on the [Jasmine home page][jasmine-home] and at the
|
||||
[Jasmine docs][jasmine-docs].
|
||||
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
|
||||
In the previous step, we saw how a controller and a template worked together to convert a static
|
||||
HTML page into a dynamic view. This is a very common pattern in Single-Page Applications in general
|
||||
(and Angular applications in particular):
|
||||
(and AngularJS applications in particular):
|
||||
|
||||
* Instead of creating a static HTML page on the server, the client-side code "takes over" and
|
||||
interacts dynamically with the view, updating it instantly to reflect changes in model data or
|
||||
state, usually as a result of user interaction (we'll see an example shortly in
|
||||
{@link step_05 step 5}).
|
||||
|
||||
The **template** (the part of the view containing the bindings and presentation logic) acts as a
|
||||
The **template** (the part of the view containing the bindings and presentation logic) acts as a
|
||||
blueprint for how our data should be organized and presented to the user.
|
||||
The **controller** provides the context in which the bindings are evaluated and applies behavior
|
||||
and logic to our template.
|
||||
@@ -39,22 +39,22 @@ There are still a couple of areas we can do better:
|
||||
|
||||
## Components to the rescue!
|
||||
|
||||
Since this combination (template + controller) is such a common and recurring pattern, Angular
|
||||
Since this combination (template + controller) is such a common and recurring pattern, AngularJS
|
||||
provides an easy and concise way to combine them together into reusable and isolated entities,
|
||||
known as _components_.
|
||||
Additionally, Angular will create a so called _isolate scope_ for each instance of our component,
|
||||
Additionally, AngularJS will create a so called _isolate scope_ for each instance of our component,
|
||||
which means no prototypal inheritance and no risk of our component affecting other parts of the
|
||||
application or vice versa.
|
||||
|
||||
<div class="alert alert-info">
|
||||
<p>
|
||||
Since this is an introductory tutorial, we are not going to dive deep into all features provided
|
||||
by Angular **components**. You can read more about components and their usage patterns in the
|
||||
by AngularJS **components**. You can read more about components and their usage patterns in the
|
||||
[Components](guide/component) section of the Developer Guide.
|
||||
</p>
|
||||
<p>
|
||||
In fact, one could think of components as an opinionated and stripped-down version of their more
|
||||
complex and verbose (but powerful) siblings, **directives**, which are Angular's way of teaching
|
||||
complex and verbose (but powerful) siblings, **directives**, which are AngularJS's way of teaching
|
||||
HTML new tricks. You can read all about them in the [Directives](guide/directive) section of the
|
||||
Developer Guide.
|
||||
</p>
|
||||
@@ -65,7 +65,7 @@ application or vice versa.
|
||||
</div>
|
||||
|
||||
To create a component, we use the {@link angular.Module#component .component()} method of an
|
||||
{@link module Angular module}. We must provide the name of the component and the Component
|
||||
{@link module AngularJS module}. We must provide the name of the component and the Component
|
||||
Definition Object (CDO for short).
|
||||
|
||||
Remember that (since components are also directives) the name of the component is in `camelCase`
|
||||
@@ -73,7 +73,7 @@ Remember that (since components are also directives) the name of the component i
|
||||
referring to it in our HTML. (See [here][case-styles] for a description of different case styles.)
|
||||
|
||||
In its simplest form, the CDO will just contain a template and a controller. (We can actually omit
|
||||
the controller and Angular will create a dummy controller for us. This is useful for simple
|
||||
the controller and AngularJS will create a dummy controller for us. This is useful for simple
|
||||
"presentational" components, that don't attach any behavior to the template.)
|
||||
|
||||
Let's see an example:
|
||||
@@ -89,7 +89,7 @@ Let's see an example:
|
||||
});
|
||||
```
|
||||
|
||||
Now, every time we include `<greet-user></greet-user>` in our view, Angular will expand it into a
|
||||
Now, every time we include `<greet-user></greet-user>` in our view, AngularJS will expand it into a
|
||||
DOM sub-tree constructed using the provided `template` and managed by an instance of the specified
|
||||
controller.
|
||||
|
||||
@@ -191,7 +191,7 @@ Voilà! The resulting output should look the same, but let's see what we have ga
|
||||
<p>**A note on file naming:**</p>
|
||||
<p>
|
||||
It is a good practice to distinguish different types of entities by suffix. In this tutorial, we
|
||||
are using the `.component` suffix for components, so the definition of a `someComponent`
|
||||
are using the `.component` suffix for components, so the definition of a `someComponent`
|
||||
component would be in a file named `some-component.component.js`.
|
||||
</p>
|
||||
</div>
|
||||
@@ -202,7 +202,7 @@ Voilà! The resulting output should look the same, but let's see what we have ga
|
||||
Although we have combined our controller with a template into a component, we still can (and should)
|
||||
unit test the controller separately, since this is where our application logic and data reside.
|
||||
|
||||
In order to retrieve and instantiate a component's controller, Angular provides the
|
||||
In order to retrieve and instantiate a component's controller, AngularJS provides the
|
||||
{@link ngMock.$componentController $componentController} service.
|
||||
|
||||
<div class="alert alert-info">
|
||||
|
||||
@@ -23,8 +23,8 @@ To that end, we will explain why and how we:
|
||||
|
||||
<div class="alert alert-info">
|
||||
We will keep it short, not going into great detail on every good practice and convention. These
|
||||
principles are explained in great detail in the [Angular Style Guide][styleguide], which also
|
||||
contains many more techniques for effectively organizing Angular codebases.
|
||||
principles are explained in great detail in the [AngularJS Style Guide][styleguide], which also
|
||||
contains many more techniques for effectively organizing AngularJS codebases.
|
||||
</div>
|
||||
|
||||
|
||||
@@ -166,7 +166,7 @@ angular.module('phonecatApp', [
|
||||
]);
|
||||
```
|
||||
|
||||
By passing `phoneList` inside the dependencies array when defining the `phonecatApp` module, Angular
|
||||
By passing `phoneList` inside the dependencies array when defining the `phonecatApp` module, AngularJS
|
||||
will make all entities registered on `phoneList` available on `phonecatApp` as well.
|
||||
|
||||
<div class="alert alert-info">
|
||||
@@ -182,7 +182,7 @@ will make all entities registered on `phoneList` available on `phonecatApp` as w
|
||||
|
||||
<div class="alert alert-warning">
|
||||
Note that files defining a module (i.e. `.module.js`) need to be included before other files that
|
||||
add features (e.g. components, controllers, services, filters) to that module.
|
||||
add features (e.g. components, controllers, services, filters) to that module.
|
||||
</div>
|
||||
|
||||
|
||||
@@ -219,7 +219,7 @@ angular.
|
||||
});
|
||||
```
|
||||
|
||||
At runtime, when Angular needs to create an instance of the `phoneList` component, it will make an
|
||||
At runtime, when AngularJS needs to create an instance of the `phoneList` component, it will make an
|
||||
HTTP request to get the template from `app/phone-list/phone-list.template.html`.
|
||||
|
||||
<div class="alert alert-info">
|
||||
@@ -231,7 +231,7 @@ HTTP request to get the template from `app/phone-list/phone-list.template.html`.
|
||||
<div class="alert alert-warning">
|
||||
<p>
|
||||
Using an external template like this, will result in more HTTP requests to the server (one for
|
||||
each external template). Although Angular takes care not to make extraneous requests (e.g.
|
||||
each external template). Although AngularJS takes care not to make extraneous requests (e.g.
|
||||
fetching the templates lazily, caching the results, etc), additional requests do have a cost
|
||||
(especially on mobile devices and data-plan connections).
|
||||
</p>
|
||||
@@ -239,7 +239,7 @@ HTTP request to get the template from `app/phone-list/phone-list.template.html`.
|
||||
Luckily, there are ways to avoid the extra costs (while still keeping your templates external).
|
||||
A detailed discussion of the subject is outside the scope of this tutorial, but you can take a
|
||||
look at the {@link ng.$templateRequest $templateRequest} and
|
||||
{@link ng.$templateCache $templateCache} services for more info on how Angular manages external
|
||||
{@link ng.$templateCache $templateCache} services for more info on how AngularJS manages external
|
||||
templates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -52,14 +52,14 @@ We made no changes to the component's controller.
|
||||
</div>
|
||||
```
|
||||
|
||||
We added a standard HTML `<input>` tag and used Angular's {@link ng.filter:filter filter} function
|
||||
We added a standard HTML `<input>` tag and used AngularJS's {@link ng.filter:filter filter} function
|
||||
to process the input for the {@link ngRepeat ngRepeat} directive.
|
||||
|
||||
By virtue of the {@link ngModel ngModel} directive, this lets a user enter search criteria and
|
||||
immediately see the effects of their search on the phone list. This new code demonstrates the
|
||||
following:
|
||||
|
||||
* Data-binding: This is one of the core features in Angular. When the page loads, Angular binds the
|
||||
* Data-binding: This is one of the core features in AngularJS. When the page loads, AngularJS binds the
|
||||
value of the input box to the data model variable specified with `ngModel` and keeps the two in
|
||||
sync.
|
||||
|
||||
@@ -120,7 +120,7 @@ describe('PhoneCat Application', function() {
|
||||
```
|
||||
|
||||
This test verifies that the search box and the repeater are correctly wired together. Notice how
|
||||
easy it is to write E2E tests in Angular. Although this example is for a simple test, it really is
|
||||
easy it is to write E2E tests in AngularJS. Although this example is for a simple test, it really is
|
||||
that easy to set up any functional, readable, E2E test.
|
||||
|
||||
|
||||
|
||||
@@ -68,12 +68,12 @@ We made the following changes to the `phone-list.template.html` template:
|
||||
input for the repeater. `orderBy` is a filter that takes an input array, copies it and reorders
|
||||
the copy which is then returned.
|
||||
|
||||
Angular creates a two way data-binding between the select element and the `$ctrl.orderProp` model.
|
||||
AngularJS creates a two way data-binding between the select element and the `$ctrl.orderProp` model.
|
||||
`$ctrl.orderProp` is then used as the input for the `orderBy` filter.
|
||||
|
||||
As we discussed in the section about data-binding and the repeater in {@link step_05 step 5},
|
||||
whenever the model changes (for example because a user changes the order with the select drop-down
|
||||
menu), Angular's data-binding will cause the view to automatically update. No bloated DOM
|
||||
menu), AngularJS's data-binding will cause the view to automatically update. No bloated DOM
|
||||
manipulation code is necessary!
|
||||
|
||||
|
||||
@@ -222,7 +222,7 @@ You can now rerun `npm run protractor` to see the tests run.
|
||||
<div></div>
|
||||
|
||||
* In the `phoneList` component's controller, remove the statement that sets the `orderProp` value
|
||||
and you'll see that Angular will temporarily add a new blank ("unknown") option to the drop-down
|
||||
and you'll see that AngularJS will temporarily add a new blank ("unknown") option to the drop-down
|
||||
list and the ordering will default to unordered/natural order.
|
||||
|
||||
* Add a `{{$ctrl.orderProp}}` binding into the `phone-list.template.html` template to display its
|
||||
@@ -235,7 +235,7 @@ You can now rerun `npm run protractor` to see the tests run.
|
||||
# Summary
|
||||
|
||||
Now that you have added list sorting and tested the application, go to {@link step_07 step 7} to
|
||||
learn about Angular services and how Angular uses dependency injection.
|
||||
learn about AngularJS services and how AngularJS uses dependency injection.
|
||||
|
||||
|
||||
<ul doc-tutorial-nav="6"></ul>
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
|
||||
Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
|
||||
from our server using one of Angular's built-in {@link guide/services services} called
|
||||
{@link ng.$http $http}. We will use Angular's {@link guide/di dependency injection (DI)} to provide
|
||||
from our server using one of AngularJS's built-in {@link guide/services services} called
|
||||
{@link ng.$http $http}. We will use AngularJS's {@link guide/di dependency injection (DI)} to provide
|
||||
the service to the `phoneList` component's controller.
|
||||
|
||||
* There is now a list of 20 phones, loaded from the server.
|
||||
@@ -40,12 +40,12 @@ Following is a sample of the file:
|
||||
|
||||
## Component Controller
|
||||
|
||||
We will use Angular's {@link ng.$http $http} service in our controller for making an HTTP request to
|
||||
We will use AngularJS's {@link ng.$http $http} service in our controller for making an HTTP request to
|
||||
our web server to fetch the data in the `app/phones/phones.json` file. `$http` is just one of
|
||||
several built-in {@link guide/services Angular services} that handle common operations in web
|
||||
applications. Angular injects these services for you, right where you need them.
|
||||
several built-in {@link guide/services AngularJS services} that handle common operations in web
|
||||
applications. AngularJS injects these services for you, right where you need them.
|
||||
|
||||
Services are managed by Angular's {@link guide/di DI subsystem}. Dependency injection helps to make
|
||||
Services are managed by AngularJS's {@link guide/di DI subsystem}. Dependency injection helps to make
|
||||
your web applications both well-structured (e.g. separate entities for presentation, data, and
|
||||
control) and loosely coupled (dependencies between entities are not resolved by the entities
|
||||
themselves, but by the DI subsystem). As a result, applications are easier to test as well.
|
||||
@@ -77,21 +77,21 @@ in this tutorial.)
|
||||
|
||||
The `$http` service returns a {@link ng.$q promise object}, which has a `then()` method. We call
|
||||
this method to handle the asynchronous response and assign the phone data to the controller, as a
|
||||
property called `phones`. Notice that Angular detected the JSON response and parsed it for us into
|
||||
property called `phones`. Notice that AngularJS detected the JSON response and parsed it for us into
|
||||
the `data` property of the `response` object passed to our callback!
|
||||
|
||||
Since we are making the assignment of the `phones` property in a callback function, where the `this`
|
||||
value is not defined, we also introduce a local variable called `self` that points back to the
|
||||
controller instance.
|
||||
|
||||
To use a service in Angular, you simply declare the names of the dependencies you need as arguments
|
||||
To use a service in AngularJS, you simply declare the names of the dependencies you need as arguments
|
||||
to the controller's constructor function, as follows:
|
||||
|
||||
```js
|
||||
function PhoneListController($http) {...}
|
||||
```
|
||||
|
||||
Angular's dependency injector provides services to your controller, when the controller is being
|
||||
AngularJS's dependency injector provides services to your controller, when the controller is being
|
||||
constructed. The dependency injector also takes care of creating any transitive dependencies the
|
||||
service may have (services often depend upon other services).
|
||||
|
||||
@@ -104,10 +104,10 @@ dependencies.
|
||||
### `$`-prefix Naming Convention
|
||||
|
||||
You can create your own services, and in fact we will do exactly that a few steps down the road. As
|
||||
a naming convention, Angular's built-in services, Scope methods and a few other Angular APIs have a
|
||||
a naming convention, AngularJS's built-in services, Scope methods and a few other AngularJS APIs have a
|
||||
`$` prefix in front of the name.
|
||||
|
||||
The `$` prefix is there to namespace Angular-provided services. To prevent collisions it's best to
|
||||
The `$` prefix is there to namespace AngularJS-provided services. To prevent collisions it's best to
|
||||
avoid naming your services and models anything that begins with a `$`.
|
||||
|
||||
If you inspect a Scope, you may also notice some properties that begin with `$$`. These properties
|
||||
@@ -116,7 +116,7 @@ are considered private, and should not be accessed or modified.
|
||||
|
||||
### A Note on Minification
|
||||
|
||||
Since Angular infers the controller's dependencies from the names of arguments to the controller's
|
||||
Since AngularJS infers the controller's dependencies from the names of arguments to the controller's
|
||||
constructor function, if you were to [minify][minification] the JavaScript code for the
|
||||
`PhoneListController` controller, all of its function arguments would be minified as well, and the
|
||||
dependency injector would not be able to identify services correctly.
|
||||
@@ -145,7 +145,7 @@ as strings, which will not get minified. There are two ways to provide these inj
|
||||
.component('phoneList', {..., controller: ['$http', PhoneListController]});
|
||||
```
|
||||
|
||||
Both of these methods work with any function that can be injected by Angular, so it's up to your
|
||||
Both of these methods work with any function that can be injected by AngularJS, so it's up to your
|
||||
project's style guide to decide which one you use.
|
||||
|
||||
When using the second method, it is common to provide the constructor function inline, when
|
||||
@@ -184,7 +184,7 @@ let's add the annotations to our `PhoneListController`:
|
||||
|
||||
Because we started using dependency injection and our controller has dependencies, constructing the
|
||||
controller in our tests is a bit more complicated. We could use the `new` operator and provide the
|
||||
constructor with some kind of fake `$http` implementation. However, Angular provides a mock `$http`
|
||||
constructor with some kind of fake `$http` implementation. However, AngularJS provides a mock `$http`
|
||||
service that we can use in unit tests. We configure "fake" responses to server requests by calling
|
||||
methods on a service called `$httpBackend`:
|
||||
|
||||
@@ -249,7 +249,7 @@ request from the controller. To do this we:
|
||||
incoming HTTP request and tell it what to respond with. Note that the responses are not returned
|
||||
until we call the `$httpBackend.flush()` method.
|
||||
|
||||
Now we will make assertions to verify that the `phones` property doesn't exist on the controller
|
||||
Now we will make assertions to verify that the `phones` property doesn't exist on the controller
|
||||
before the response is received:
|
||||
|
||||
```js
|
||||
@@ -301,7 +301,7 @@ Chrome 49.0: Executed 2 of 2 SUCCESS (0.133 secs / 0.097 secs)
|
||||
|
||||
# Summary
|
||||
|
||||
Now that you have learned how easy it is to use Angular services (thanks to Angular's dependency
|
||||
Now that you have learned how easy it is to use AngularJS services (thanks to AngularJS's dependency
|
||||
injection), go to {@link step_08 step 8}, where you will add some thumbnail images of phones and
|
||||
some links.
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@ now-familiar double-curly brace binding in the `href` attribute values. In step
|
||||
the element attribute.
|
||||
|
||||
We also added phone images next to each record using an image tag with the {@link ngSrc ngSrc}
|
||||
directive. That directive prevents the browser from treating the Angular `{{ expression }}` markup
|
||||
directive. That directive prevents the browser from treating the AngularJS `{{ expression }}` markup
|
||||
literally, and initiating a request to an invalid URL (`http://localhost:8000/{{phone.imageUrl}}`),
|
||||
which it would have done if we had only specified an attribute binding in a regular `src` attribute
|
||||
(`<img src="{{phone.imageUrl}}">`). Using the `ngSrc` directive, prevents the browser from making an
|
||||
@@ -104,14 +104,14 @@ You can now rerun `npm run protractor` to see the tests run.
|
||||
making an extraneous request to `%7B%7Bphone.imageUrl%7D%7D` (or `{{phone.imageUrl}}`).
|
||||
|
||||
The issue here is that the browser will fire a request for that invalid image address as soon as
|
||||
it hits the `<img>` tag, which is before Angular has a chance to evaluate the expression and
|
||||
it hits the `<img>` tag, which is before AngularJS has a chance to evaluate the expression and
|
||||
inject the valid address.
|
||||
|
||||
|
||||
# Summary
|
||||
|
||||
Now that you have added phone images and links, go to {@link step_09 step 9} to learn about Angular
|
||||
layout templates and how Angular makes it easy to create applications that have multiple views.
|
||||
Now that you have added phone images and links, go to {@link step_09 step 9} to learn about AngularJS
|
||||
layout templates and how AngularJS makes it easy to create applications that have multiple views.
|
||||
|
||||
|
||||
<ul doc-tutorial-nav="8"></ul>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
|
||||
In this step, you will learn how to create a layout template and how to build an application that
|
||||
has multiple views by adding routing, using an Angular module called {@link ngRoute ngRoute}.
|
||||
has multiple views by adding routing, using an AngularJS module called {@link ngRoute ngRoute}.
|
||||
|
||||
* When you now navigate to `/index.html`, you are redirected to `/index.html#!/phones` and the phone
|
||||
list appears in the browser.
|
||||
@@ -20,8 +20,8 @@ has multiple views by adding routing, using an Angular module called {@link ngRo
|
||||
|
||||
## Dependencies
|
||||
|
||||
The routing functionality added in this step is provided by Angular in the `ngRoute` module, which
|
||||
is distributed separately from the core Angular framework.
|
||||
The routing functionality added in this step is provided by AngularJS in the `ngRoute` module, which
|
||||
is distributed separately from the core AngularJS framework.
|
||||
|
||||
Since we are using [Bower][bower] to install client-side dependencies, this step updates the
|
||||
`bower.json` configuration file to include the new dependency:
|
||||
@@ -47,7 +47,7 @@ Since we are using [Bower][bower] to install client-side dependencies, this step
|
||||
```
|
||||
|
||||
The new dependency `"angular-route": "1.5.x"` tells bower to install a version of the angular-route
|
||||
module that is compatible with version 1.5.x of Angular. We must tell bower to download and install
|
||||
module that is compatible with version 1.5.x of AngularJS. We must tell bower to download and install
|
||||
this dependency.
|
||||
|
||||
```
|
||||
@@ -60,7 +60,7 @@ npm install
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
**Warning:** If a new version of Angular has been released since you last ran `npm install`, then
|
||||
**Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then
|
||||
you may have a problem with the `bower install` due to a conflict between the versions of
|
||||
angular.js that need to be installed. If you run into this issue, simply delete your
|
||||
`app/bower_components` directory and then run `npm install`.
|
||||
@@ -79,7 +79,7 @@ This is a template that is common for all views in our application. Other "parti
|
||||
then included into this layout template depending on the current "route" — the view that is
|
||||
currently displayed to the user.
|
||||
|
||||
Application routes in Angular are declared via the {@link ngRoute.$routeProvider $routeProvider},
|
||||
Application routes in AngularJS are declared via the {@link ngRoute.$routeProvider $routeProvider},
|
||||
which is the provider of the {@link ngRoute.$route $route} service. This service makes it easy to
|
||||
wire together controllers, view templates, and the current URL location in the browser. Using this
|
||||
feature, we can implement [deep linking][deep-linking], which lets us utilize the browser's history
|
||||
@@ -105,7 +105,7 @@ feature, we can implement [deep linking][deep-linking], which lets us utilize th
|
||||
As you {@link step_07 noticed}, {@link guide/di dependency injection} (DI) is at the core of
|
||||
AngularJS, so it's important for you to understand a thing or two about how it works.
|
||||
|
||||
When the application bootstraps, Angular creates an injector that will be used to find and inject
|
||||
When the application bootstraps, AngularJS creates an injector that will be used to find and inject
|
||||
all of the services that are required by your application. The injector itself doesn't know anything
|
||||
about what the `$http` or `$route` services do. In fact, the injector doesn't even know about the
|
||||
existence of these services, unless it is configured with proper module definitions.
|
||||
@@ -126,12 +126,12 @@ service, the `$routeProvider` exposes APIs that allow you to define routes for y
|
||||
`$routeProvider` into `PhoneListController` at runtime.
|
||||
</div>
|
||||
|
||||
Angular modules solve the problem of removing global variables from the application and provide a
|
||||
way of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try
|
||||
AngularJS modules solve the problem of removing global variables from the application and provide a
|
||||
way of configuring the injector. As opposed to AMD or require.js modules, AngularJS modules don't try
|
||||
to solve the problem of script load ordering or lazy script fetching. These goals are totally
|
||||
independent and both module systems can live side-by-side and fulfill their goals.
|
||||
|
||||
To deepen your understanding on Angular's DI, see [Understanding Dependency Injection][wiki-di].
|
||||
To deepen your understanding on AngularJS's DI, see [Understanding Dependency Injection][wiki-di].
|
||||
|
||||
|
||||
## Template
|
||||
@@ -164,7 +164,7 @@ into the layout template. This makes it a perfect fit for our `index.html` templ
|
||||
We have added four new `<script>` tags in our `index.html` file to load some extra JavaScript files
|
||||
into our application:
|
||||
|
||||
* `angular-route.js`: Defines the Angular `ngRoute` module, which provides us with routing.
|
||||
* `angular-route.js`: Defines the AngularJS `ngRoute` module, which provides us with routing.
|
||||
* `app.config.js`: Configures the providers available to our main module (see
|
||||
[below](tutorial/step_09#configuring-a-module)).
|
||||
* `phone-detail.module.js`: Defines a new module containing a `phoneDetail` component.
|
||||
@@ -241,7 +241,7 @@ application routes.
|
||||
Our routes are defined as follows:
|
||||
|
||||
* `when('/phones')`: Determines the view that will be shown, when the URL hash fragment is
|
||||
`/phones`. According to the specified template, Angular will create an instance of the `phoneList`
|
||||
`/phones`. According to the specified template, AngularJS will create an instance of the `phoneList`
|
||||
component to manage the view. Note that this is the same markup that we used to have in the
|
||||
`index.html` file.
|
||||
|
||||
@@ -328,7 +328,7 @@ The takeaway here is:
|
||||
from a parent module (because that parent module might not be there some day).
|
||||
|
||||
<div class="alert alert-success">
|
||||
Declaring the same dependency in multiple modules does not incur extra "cost", because Angular
|
||||
Declaring the same dependency in multiple modules does not incur extra "cost", because AngularJS
|
||||
will still load each dependency once. For more info on modules and their dependencies take a look
|
||||
at the [Modules](guide/module) section of the Developer Guide.
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,7 @@ the current route by the `$route` service.
|
||||
## Component Template
|
||||
|
||||
The inline, TBD placeholder template has been replaced with a full blown external template,
|
||||
including lists and bindings that comprise the phone details. Note how we use the Angular
|
||||
including lists and bindings that comprise the phone details. Note how we use the AngularJS
|
||||
`{{expression}}` markup and `ngRepeat` to project phone data from our model into the view.
|
||||
|
||||
<br />
|
||||
|
||||
@@ -81,7 +81,7 @@ include them in our layout template.
|
||||
...
|
||||
```
|
||||
|
||||
The syntax for using filters in Angular templates is as follows:
|
||||
The syntax for using filters in AngularJS templates is as follows:
|
||||
|
||||
```
|
||||
{{expression | filter}}
|
||||
@@ -150,7 +150,7 @@ Chrome 49.0: Executed 4 of 4 SUCCESS (0.091 secs / 0.075 secs)
|
||||
|
||||
<div></div>
|
||||
|
||||
* Let's experiment with some of the {@link api/ng/filter built-in Angular filters}.
|
||||
* Let's experiment with some of the {@link api/ng/filter built-in AngularJS filters}.
|
||||
Add the following bindings to `index.html`:
|
||||
|
||||
* `{{'lower cap string' | uppercase}}`
|
||||
@@ -170,7 +170,7 @@ Chrome 49.0: Executed 4 of 4 SUCCESS (0.091 secs / 0.075 secs)
|
||||
# Summary
|
||||
|
||||
Now that we have learned how to write and test a custom filter, let's go to {@link step_12 step 12}
|
||||
to learn how we can use Angular to enhance the phone details page further.
|
||||
to learn how we can use AngularJS to enhance the phone details page further.
|
||||
|
||||
|
||||
<ul doc-tutorial-nav="11"></ul>
|
||||
|
||||
@@ -10,7 +10,7 @@ In this step, you will add a clickable phone image swapper to the phone details
|
||||
|
||||
* The phone details view displays one large image of the current phone and several smaller thumbnail
|
||||
images. It would be great if we could replace the large image with any of the thumbnails just by
|
||||
clicking on the desired thumbnail image. Let's have a look at how we can do this with Angular.
|
||||
clicking on the desired thumbnail image. Let's have a look at how we can do this with AngularJS.
|
||||
|
||||
|
||||
<div doc-tutorial-reset="12"></div>
|
||||
@@ -155,7 +155,7 @@ Our unit tests should now be passing again.
|
||||
|
||||
<div></div>
|
||||
|
||||
* Similar to the `ngClick` directive, which binds an Angular expression to the `click` event, there
|
||||
* Similar to the `ngClick` directive, which binds an AngularJS expression to the `click` event, there
|
||||
are built-in directives for all native events, such as `dblclick`, `focus`/`blur`, mouse and key
|
||||
events, etc.
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@ In this step, we will change the way our application fetches data.
|
||||
|
||||
## Dependencies
|
||||
|
||||
The RESTful functionality is provided by Angular in the {@link ngResource ngResource} module, which
|
||||
is distributed separately from the core Angular framework.
|
||||
The RESTful functionality is provided by AngularJS in the {@link ngResource ngResource} module, which
|
||||
is distributed separately from the core AngularJS framework.
|
||||
|
||||
Since we are using [Bower][bower] to install client-side dependencies, this step updates the
|
||||
`bower.json` configuration file to include the new dependency:
|
||||
@@ -46,7 +46,7 @@ Since we are using [Bower][bower] to install client-side dependencies, this step
|
||||
```
|
||||
|
||||
The new dependency `"angular-resource": "1.5.x"` tells bower to install a version of the
|
||||
angular-resource module that is compatible with version 1.5.x of Angular. We must tell bower to
|
||||
angular-resource module that is compatible with version 1.5.x of AngularJS. We must tell bower to
|
||||
download and install this dependency.
|
||||
|
||||
```
|
||||
@@ -59,7 +59,7 @@ npm install
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
**Warning:** If a new version of Angular has been released since you last ran `npm install`, then
|
||||
**Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then
|
||||
you may have a problem with the `bower install` due to a conflict between the versions of
|
||||
angular.js that need to be installed. If you run into this issue, simply delete your
|
||||
`app/bower_components` directory and then run `npm install`.
|
||||
@@ -141,7 +141,7 @@ need to load the `angular-resource.js` file, which contains the `ngResource` mod
|
||||
## Component Controllers
|
||||
|
||||
We can now simplify our component controllers (`PhoneListController` and `PhoneDetailController`) by
|
||||
factoring out the lower-level `$http` service, replacing it with the new `Phone` service. Angular's
|
||||
factoring out the lower-level `$http` service, replacing it with the new `Phone` service. AngularJS's
|
||||
`$resource` service is easier to use than `$http` for interacting with data sources exposed as
|
||||
RESTful resources. It is also easier now to understand what the code in our controllers is doing.
|
||||
|
||||
@@ -222,7 +222,7 @@ An important thing to notice in the code above is that we don't pass any callbac
|
||||
invoking methods of our `Phone` service. Although it looks as if the results were returned
|
||||
synchronously, that is not the case at all. What is returned synchronously is a "future" — an
|
||||
object, which will be filled with data, when the XHR response is received. Because of the
|
||||
data-binding in Angular, we can use this future and bind it to our template. Then, when the data
|
||||
data-binding in AngularJS, we can use this future and bind it to our template. Then, when the data
|
||||
arrives, the view will be updated automatically.
|
||||
|
||||
Sometimes, relying on the future object and data-binding alone is not sufficient to do everything
|
||||
@@ -251,13 +251,13 @@ expected "future" objects/arrays.
|
||||
|
||||
The {@link ngResource.$resource $resource} service augments the response object with extra methods
|
||||
— e.g. for updating and deleting the resource — and properties (some of which are only
|
||||
meant to be accessed by Angular). If we were to use Jasmine's standard `.toEqual()` matcher, our
|
||||
meant to be accessed by AngularJS). If we were to use Jasmine's standard `.toEqual()` matcher, our
|
||||
tests would fail, because the test values would not match the responses exactly.
|
||||
|
||||
To solve the problem, we instruct Jasmine to use a [custom equality tester][jasmine-equality] for
|
||||
comparing objects. We specify {@link angular.equals angular.equals} as our equality tester, which
|
||||
ignores functions and `$`-prefixed properties, such as those added by the `$resource` service.<br />
|
||||
(Remember that Angular uses the `$` prefix for its proprietary API.)
|
||||
(Remember that AngularJS uses the `$` prefix for its proprietary API.)
|
||||
|
||||
<br />
|
||||
**`app/core/phone/phone.service.spec.js`:**
|
||||
|
||||
@@ -21,8 +21,8 @@ the template code we created earlier.
|
||||
|
||||
## Dependencies
|
||||
|
||||
The animation functionality is provided by Angular in the `ngAnimate` module, which is distributed
|
||||
separately from the core Angular framework. In addition we will use [jQuery][jquery] in this project
|
||||
The animation functionality is provided by AngularJS in the `ngAnimate` module, which is distributed
|
||||
separately from the core AngularJS framework. In addition we will use [jQuery][jquery] in this project
|
||||
to do extra JavaScript animations.
|
||||
|
||||
Since we are using [Bower][bower] to install client-side dependencies, this step updates the
|
||||
@@ -52,9 +52,9 @@ Since we are using [Bower][bower] to install client-side dependencies, this step
|
||||
```
|
||||
|
||||
* `"angular-animate": "1.5.x"` tells bower to install a version of the angular-animate module that
|
||||
is compatible with version 1.5.x of Angular.
|
||||
is compatible with version 1.5.x of AngularJS.
|
||||
* `"jquery": "3.2.x"` tells bower to install the latest patch release of the 3.2 version of jQuery.
|
||||
Note that this is not an Angular library; it is the standard jQuery library. We can use bower to
|
||||
Note that this is not an AngularJS library; it is the standard jQuery library. We can use bower to
|
||||
install a wide range of 3rd party libraries.
|
||||
|
||||
Now, we must tell bower to download and install these dependencies.
|
||||
@@ -69,7 +69,7 @@ npm install
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
**Warning:** If a new version of Angular has been released since you last ran `npm install`, then
|
||||
**Warning:** If a new version of AngularJS has been released since you last ran `npm install`, then
|
||||
you may have a problem with the `bower install` due to a conflict between the versions of
|
||||
angular.js that need to be installed. If you run into this issue, simply delete your
|
||||
`app/bower_components` directory and then run `npm install`.
|
||||
@@ -115,9 +115,9 @@ code necessary to make your application "animation aware".
|
||||
```
|
||||
|
||||
<div class="alert alert-error">
|
||||
**Important:** Be sure to use jQuery version 2.1 or newer, when using Angular 1.5; jQuery 1.x is
|
||||
**Important:** Be sure to use jQuery version 2.1 or newer, when using AngularJS 1.5 or newer; jQuery 1.x is
|
||||
not officially supported.
|
||||
In order for Angular to detect jQuery and take advantage of it, make sure to include `jquery.js`
|
||||
In order for AngularJS to detect jQuery and take advantage of it, make sure to include `jquery.js`
|
||||
before `angular.js`.
|
||||
</div>
|
||||
|
||||
@@ -481,7 +481,7 @@ In this case, we are interested in a class getting added to/removed from a `.pho
|
||||
specify callbacks for the `addClass` and `removeClass` events. When the `selected` class is added to
|
||||
an element (via the `ngClass` directive), the `addClass` JavaScript callback will be executed with
|
||||
`element` passed in as a parameter. The last parameter passed in is the `done` callback function. We
|
||||
call `done()` to let Angular know that our custom JavaScript animation has ended. The `removeClass`
|
||||
call `done()` to let AngularJS know that our custom JavaScript animation has ended. The `removeClass`
|
||||
callback works the same way, but instead gets executed when a class is removed.
|
||||
|
||||
Note that we are using [jQuery][jquery]'s `animate()` helper to implement the animation. jQuery
|
||||
@@ -494,7 +494,7 @@ this is achieved using `element.css()` and `element.animate()`. As a result the
|
||||
positioned with an offset of **500px** and then both elements — the previous and the new
|
||||
— are animated together by shifting each one up by **500px**. The outcome is a conveyor-belt
|
||||
like animation. After the `animate()` function has completed the animation, it calls `done` to
|
||||
notify Angular.
|
||||
notify AngularJS.
|
||||
|
||||
You may have noticed that each animation callback returns a function. This is an **optional**
|
||||
function, which (if provided) will be called when the animation ends, either because it ran to
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user