my angular app

From 5143e7bf065a3cbdf8400cf095b653d51bc83b8f Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 6 Jan 2012 18:10:47 -0800 Subject: feat(module): new module loader --- docs/content/api/angular.module.ngdoc | 54 ------------- .../guide/dev_guide.bootstrap.auto_bootstrap.ngdoc | 91 +++++----------------- .../dev_guide.bootstrap.manual_bootstrap.ngdoc | 2 +- docs/content/guide/dev_guide.bootstrap.ngdoc | 8 +- ...dev_guide.compiler.understanding_compiler.ngdoc | 3 +- .../guide/dev_guide.di.understanding_di.ngdoc | 2 +- .../guide/dev_guide.di.using_di_controllers.ngdoc | 4 +- docs/content/guide/dev_guide.forms.ngdoc | 14 ++-- docs/content/guide/dev_guide.i18n.ngdoc | 4 +- docs/content/guide/dev_guide.overview.ngdoc | 20 ++--- docs/content/guide/dev_guide.templates.ngdoc | 4 +- docs/content/misc/downloading.ngdoc | 4 +- docs/content/misc/started.ngdoc | 11 ++- docs/content/tutorial/step_00.ngdoc | 14 ++-- docs/content/tutorial/step_02.ngdoc | 3 +- docs/content/tutorial/step_07.ngdoc | 3 +- 16 files changed, 63 insertions(+), 178 deletions(-) delete mode 100644 docs/content/api/angular.module.ngdoc (limited to 'docs/content') diff --git a/docs/content/api/angular.module.ngdoc b/docs/content/api/angular.module.ngdoc deleted file mode 100644 index ccfec6b7..00000000 --- a/docs/content/api/angular.module.ngdoc +++ /dev/null @@ -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. - -

-// 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 = '!';
-};
-

- -See: {@link angular.module.AUTO.$provide $provide}, {@link angular.module.ng.$locationProvider $locationProvider}. - -# Registering Module Function - -In your JavaScript file: -

-// 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.
-};
-

- -Then you can refer to your module like this: - -

-var injector = angular.injector('ng', 'MyModule')
-

- -Or - -

-var injector = angular.injector('ng', angular.module.MyModule)
-

diff --git a/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc index d461bfb4..ff14a703 100644 --- a/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc @@ -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: - - + + + I can add: {{ 1+2 }}. + + 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. - - 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. +1. The browser loads the page, and then runs the angular script. Angular waits for the +`DOMContentLoaded` (or 'Load') event to attempt to bootstrap. -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 ` - - -

- Hello {{'world'}}! -

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

-  
-  
-   
-    
-   
-   
-     
-       Hello {{'world'}}!
-     
-   
-  
-

- +only a part of the document set the `ng:app` on the root element of this portion. ## Global Angular Object diff --git a/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc index c042b2e3..1c934745 100644 --- a/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc +++ b/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc @@ -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.

diff --git a/docs/content/guide/dev_guide.bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.ngdoc
index ed36a543..5b688e3a 100644
--- a/docs/content/guide/dev_guide.bootstrap.ngdoc
+++ b/docs/content/guide/dev_guide.bootstrap.ngdoc
@@ -7,20 +7,20 @@ angular should process and manage the page. To initialize angular you do the fol
 
 * Specify the angular namespace in the `` 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:
 
  
-
+
   
     ...
   
   
     ...
-    
+
+
 
  ...
 
diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc
index db2f88cd..b4e37abd 100644
--- a/docs/content/guide/dev_guide.forms.ngdoc
+++ b/docs/content/guide/dev_guide.forms.ngdoc
@@ -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);
-  });
+  }));
 });
 
 
@@ -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('');
 
     // 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);
-  });
+  }));
 });

diff --git a/docs/content/guide/dev_guide.i18n.ngdoc b/docs/content/guide/dev_guide.i18n.ngdoc index d88715cd..1b9c1cde 100644 --- a/docs/content/guide/dev_guide.i18n.ngdoc +++ b/docs/content/guide/dev_guide.i18n.ngdoc @@ -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:

-
+
  
 ….
-   
+   
    
 ….
  
diff --git a/docs/content/guide/dev_guide.overview.ngdoc b/docs/content/guide/dev_guide.overview.ngdoc
index 2e555dd8..3b4d237f 100644
--- a/docs/content/guide/dev_guide.overview.ngdoc
+++ b/docs/content/guide/dev_guide.overview.ngdoc
@@ -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 `` tag, we add an attribute to let the browser know about the angular namespace:
+In the `` 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.
 
-        
+        
 
-This ensures angular runs nicely in all major browsers.
+We load the angular using the  ``
 
-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.
-
-    ``
-
-From the `name` attribute of the `` tags, angular automatically sets up two-way data
+From the `ng:model` attribute of the `` tags, angular automatically sets up two-way data
 binding, and we also demonstrate some easy input validation:
 
         Quantity: 
diff --git a/docs/content/guide/dev_guide.templates.ngdoc b/docs/content/guide/dev_guide.templates.ngdoc
index 584fdcfe..561773f1 100644
--- a/docs/content/guide/dev_guide.templates.ngdoc
+++ b/docs/content/guide/dev_guide.templates.ngdoc
@@ -27,7 +27,7 @@ angular {@link dev_guide.compiler.directives directives}, {@link dev_guide.compi
 and {@link dev_guide.expressions expressions}:
 
 -
+
  
  
    
@@ -35,7 +35,7 @@ and {@link dev_guide.expressions expressions}:
           string expression 'buttonText'
           wrapped in "{{ }}" markup -->
    
-   
+      
     
     
     
diff --git a/docs/content/misc/started.ngdoc b/docs/content/misc/started.ngdoc
index 591fb859..08e37668 100644
--- a/docs/content/misc/started.ngdoc
+++ b/docs/content/misc/started.ngdoc
@@ -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:
 
 -    
+    
 
 
-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:
 
 -    
+    
 
 
 (For details on what happens when angular processes an HTML page,
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc
index b1bdf628..b7f469ff 100644
--- a/docs/content/tutorial/step_00.ngdoc
+++ b/docs/content/tutorial/step_00.ngdoc
@@ -149,7 +149,7 @@ below. The code contains some key Angular elements that we will need going forwa
 __`app/index.html`:__
  
-
+
 
   
   my angular app
@@ -159,7 +159,7 @@ __`app/index.html`:__
 
   Nothing here yet!
 
-  
+  
 
 
 
@@ -170,7 +170,7 @@ __`app/index.html`:__
 
 * xmlns declaration
 
-          
+          
 
   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
 
-          
+  
   
 
 
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index 1467a8a7..0aebb9fe 100644
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -103,12 +103,13 @@ route into the layout template, which makes it a perfect fit for our `index.html
 
 __`app/index.html`:__
 +
 ...
 
 
   
 
-  
+  
   
 
 
-- 
cgit v1.2.3