kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-23 11:37:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): new module loader

Browse Source
This commit is contained in:
Misko Hevery
2012-01-06 18:10:47 -08:00
parent afd25446d2
commit 5143e7bf06
211 changed files with 1072 additions and 1263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/content/api/angular.module.ngdoc
View File

@@ -1,54 +0,0 @@
@ngdoc overview
@name angular.module
@description
The angular.module namespace is a global place for registering angular modules. All modules
(angular core or 3rd party) that should be available to an application must be registered in this
namespace.
# Module
A module is a function that is used to register new service providers and configure existing
providers. Once a provider is registered, {@link angular.module.AUTO.$injector $injector} will use
it to ask for a service instance when it is resolving a dependency for the first time.
<pre>
// Declare the module configuration function.
// The function arguments are fully injectable so that the module function
// can create new providers or configure existing ones.
function MyModule($provide, $locationProvider){
// see $provide for more information.
$provide.value('appName', 'MyCoolApp');
// Configure existing providers
$locationProvider.hashPrefix = '!';
};
</pre>
See: {@link angular.module.AUTO.$provide $provide}, {@link angular.module.ng.$locationProvider $locationProvider}.
# Registering Module Function
In your JavaScript file:
<pre>
// Create the angular.module namespace if one does not exist
// This allows the module code to be loaded before angular.js code.
if (!window.angular) window.angular = {};
if (!angular.module) angular.module = {};
angular.module.MyModule = function(){
// add configuration code here.
};
</pre>
Then you can refer to your module like this:
<pre>
var injector = angular.injector('ng', 'MyModule')
</pre>
Or
<pre>
var injector = angular.injector('ng', angular.module.MyModule)
</pre>

89
docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
View File

@@ -2,88 +2,33 @@
@name Developer Guide: Initializing Angular: Automatic Initialization
@description
Angular initializes automatically when you load the angular script into your page, specifying
angular's `ng:autobind` attribute with no arguments:
Angular initializes automatically when you load the angular script into your page that contains an element
with `ng:app` directive:
<script src="angular.js" ng:autobind>
<html ng:app>
<head>
<script src="angular.js"></script>
</head>
<body>
I can add: {{ 1+2 }}.
</body>
</html>
From a high-level view, this is what happens during angular's automatic initialization process:
1. The browser loads the page, and then runs the angular script.
1. The browser loads the page, and then runs the angular script. Angular waits for the
`DOMContentLoaded` (or 'Load') event to attempt to bootstrap.
The `ng:autobind` attribute tells angular to compile and manage the whole HTML document. The
compilation phase is initiated in the page's `onLoad()` handler. Angular doesn't begin processing
the page until after the page load is complete.
2. Angular finds the root of the HTML document and creates the global variable `angular` in the
global namespace. Everything that angular subsequently creates is bound to fields in this global
object.
3. Angular walks the DOM looking for angular widgets, directives, and markup (such as `ng:init` or
`ng:repeat`). As angular encounters these, it creates child scopes as necessary and attaches them
to the DOM, registers listeners on those scopes, associates any controller functions with their
data and their part of the view, and ultimately constructs a runnable application. The resulting
app features two-way data-binding and a nice separation between data, presentation, and business
logic.
4. For the duration of the application session (while the page is loaded), angular monitors the
state of the application, and updates the view and the data model whenever the state of either one
changes.
For details on how the compiler works, see {@link dev_guide.compiler Angular HTML Compiler}.
2. Angular looks for the `ng:app` directive. If found it then proceeds to compile the DOM element and its children.
Optionally the `ng:app` may specify a {@link api/angular.module module} to load before the compilation. For details on
how the compiler works, see {@link dev_guide.compiler Angular HTML Compiler}.
## Initialization Options
The reason why `ng:autobind` exists is because angular should not assume that the entire HTML
The reason why `ng:app` exists is because angular should not assume that the entire HTML
document should be processed just because the `angular.js` script is included. In order to compile
only a part of the document, specify the ID of the element you want to use for angular's root
element as the value of the `ng:autobind` attribute:
ng:autobind="angularContent"
## Auto-bootstrap with `#autobind`
In some rare cases you can't define the `ng:` prefix before the script tag's attribute (for
example, in some CMS systems). In those situations it is possible to auto-bootstrap angular by
appending `#autobind` to the `<script src=...>` URL, like in this snippet:
<pre>
<!doctype html>
<html>
<head>
<script src="http://code.angularjs.org/angular.js#autobind"></script>
</head>
<body>
<div xmlns:ng="http://angularjs.org">
Hello {{'world'}}!
</div>
</body>
</html>
</pre>
As with `ng:autobind`, you can specify an element id that should be exclusively targeted for
compilation as the value of the `#autobind`, for example: `#autobind=angularContent`.
If angular.js file is being combined with other scripts into a single script file, then all of the
config options above apply to this processed script as well. That means if the contents of
`angular.js` were appended to `all-my-scripts.js`, then the app can be bootstrapped as:
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<script src="http://myapp.com/all-my-scripts.js" ng:autobind></script>
</head>
<body>
<div>
Hello {{'world'}}!
</div>
</body>
</html>
</pre>
only a part of the document set the `ng:app` on the root element of this portion.
## Global Angular Object

