diff options
Diffstat (limited to 'docs/content')
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 122 | ||||
| -rw-r--r-- | docs/content/cookbook/buzz.ngdoc | 63 | ||||
| -rw-r--r-- | docs/content/cookbook/deeplinking.ngdoc | 151 | ||||
| -rw-r--r-- | docs/content/cookbook/form.ngdoc | 114 | ||||
| -rw-r--r-- | docs/content/cookbook/helloworld.ngdoc | 39 | ||||
| -rw-r--r-- | docs/content/cookbook/index.ngdoc | 58 | ||||
| -rw-r--r-- | docs/content/cookbook/mvc.ngdoc | 128 | ||||
| -rw-r--r-- | docs/content/tutorial/the_end.ngdoc | 2 |
8 files changed, 0 insertions, 677 deletions
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc deleted file mode 100644 index bcf8069a..00000000 --- a/docs/content/cookbook/advancedform.ngdoc +++ /dev/null @@ -1,122 +0,0 @@ -@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. - -<doc:example> -<doc:source> - <script> - function UserForm($scope) { - var master = { - name: 'John Smith', - address:{ - line1: '123 Main St.', - city:'Anytown', - state:'AA', - zip:'12345' - }, - contacts:[ - {type:'phone', value:'1(234) 555-1212'} - ] - }; - - $scope.state = /^\w\w$/; - $scope.zip = /^\d\d\d\d\d$/; - - $scope.cancel = function() { - $scope.form = angular.copy(master); - }; - - $scope.save = function() { - master = $scope.form; - $scope.cancel(); - }; - - $scope.addContact = function() { - $scope.form.contacts.push({type:'', value:''}); - }; - - $scope.removeContact = function(index) { - $scope.form.contacts.splice(index, 1); - }; - - $scope.isCancelDisabled = function() { - return angular.equals(master, $scope.form); - }; - - $scope.isSaveDisabled = function() { - return $scope.myForm.$invalid || angular.equals(master, $scope.form); - }; - - $scope.cancel(); - } - </script> - <div ng-controller="UserForm"> - - <form name="myForm"> - - <label>Name:</label><br/> - <input type="text" ng-model="form.name" required/> <br/><br/> - - <label>Address:</label> <br/> - <input type="text" ng-model="form.address.line1" size="33" required/> <br/> - <input type="text" ng-model="form.address.city" size="12" required/>, - <input type="text" ng-model="form.address.state" size="2" - ng-pattern="state" required/> - <input type="text" ng-model="form.address.zip" size="5" - ng-pattern="zip" required/><br/><br/> - - <label>Contacts:</label> - [ <a href="" ng-click="addContact()">add</a> ] - <div ng-repeat="contact in form.contacts"> - <select ng-model="contact.type"> - <option>email</option> - <option>phone</option> - <option>pager</option> - <option>IM</option> - </select> - <input type="text" ng-model="contact.value" required/> - [ <a href="" ng-click="removeContact($index)">X</a> ] - </div> - <button ng-click="cancel()" ng-disabled="isCancelDisabled()">Cancel</button> - <button ng-click="save()" ng-disabled="isSaveDisabled()">Save</button> - </form> - - <hr/> - Debug View: - <pre>form={{form}}</pre> - </div> -</doc:source> -<doc:scenario> - 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[ng\\:model="form.name"]').val()).toEqual('John Smith'); - }); -</doc:scenario> -</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. -* 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 deleted file mode 100644 index 00db35cf..00000000 --- a/docs/content/cookbook/buzz.ngdoc +++ /dev/null @@ -1,63 +0,0 @@ -@ngdoc overview -@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} -to retrieve Buzz activity and comments. - -<doc:example> - <doc:source> - <script> - BuzzController.$inject = ['$scope', '$resource']; - function BuzzController($scope, $resource) { - $scope.userId = 'googlebuzz'; - $scope.Activity = $resource( - 'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments', - {alt: 'json', callback: 'JSON_CALLBACK'}, - { get: {method: 'JSONP', params: {visibility: '@self'}}, - replies: {method: 'JSONP', params: {visibility: '@self', comments: '@comments'}} - }); - - $scope.fetch = function() { - $scope.activities = $scope.Activity.get({userId:this.userId}); - } - - $scope.expandReplies = function(activity) { - activity.replies = $scope.Activity.replies({userId: this.userId, activityId: activity.id}); - } - }; - </script> - <div ng-controller="BuzzController"> - <input ng-model="userId"/> - <button ng-click="fetch()">fetch</button> - <hr/> - <div class="buzz" ng-repeat="item in activities.data.items"> - <h1 style="font-size: 15px;"> - <img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> - <a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a> - <a href ng-click="expandReplies(item)" style="float: right;"> - Expand replies: {{item.links.replies[0].count}} - </a> - </h1> - {{item.object.content | html}} - <div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;"> - <img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/> - <a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>: - {{reply.content | html}} - </div> - </div> - </div> - </doc:source> - <doc:scenario> - xit('fetch buzz and expand', function() { - element(':button:contains(fetch)').click(); - expect(repeater('div.buzz').count()).toBeGreaterThan(0); - element('.buzz a:contains(Expand replies):first').click(); - expect(repeater('div.reply').count()).toBeGreaterThan(0); - }); - </doc:scenario> -</doc:example> diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc deleted file mode 100644 index bdcf0b09..00000000 --- a/docs/content/cookbook/deeplinking.ngdoc +++ /dev/null @@ -1,151 +0,0 @@ -@ngdoc overview -@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, -the home screen, settings screen, details screen, etc. For each of these screens, we would like to -assign a URL so that it can be bookmarked and later restored. Each of these screens will be -associated with a controller which define the screen's behavior. The most common case is that the -screen will be constructed from an HTML snippet, which we will refer to as the partial. Screens can -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 `welcome` Show the user contact information. -* Settings: url `settings` Show an edit screen for user contact information. - -<example module="deepLinking" deps="angular-route.js, angular-sanitize.js"> - <file name="script.js"> - angular.module('deepLinking', ['ngRoute', 'ngSanitize']) - .config(function($routeProvider) { - $routeProvider. - when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}). - when("/settings", {templateUrl:'settings.html', controller:SettingsCntl}); - }); - - AppCntl.$inject = ['$scope', '$route'] - function AppCntl($scope, $route) { - $scope.$route = $route; - - // initialize the model to something useful - $scope.person = { - name:'anonymous', - contacts:[{type:'email', url:'anonymous@example.com'}] - }; - } - - function WelcomeCntl($scope) { - $scope.greet = function() { - alert("Hello " + $scope.person.name); - }; - } - - function SettingsCntl($scope, $location) { - $scope.cancel = function() { - $scope.form = angular.copy($scope.person); - }; - - $scope.save = function() { - angular.copy($scope.form, $scope.person); - $location.path('/welcome'); - }; - - $scope.cancel(); - } - </file> - <file name="style.css"> - [ng-view] { - border: 1px solid blue; - margin: 0; - padding:1em; - } - - .partial-info { - background-color: blue; - color: white; - padding: 3px; - } - </file> - <file name="index.html"> - <div ng-controller="AppCntl"> - <h1>Your App Chrome</h1> - [ <a href="welcome">Welcome</a> | <a href="settings">Settings</a> ] - <hr/> - <span class="partial-info"> - Partial: {{$route.current.template}} - </span> - <div ng-view></div> - <small>Your app footer </small> - </div> - </file> - <file name="settings.html"> - <label>Name:</label> - <input type="text" ng:model="form.name" required> - - <div ng:repeat="contact in form.contacts"> - <select ng:model="contact.type"> - <option>url</option> - <option>email</option> - <option>phone</option> - </select> - <input type="text" ng:model="contact.url"> - [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ] - </div> - <div> - [ <a href="" ng:click="form.contacts.$add()">add</a> ] - </div> - - <button ng:click="cancel()">Cancel</button> - <button ng:click="save()">Save</button> - </file> - <file name="welcome.html"> - Hello {{person.name}}, - <div> - Your contact information: - <div ng:repeat="contact in person.contacts">{{contact.type}}: - <span ng-bind-html="contact.url|linky"></span> - </div> - </div> - </file> - <file name="scenario.js"> - it('should navigate to URL', function() { - element('a:contains(Welcome)').click(); - expect(element('[ng-view]').text()).toMatch(/Hello anonymous/); - element('a:contains(Settings)').click(); - input('form.name').enter('yourname'); - element(':button:contains(Save)').click(); - element('a:contains(Welcome)').click(); - expect(element('[ng-view]').text()).toMatch(/Hello yourname/); - }); - </file> -</example> - - - -# Things to notice - -* Routes are defined in the `AppCntl` class. The initialization of the controller causes the - initialization of the {@link api/ngRoute.$route $route} service with the proper URL - routes. -* The {@link api/ngRoute.$route $route} service then watches the URL and instantiates the - appropriate controller when the URL changes. -* The {@link api/ngRoute.directive:ngView ngView} widget loads the - view when the URL changes. It also sets the view scope to the newly instantiated controller. -* Changing the URL is sufficient to change the controller and view. It makes no difference whether - the URL is changed programmatically or by the user. diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc deleted file mode 100644 index aaa49d2f..00000000 --- a/docs/content/cookbook/form.ngdoc +++ /dev/null @@ -1,114 +0,0 @@ -@ngdoc overview -@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> - function FormController($scope) { - var user = $scope.user = { - name: 'John Smith', - address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'}, - contacts:[{type:'phone', value:'1(234) 555-1212'}] - }; - $scope.state = /^\w\w$/; - $scope.zip = /^\d\d\d\d\d$/; - - $scope.addContact = function() { - user.contacts.push({type:'email', value:''}); - }; - - $scope.removeContact = function(contact) { - for (var i = 0, ii = user.contacts.length; i < ii; i++) { - if (contact === user.contacts[i]) { - $scope.user.contacts.splice(i, 1); - } - } - }; - } - </script> - <div ng-controller="FormController" class="example"> - - <label>Name:</label><br> - <input type="text" ng-model="user.name" required/> <br><br> - - <label>Address:</label><br> - <input type="text" ng-model="user.address.line1" size="33" required> <br> - <input type="text" ng-model="user.address.city" size="12" required>, - <input type="text" ng-model="user.address.state" - ng-pattern="state" size="2" required> - <input type="text" ng-model="user.address.zip" size="5" - ng-pattern="zip" required><br><br> - - <label>Phone:</label> - [ <a href="" ng-click="addContact()">add</a> ] - <div ng-repeat="contact in user.contacts"> - <select ng-model="contact.type"> - <option>email</option> - <option>phone</option> - <option>pager</option> - <option>IM</option> - </select> - <input type="text" ng-model="contact.value" required> - [ <a href="" ng-click="removeContact(contact)">X</a> ] - </div> - <hr/> - Debug View: - <pre>user={{user | json}}</pre> - </div> - - </doc:source> - <doc:scenario> - it('should show debug', function() { - expect(binding('user')).toMatch(/John Smith/); - }); - it('should add contact', function() { - using('.example').element('a:contains(add)').click(); - using('.example div:last').input('contact.value').enter('you@example.org'); - expect(binding('user')).toMatch(/\(234\) 555\-1212/); - 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[ng\\:model="user.address.zip"]'). - prop('className')).not().toMatch(/ng-invalid/); - using('.example').input('user.address.zip').enter('abc'); - expect(using('.example'). - element(':input[ng\\:model="user.address.zip"]'). - prop('className')).toMatch(/ng-invalid/); - }); - - it('should validate state', function() { - expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className')) - .not().toMatch(/ng-invalid/); - using('.example').input('user.address.state').enter('XXX'); - expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className')) - .toMatch(/ng-invalid/); - }); - </doc:scenario> -</doc:example> - - -# Things to notice - -* The user data model is initialized {@link api/ng.directive:ngController controller} and is - available in the {@link api/ng.$rootScope.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 api/ng.directive:input input directives} simply refer - to the model and are data-bound. -* The inputs 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 - reflected in the view. diff --git a/docs/content/cookbook/helloworld.ngdoc b/docs/content/cookbook/helloworld.ngdoc deleted file mode 100644 index a24f959a..00000000 --- a/docs/content/cookbook/helloworld.ngdoc +++ /dev/null @@ -1,39 +0,0 @@ -@ngdoc overview -@name Cookbook: Hello World -@description - -<doc:example> - <doc:source> - <script> - function HelloCntl($scope) { - $scope.name = 'World'; - } - </script> - <div ng-controller="HelloCntl"> - Your name: <input type="text" ng-model="name"/> - <hr/> - Hello {{name || "World"}}! - </div> - </doc:source> - <doc:scenario> - it('should change the binding when user enters text', function() { - expect(binding('name')).toEqual('World'); - input('name').enter('angular'); - expect(binding('name')).toEqual('angular'); - }); - </doc:scenario> -</doc:example> - -# 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 api/ng.directive:input input form control} which is - bound to the greeting name text. -* There is no need for listener registration and event firing on change events. -* The implicit presence of the `name` variable which is in the root {@link api/ng.$rootScope.Scope scope}. -* The double curly brace `{{markup}}`, which binds the name variable to the greeting text. -* The concept of {@link guide/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 deleted file mode 100644 index 4fe3eb4d..00000000 --- a/docs/content/cookbook/index.ngdoc +++ /dev/null @@ -1,58 +0,0 @@ -@ngdoc overview -@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/ng 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 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 deleted file mode 100644 index 59f9ef85..00000000 --- a/docs/content/cookbook/mvc.ngdoc +++ /dev/null @@ -1,128 +0,0 @@ -@ngdoc overview -@name Cookbook: MVC -@description - -MVC allows for a clean and 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 a set of objects and primitives that are referenced from the Scope ($scope) object. -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> - function TicTacToeCntl($scope, $location) { - $scope.cellStyle= { - 'height': '20px', - 'width': '20px', - 'border': '1px solid black', - 'text-align': 'center', - 'vertical-align': 'middle', - 'cursor': 'pointer' - }; - - $scope.reset = function() { - $scope.board = [ - ['', '', ''], - ['', '', ''], - ['', '', ''] - ]; - $scope.nextMove = 'X'; - $scope.winner = ''; - setUrl(); - }; - - $scope.dropPiece = function(row, col) { - if (!$scope.winner && !$scope.board[row][col]) { - $scope.board[row][col] = $scope.nextMove; - $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X'; - setUrl(); - } - }; - - $scope.reset(); - $scope.$watch(function() { return $location.search().board;}, readUrl); - - function setUrl() { - var rows = []; - angular.forEach($scope.board, function(row) { - rows.push(row.join(',')); - }); - $location.search({board: rows.join(';') + '/' + $scope.nextMove}); - } - - function grade() { - var b = $scope.board; - $scope.winner = - row(0) || row(1) || row(2) || - col(0) || col(1) || col(2) || - diagonal(-1) || diagonal(1); - function row(row) { return same(b[row][0], b[row][1], b[row][2]);} - function col(col) { return same(b[0][col], b[1][col], b[2][col]);} - function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);} - function same(a, b, c) { return (a==b && b==c) ? a : '';}; - } - - function readUrl(value) { - if (value) { - value = value.split('/'); - $scope.nextMove = value[1]; - angular.forEach(value[0].split(';'), function(row, col){ - $scope.board[col] = row.split(','); - }); - grade(); - } - } - } - </script> - - <h3>Tic-Tac-Toe</h3> - <div ng-controller="TicTacToeCntl"> - Next Player: {{nextMove}} - <div class="winner" ng-show="winner">Player {{winner}} has won!</div> - <table class="board"> - <tr ng-repeat="row in board track by $index" style="height:15px;"> - <td ng-repeat="cell in row track by $index" ng-style="cellStyle" - ng-click="dropPiece($parent.$index, $index)">{{cell}}</td> - </tr> - </table> - <button ng-click="reset()">reset board</button> - </div> - </doc:source> - <doc:scenario> - it('should play a game', function() { - piece(1, 1); - expect(binding('nextMove')).toEqual('O'); - piece(3, 1); - expect(binding('nextMove')).toEqual('X'); - piece(1, 2); - piece(3, 2); - piece(1, 3); - expect(element('.winner').text()).toEqual('Player X has won!'); - }); - - function piece(row, col) { - element('.board tr:nth-child('+row+') td:nth-child('+col+')').click(); - } - </doc:scenario> -</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. -This makes it very testable. -* The HTML view is a projection of the model. In the above example, the model is stored in the -board variable. -* All of the controller's properties (such as board and nextMove) are available to the view. -* Changing the model changes the view. -* The view can call any controller function. -* In this example, the `setUrl()` and `readUrl()` functions copy the game state to/from the URL's -hash so the browser's back button will undo game steps. See deep-linking. This example calls {@link -api/ng.$rootScope.Scope#methods_$watch $watch()} to set up a listener that invokes `readUrl()` when needed. diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc index a4fd72a3..3a5fb9f8 100644 --- a/docs/content/tutorial/the_end.ngdoc +++ b/docs/content/tutorial/the_end.ngdoc @@ -8,8 +8,6 @@ previous steps using the `git checkout` command. For more details and examples of the Angular concepts we touched on in this tutorial, see the {@link guide/ Developer Guide}. -For several more examples of code, see the {@link cookbook/ Cookbook}. - When you are ready to start developing a project using Angular, we recommend that you bootstrap your development with the {@link https://github.com/angular/angular-seed angular-seed} project. |