From 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Mon, 6 Jun 2011 08:50:35 -0700 Subject: new batch of docs --- docs/content/cookbook/advancedform.ngdoc | 123 +++++++++++++++++++++++++++++++ docs/content/cookbook/buzz.ngdoc | 7 +- docs/content/cookbook/deeplinking.ngdoc | 27 ++++++- docs/content/cookbook/form.ngdoc | 37 +++++++--- docs/content/cookbook/helloworld.ngdoc | 13 +++- docs/content/cookbook/index.ngdoc | 38 ++++++++-- docs/content/cookbook/mvc.ngdoc | 32 +++++--- 7 files changed, 240 insertions(+), 37 deletions(-) create mode 100644 docs/content/cookbook/advancedform.ngdoc (limited to 'docs/content/cookbook') diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc new file mode 100644 index 00000000..e14be8b4 --- /dev/null +++ b/docs/content/cookbook/advancedform.ngdoc @@ -0,0 +1,123 @@ +@workInProgress +@ngdoc overview +@name Cookbook: Advanced Form +@description + + +Here we extend the basic form example to include common features such as reverting, dirty state +detection, and preventing invalid form submission. + + + + + +
+ + +
+

+ + +
+
+ , + +

+ + + + [ add ] +
+ + + [ X ] +
+ + + + +
+ Debug View: +
form={{form}}
+    master={{master}}
+
+
+ + it('should enable save button', function(){ + expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy(); + input('form.name').enter(''); + expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy(); + input('form.name').enter('change'); + expect(element(':button:contains(Save)').attr('disabled')).toBeFalsy(); + element(':button:contains(Save)').click(); + expect(element(':button:contains(Save)').attr('disabled')).toBeTruthy(); + }); + it('should enable cancel button', function(){ + expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy(); + input('form.name').enter('change'); + expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy(); + element(':button:contains(Cancel)').click(); + expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy(); + expect(element(':input[name=form.name]').val()).toEqual('John Smith'); + }); + +
+ + + + +#Things to notice + + +* Cancel & save buttons are only enabled if the form is dirty -- there is something to cancel or + save. +* Save button is only enabled if there are no validation errors on the form. +* Cancel reverts the form changes back to original state. +* Save updates the internal model of the form. +* Debug view shows the two models. One presented to the user form and the other being the pristine + copy master. + + + + + diff --git a/docs/content/cookbook/buzz.ngdoc b/docs/content/cookbook/buzz.ngdoc index 2e82b2d1..52fa5647 100644 --- a/docs/content/cookbook/buzz.ngdoc +++ b/docs/content/cookbook/buzz.ngdoc @@ -3,12 +3,15 @@ @name Cookbook: Resources - Buzz @description + External resources are URLs that provide JSON data, which are then rendered with the help of templates. angular has a resource factory that can be used to give names to the URLs and then attach behavior to them. For example you can use the -{@link http://code.google.com/apis/buzz/v1/getting_started.html#background-operations| Google Buzz API} +{@link http://code.google.com/apis/buzz/v1/getting_started.html#background-operations| Google Buzz +API} to retrieve Buzz activity and comments. +
+


+

, -

+

+ [ add ] @@ -49,6 +56,7 @@ allow a user to enter data.
user={{user}}
+
it('should show debug', function(){ @@ -61,42 +69,53 @@ allow a user to enter data. 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/); + .not().toMatch(/ng-validation-error/) + using('.example').input('user.address.zip').enter('abc'); + expect(using('.example').element(':input[name=user.address.zip]').attr('className')) - .toMatch(/ng-validation-error/); + .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/); + .not().toMatch(/ng-validation-error/) + using('.example').input('user.address.state').enter('XXX'); + expect(using('.example').element(':input[name=user.address.state]').attr('className')) - .toMatch(/ng-validation-error/); + .toMatch(/ng-validation-error/) });
+ + # Things to notice -* The user data model is initialized {@link angular.directive.@ng:controller controller} and is available in - the {@link angular.scope scope} with the initial data. + +* 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. * For debugging purposes we have included a debug view of the model to better understand what is going on. -* The {@link angular.widget.HTML input widgets} simply refer to the model and are auto bound. -* The inputs {@link angular.validator validate}. (Try leaving them blank or entering non digits +* The {@link api/angular.widget.HTML input widgets} simply refer to the model and are auto bound. +* The inputs {@link api/angular.validator validate}. (Try leaving them blank or entering non digits in the zip field) * In your application you can simply read from or write to the model and the form will be updated. * By clicking the 'add' link you are adding new items into the `user.contacts` array which are then diff --git a/docs/content/cookbook/helloworld.ngdoc b/docs/content/cookbook/helloworld.ngdoc index ab4c337a..a2557b5d 100644 --- a/docs/content/cookbook/helloworld.ngdoc +++ b/docs/content/cookbook/helloworld.ngdoc @@ -3,6 +3,7 @@ @name Cookbook: Hello World @description + Your name: @@ -18,14 +19,18 @@ + # Things to notice + Take a look through the source and note: -* The script tag that {@link guide.bootstrap bootstraps} the angular environment. -* The text {@link angular.widget.HTML input widget} which is bound to the greeting name text. + +* 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. -* The implicit presence of the `name` variable which is in the root {@link angular.scope scope}. +* The implicit presence of the `name` variable which is in the root {@link api/angular.scope scope}. * The double curly brace `{{markup}}`, which binds the name variable to the greeting text. -* The concept of {@link guide.data-binding data binding}, which reflects any changes to the +* The concept of {@link guide/dev_guide.templates.databinding data binding}, which reflects any +changes to the input field in the greeting text. diff --git a/docs/content/cookbook/index.ngdoc b/docs/content/cookbook/index.ngdoc index 7dc937c5..e8a3d7d7 100644 --- a/docs/content/cookbook/index.ngdoc +++ b/docs/content/cookbook/index.ngdoc @@ -3,58 +3,80 @@ @name Cookbook @description + Welcome to the angular cookbook. Here we will show you typical uses of angular by example. + + # Hello World -{@link cookbook.helloworld Hello World}: The simplest possible application that demonstrates the + +{@link helloworld Hello World}: The simplest possible application that demonstrates the classic Hello World! + + # Basic Form -{@link cookbook.form Basic Form}: Displaying forms to the user for editing is the bread and butter + +{@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 cookbook.formadvanced Advanced Form}: Taking the form example to the next level and + +{@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 cookbook.mvc MVC}: Tic-Tac-Toe: Model View Controller (MVC) is a time-tested design pattern + +{@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 cookbook.deeplinking Deep Linking}: An AJAX application never navigates away from the + +{@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 angular.service Services}: Services are long lived objects in your applications that are + +{@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 order of initialization. This safeguards you from the perils of global state (a common way to implement long lived objects). + + # External Resources -{@link cookbook.buzz Resources}: Web applications must be able to communicate with the external + +{@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 470794b8..bc0eb653 100644 --- a/docs/content/cookbook/mvc.ngdoc +++ b/docs/content/cookbook/mvc.ngdoc @@ -3,19 +3,24 @@ @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. + +