2
docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc
View File

@@ -7,7 +7,7 @@ angular, but advanced users who want more control over the initialization proces
the manual bootstrapping method instead.
The best way to get started with manual bootstrapping is to look at the what happens when you use
{@link api/angular.directive.ng:autobind ng:autobind}, by showing each step of the process
{@link api/angular.directive.ng:app ng:app}, by showing each step of the process
explicitly.
<pre>

8
docs/content/guide/dev_guide.bootstrap.ngdoc
View File

@@ -7,20 +7,20 @@ angular should process and manage the page. To initialize angular you do the fol
* Specify the angular namespace in the `<html>` page
* Choose which flavor of angular script to load (debug or production)
* Specify whether or not angular should process and manage the page automatically (`ng:autobind`)
* Specify whether or not angular should process and manage the page automatically (`ng:app`)
The simplest way to initialize angular is to load the angular script and tell angular to compile
and manage the whole page. You do this as follows:
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng:app>
<head>
...
</head>
<body>
...
<script src="angular.js" ng:autobind>
<script src="angular.js">
</body>
</pre>
@@ -31,7 +31,7 @@ and manage the whole page. You do this as follows:
You need to declare the angular namespace declaration in the following cases:
* For all types of browser if you are using XHTML.
* For all browsers if you are using XHTML.
* For Internet Explorer older than version 9 (because older versions of IE do not render widgets
properly for either HTML or XHTML).

3
docs/content/guide/dev_guide.compiler.understanding_compiler.ngdoc
View File

@@ -6,8 +6,7 @@ Every {@link api/angular.widget widget}, {@link api/angular.directive directive}
dev_guide.compiler.markup markup} is defined with a compile function, which the angular compiler
executes on each widget or directive it encounters. The compile function optionally returns a link
function. This compilation process happens automatically when the page is loaded when you specify
`ng:autobind` in the script tag from which you load the angular script file. (See {@link
dev_guide.bootstrap Initializing Angular}.)
`ng:app` on the root element of the application. (See {@link dev_guide.bootstrap Initializing Angular}.)
The compile and link functions are related as follows:

2
docs/content/guide/dev_guide.di.understanding_di.ngdoc
View File

@@ -26,7 +26,7 @@ events:
In the illustration above, the dependency injection sequence proceeds as follows:
1. Service factory functions are registered with angular's service factory repository.
2. `ng:autobind` triggers angular's bootstrap sequence, during which angular compiles the template,
2. `ng:app` triggers angular's bootstrap sequence, during which angular compiles the template,
creates the root scope, and creates the dependency injector.
3. The `ng:controller` directive implicitly creates a new child scope, augmented by the application
of the `PhoneListCtrl` controller function.

