diff options
Diffstat (limited to 'docs/content/cookbook')
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 11 | ||||
| -rw-r--r-- | docs/content/cookbook/buzz.ngdoc | 2 | ||||
| -rw-r--r-- | docs/content/cookbook/deeplinking.ngdoc | 20 | ||||
| -rw-r--r-- | docs/content/cookbook/form.ngdoc | 13 | ||||
| -rw-r--r-- | docs/content/cookbook/helloworld.ngdoc | 4 | ||||
| -rw-r--r-- | docs/content/cookbook/index.ngdoc | 23 | ||||
| -rw-r--r-- | docs/content/cookbook/mvc.ngdoc | 9 |
7 files changed, 0 insertions, 82 deletions
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index 747e8891..bbf4875e 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -3,11 +3,9 @@ @name Cookbook: Advanced Form @description - Here we extend the basic form example to include common features such as reverting, dirty state detection, and preventing invalid form submission. - <doc:example> <doc:source> <script> @@ -31,13 +29,11 @@ detection, and preventing invalid form submission. this.cancel(); } - UserForm.prototype = { cancel: function(){ this.form = angular.copy(this.master); }, - save: function(){ this.master = this.form; this.cancel(); @@ -46,11 +42,9 @@ detection, and preventing invalid form submission. </script> <div ng:controller="UserForm"> - <label>Name:</label><br/> <input type="text" name="form.name" ng:required/> <br/><br/> - <label>Address:</label><br/> <input type="text" name="form.address.line1" size="33" ng:required/> <br/> <input type="text" name="form.address.city" size="12" ng:required/>, @@ -58,7 +52,6 @@ detection, and preventing invalid form submission. <input type="text" name="form.address.zip" size="5" ng:required ng:validate="regexp:zip"/><br/><br/> - <label>Contacts:</label> [ <a href="" ng:click="form.contacts.$add()">add</a> ] <div ng:repeat="contact in form.contacts"> @@ -75,7 +68,6 @@ ng:validate="regexp:zip"/><br/><br/> <button ng:click="save()" ng:disabled="{{$invalidWidgets.visible() || master.$equals(form)}}">Save</button> - <hr/> Debug View: <pre>form={{form}} @@ -104,11 +96,8 @@ master.$equals(form)}}">Save</button> </doc:example> - - #Things to notice - * Cancel & save buttons are only enabled if the form is dirty — there is something to cancel or save. * Save button is only enabled if there are no validation errors on the form. diff --git a/docs/content/cookbook/buzz.ngdoc b/docs/content/cookbook/buzz.ngdoc index 5b83de79..974a7c74 100644 --- a/docs/content/cookbook/buzz.ngdoc +++ b/docs/content/cookbook/buzz.ngdoc @@ -3,7 +3,6 @@ @name Cookbook: Resources - Buzz @description - External resources are URLs that provide JSON data, which are then rendered with the help of templates. angular has a resource factory that can be used to give names to the URLs and then attach behavior to them. For example you can use the @@ -11,7 +10,6 @@ attach behavior to them. For example you can use the API} to retrieve Buzz activity and comments. - <doc:example> <doc:source> <script> diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc index 6cc0b356..e49287bb 100644 --- a/docs/content/cookbook/deeplinking.ngdoc +++ b/docs/content/cookbook/deeplinking.ngdoc @@ -3,18 +3,14 @@ @name Cookbook: Deep Linking @description - Deep linking allows you to encode the state of the application in the URL so that it can be bookmarked and the application can be restored from the URL to the same state. - While <angular/> does not force you to deal with bookmarks in any particular way, it has services which make the common case described here very easy to implement. - # Assumptions - Your application consists of a single HTML page which bootstraps the application. We will refer to this page as the chrome. Your application is divided into several screens (or views) which the user can visit. For example, @@ -25,30 +21,22 @@ screen will be constructed from an HTML snippet, which we will refer to as the p have multiple partials, but a single partial is the most common construct. This example makes the partial boundary visible using a blue line. - You can make a routing table which shows which URL maps to which partial view template and which controller. - # Example - In this example we have a simple app which consist of two screens: - * Welcome: url `#` Show the user contact information. * Settings: url `#/settings` Show an edit screen for user contact information. - - The two partials are defined in the following URLs: - * {@link ./examples/settings.html} * {@link ./examples/welcome.html} - <doc:example> <doc:source> <script> @@ -59,7 +47,6 @@ The two partials are defined in the following URLs: $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl}); $route.parent(this); - // initialize the model to something useful this.person = { name:'anonymous', @@ -67,7 +54,6 @@ The two partials are defined in the following URLs: }; } - function WelcomeCntl($route){} WelcomeCntl.prototype = { greet: function(){ @@ -75,7 +61,6 @@ The two partials are defined in the following URLs: } }; - function SettingsCntl(){ this.cancel(); } @@ -84,7 +69,6 @@ The two partials are defined in the following URLs: this.form = angular.copy(this.person); }, - save: function(){ angular.copy(this.form, this.person); window.location.hash = "#"; @@ -117,12 +101,8 @@ The two partials are defined in the following URLs: - - - # Things to notice - * Routes are defined in the `AppCntl` class. The initialization of the controller causes the initialization of the {@link api/angular.service.$route $route} service with the proper URL routes. diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc index 55aeb4b9..08f8971d 100644 --- a/docs/content/cookbook/form.ngdoc +++ b/docs/content/cookbook/form.ngdoc @@ -3,14 +3,11 @@ @name Cookbook: Form @description - A web application's main purpose is to present and gather data. For this reason angular strives to make both of these operations trivial. This example shows off how you can build a simple form to allow a user to enter data. - - <doc:example> <doc:source> <script> @@ -26,11 +23,9 @@ allow a user to enter data. </script> <div ng:controller="FormController" class="example"> - <label>Name:</label><br/> <input type="text" name="user.name" ng:required/> <br/><br/> - <label>Address:</label><br/> <input type="text" name="user.address.line1" size="33" ng:required/> <br/> <input type="text" name="user.address.city" size="12" ng:required/>, @@ -38,7 +33,6 @@ allow a user to enter data. <input type="text" name="user.address.zip" size="5" ng:required ng:validate="regexp:zip"/><br/><br/> - <label>Phone:</label> [ <a href="" ng:click="user.contacts.$add()">add</a> ] <div ng:repeat="contact in user.contacts"> @@ -56,7 +50,6 @@ ng:validate="regexp:zip"/><br/><br/> <pre>user={{user}}</pre> </div> - </doc:source> <doc:scenario> it('should show debug', function(){ @@ -69,13 +62,11 @@ ng:validate="regexp:zip"/><br/><br/> expect(binding('user')).toMatch(/you@example.org/); }); - it('should remove contact', function(){ using('.example').element('a:contains(X)').click(); expect(binding('user')).not().toMatch(/\(234\) 555\-1212/); }); - it('should validate zip', function(){ expect(using('.example').element(':input[name=user.address.zip]').attr('className')) .not().toMatch(/ng-validation-error/); @@ -84,7 +75,6 @@ ng:validate="regexp:zip"/><br/><br/> .toMatch(/ng-validation-error/); }); - it('should validate state', function(){ expect(using('.example').element(':input[name=user.address.state]').attr('className')) .not().toMatch(/ng-validation-error/); @@ -96,11 +86,8 @@ ng:validate="regexp:zip"/><br/><br/> </doc:example> - - # Things to notice - * The user data model is initialized {@link api/angular.directive.ng:controller controller} and is available in the {@link api/angular.scope scope} with the initial data. diff --git a/docs/content/cookbook/helloworld.ngdoc b/docs/content/cookbook/helloworld.ngdoc index a2557b5d..8018a399 100644 --- a/docs/content/cookbook/helloworld.ngdoc +++ b/docs/content/cookbook/helloworld.ngdoc @@ -3,7 +3,6 @@ @name Cookbook: Hello World @description - <doc:example> <doc:source> Your name: <input type="text" name="name" value="World"/> @@ -19,13 +18,10 @@ </doc:scenario> </doc:example> - # Things to notice - Take a look through the source and note: - * The script tag that {@link guide/dev_guide.bootstrap bootstraps} the angular environment. * The text {@link api/angular.widget.HTML input widget} which is bound to the greeting name text. * No need for listener registration and event firing on change events. diff --git a/docs/content/cookbook/index.ngdoc b/docs/content/cookbook/index.ngdoc index e8a3d7d7..c3f9d8bf 100644 --- a/docs/content/cookbook/index.ngdoc +++ b/docs/content/cookbook/index.ngdoc @@ -3,68 +3,48 @@ @name Cookbook @description - Welcome to the angular cookbook. Here we will show you typical uses of angular by example. - - # Hello World - {@link helloworld Hello World}: The simplest possible application that demonstrates the classic Hello World! - - # Basic Form - {@link form Basic Form}: Displaying forms to the user for editing is the bread and butter of web applications. Angular makes forms easy through bidirectional data binding. - - # Advanced Form - {@link advancedform Advanced Form}: Taking the form example to the next level and providing advanced features such as dirty detection, form reverting and submit disabling if validation errors exist. - - # Model View Controller - {@link mvc MVC}: Tic-Tac-Toe: Model View Controller (MVC) is a time-tested design pattern to separate the behavior (JavaScript controller) from the presentation (HTML view). This separation aids in maintainability and testability of your project. - - # Multi-page App and Deep Linking - {@link deeplinking Deep Linking}: An AJAX application never navigates away from the first page it loads. Instead, it changes the DOM of its single page. Eliminating full-page reloads is what makes AJAX apps responsive, but it creates a problem in that apps with a single URL prevent you from emailing links to a particular screen within your application. - Deep linking tries to solve this by changing the URL anchor without reloading a page, thus allowing you to send links to specific screens in your app. - - # Services - {@link api/angular.service Services}: Services are long lived objects in your applications that are available across controllers. A collection of useful services are pre-bundled with angular but you will likely add your own. Services are initialized using dependency injection, which resolves the @@ -72,11 +52,8 @@ order of initialization. This safeguards you from the perils of global state (a implement long lived objects). - - # External Resources - {@link buzz Resources}: Web applications must be able to communicate with the external services to get and update data. Resources are the abstractions of external URLs which are specially tailored to angular data binding. diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc index 04feffcc..6a167469 100644 --- a/docs/content/cookbook/mvc.ngdoc +++ b/docs/content/cookbook/mvc.ngdoc @@ -3,19 +3,15 @@ @name Cookbook: MVC @description - MVC allows for a clean an testable separation between the behavior (controller) and the view (HTML template). A Controller is just a JavaScript class which is grafted onto the scope of the view. This makes it very easy for the controller and the view to share the model. - The model is simply the controller's this. This makes it very easy to test the controller in isolation since one can simply instantiate the controller and test without a view, because there is no connection between the controller and the view. - - <doc:example> <doc:source> <script> @@ -83,7 +79,6 @@ no connection between the controller and the view. }; </script> - <h3>Tic-Tac-Toe</h3> <div ng:controller="TicTacToeCntl"> Next Player: {{nextMove}} @@ -109,7 +104,6 @@ no connection between the controller and the view. expect(element('.winner').text()).toEqual('Player X has won!'); }); - function piece(row, col) { element('.board tr:nth-child('+row+') td:nth-child('+col+')').click(); } @@ -117,11 +111,8 @@ no connection between the controller and the view. </doc:example> - - # Things to notice - * The controller is defined in JavaScript and has no reference to the rendering logic. * The controller is instantiated by <angular/> and injected into the view. * The controller can be instantiated in isolation (without a view) and the code will still execute. |