aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/cookbook/deeplinking.ngdoc
diff options
context:
space:
mode:
authorJulie2014-01-23 15:14:02 -0800
committerCaitlin Potter2014-01-28 14:12:52 -0500
commitce37ae28687167f7b4274ba547f013980126a219 (patch)
treeb6e3164a0edad4a19f4afe298896178e6772103f /docs/content/cookbook/deeplinking.ngdoc
parent95f0bf9b526fda8964527c6d4aef1ad50a47f1f3 (diff)
downloadangular.js-ce37ae28687167f7b4274ba547f013980126a219.tar.bz2
docs(cookbook): remove the cookbook docs
The cookbook docs are now superceded by the guide. They are no longer available in any menus and the only way to find them is to search for them. Remove! Closes #5967
Diffstat (limited to 'docs/content/cookbook/deeplinking.ngdoc')
-rw-r--r--docs/content/cookbook/deeplinking.ngdoc151
1 files changed, 0 insertions, 151 deletions
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.