4
docs/content/guide/dev_guide.di.using_di_controllers.ngdoc
View File

@@ -21,8 +21,8 @@ controller from the HTML template, as follows:
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng:controller="MyController">
<script src="http://code.angularjs.org/angular.min.js" ng:autobind></script>
<html xmlns:ng="http://angularjs.org" ng:controller="MyController" ng:app>
<script src="http://code.angularjs.org/angular.min.js"></script>
<body>
...
</body>

14
docs/content/guide/dev_guide.forms.ngdoc
View File

@@ -516,9 +516,8 @@ function LoginController() {
}
describe('LoginController', function() {
it('should disable login button when form is invalid', function() {
var scope = angular.module.ng.$rootScope.Scope();
var loginController = scope.$new(LoginController);
it('should disable login button when form is invalid', inject(function($rootScope) {
var loginController = $rootScope.$new(LoginController);
// In production the 'loginForm' form instance gets set from the view,
// but in unit-test we have to set it manually.
@@ -533,7 +532,7 @@ describe('LoginController', function() {
// Now simulate a valid form
loginController.loginForm.$emit('$valid', 'MyReason');
expect(loginController.disableLogin()).toBe(false);
});
}));
});
</pre>
@@ -569,9 +568,8 @@ function LoginController(){
}
describe('LoginController', function() {
it('should disable login button when form is invalid', function() {
var scope = angular.module.ng.$rootScope.Scope();
var loginController = scope.$new(LoginController);
it('should disable login button when form is invalid', inject(function($rootScope) {
var loginController = $rootScope.$new(LoginController);
var input = angular.element('<input>');
// In production the 'loginForm' form instance gets set from the view,
@@ -609,7 +607,7 @@ describe('LoginController', function() {
loginController.password = 'abcdef'; // should be valid
scope.$digest();
expect(loginController.loginForm.password.$valid).toBe(true);
});
}));
});
</pre>

4
docs/content/guide/dev_guide.i18n.ngdoc
View File

@@ -67,10 +67,10 @@ You can also include the locale specific js file in the index.html page. For exa
requires German locale, you would serve index_de-ge.html which will look something like this:
<pre>
<html>
<html ng:app>
<head>
….
<script src="angular.js" ng:autobind></script>
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-ge.js"></script>
….
</head>

20
docs/content/guide/dev_guide.overview.ngdoc
View File

@@ -79,22 +79,18 @@ easier a web developer's life can if they're using angular:
Try out the Live Preview above, and then let's walk through the example and describe what's going
on.
In the `<html>` tag, we add an attribute to let the browser know about the angular namespace:
In the `<html>` tag, we add an attribute to let the browser know about the angular namespace.
This ensures angular runs nicely in all major browsers. We also specify that it is an angular
application with the `ng:app` directive. The `ng:app' will cause the angular to {@link
dev_guide.bootstrap auto initialize} your application.
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng:app>
This ensures angular runs nicely in all major browsers.
We load the angular using the `<script>` tag:
In the `<script>` tag we do two angular setup tasks:
`<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js"></script>`
1. We load `angular.js`.
2. The angular {@link api/angular.directive.ng:autobind ng:autobind} directive tells angular to
{@link dev_guide.compiler compile} and manage the whole HTML document.
`<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js"
ng:autobind></script>`
From the `name` attribute of the `<input>` tags, angular automatically sets up two-way data
From the `ng:model` attribute of the `<input>` tags, angular automatically sets up two-way data
binding, and we also demonstrate some easy input validation:
Quantity: <input type="integer" min="0" ng:model="qty" required >

4
docs/content/guide/dev_guide.templates.ngdoc
View File

@@ -27,7 +27,7 @@ angular {@link dev_guide.compiler.directives directives}, {@link dev_guide.compi
and {@link dev_guide.expressions expressions}:
<pre>
<html>
<html ng:app>
<!-- Body tag augmented with ng:controller directive -->
<body ng:controller="MyController">
<input ng:model="foo" value="bar">
@@ -35,7 +35,7 @@ and {@link dev_guide.expressions expressions}:
string expression 'buttonText'
wrapped in "{{ }}" markup -->
<button ng:click="changeFoo()">{{buttonText}}</button>
<script src="angular.js" ng:autobind>
<script src="angular.js">
</body>
</html>
</pre>

4
docs/content/misc/downloading.ngdoc
View File

@@ -20,10 +20,10 @@ example points to (non-minified) version 0.9.12:
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng:app>
<head>
<title>My Angular App</title>
<script src="http://code.angularjs.org/angular-0.9.12.js" ng:autobind></script>
<script src="http://code.angularjs.org/angular-0.9.12.js"></script>
</head>
<body>
</body>

11
docs/content/misc/started.ngdoc
View File

@@ -27,18 +27,17 @@ Now let's take a closer look at that code, and see what is going on behind
the scenes.
The first line of interest defines the `ng` namespace, which makes
AngularJS work across all browsers (especially important for IE):
AngularJS work across all browsers (especially important for IE). The
`ng:app` tags tells angular to process the entire HTML when it is loaded:
<pre>
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng:app>
</pre>
The next line downloads the angular script, and instructs angular to process
the entire HTML page when it is loaded:
The next line downloads the angular script:
<pre>
<script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js"
ng:autobind></script>
<script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js"></script>
</pre>
(For details on what happens when angular processes an HTML page,

14
docs/content/tutorial/step_00.ngdoc
View File

@@ -149,7 +149,7 @@ below. The code contains some key Angular elements that we will need going forwa
__`app/index.html`:__
<pre>
<!doctype html>
<html xmlns:ng="http://angularjs.org/">
<html xmlns:ng="http://angularjs.org/" ng:app>
<head>
<meta charset="utf-8">
<title>my angular app</title>
@@ -159,7 +159,7 @@ __`app/index.html`:__
Nothing here yet!
<script src="lib/angular/angular.js" ng:autobind></script>
<script src="lib/angular/angular.js"></script>
</body>
</html>
</pre>
@@ -170,7 +170,7 @@ __`app/index.html`:__
* xmlns declaration
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng:app>
This `xmlns` declaration for the `ng` namespace must be specified in all Angular applications in
order to make Angular work with XHTML and IE versions older than 9 (regardless of whether you are
@@ -178,15 +178,15 @@ using XHTML or HTML).
* Angular script tag
<script src="lib/angular/angular.js" ng:autobind>
<script src="lib/angular/angular.js">
This single line of code is all that is needed to bootstrap an angular application.
The code downloads the `angular.js` script and 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 api/angular.directive.ng:autobind ng:autobind} attribute. If Angular finds
`ng:autobind`, it creates a root scope for the application and associates it with the `<html>`
element of the template:
looks for the {@link api/angular.directive.ng:app ng:app} attribute. If Angular finds
`ng:app`, it creates a root scope for the application and associates it with the element of
when `ng:app` was declared.
<img src="img/tutorial/tutorial_00_final.png">

3
docs/content/tutorial/step_02.ngdoc
View File

@@ -29,6 +29,7 @@ The __view__ component is constructed by Angular from this template:
__`app/index.html`:__
<pre>
<html ng:app>
...
<body ng:controller="PhoneListCtrl">
@@ -39,7 +40,7 @@ __`app/index.html`:__
</li>
</ul>
<script src="lib/angular/angular.js" ng:autobind></script>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>

3
docs/content/tutorial/step_07.ngdoc
View File

@@ -103,12 +103,13 @@ route into the layout template, which makes it a perfect fit for our `index.html
__`app/index.html`:__
<pre>
<html ng:app>
...
<body ng:controller="PhoneCatCtrl">
<ng:view></ng:view>
<script src="lib/angular/angular.js" ng:autobind></script>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>