diff options
| author | Misko Hevery | 2011-04-29 15:18:27 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:28:38 -0700 |
| commit | 11e9572b952e49b01035e956c412d6095533031a (patch) | |
| tree | 04dbf96802f552693d44c541c0d825a2769e3d57 /docs/cookbook.deeplinking.ngdoc | |
| parent | b6bc6c2ddf1ae1523ec7e4cb92db209cd6501181 (diff) | |
| download | angular.js-11e9572b952e49b01035e956c412d6095533031a.tar.bz2 | |
Move documentation under individual headings
Diffstat (limited to 'docs/cookbook.deeplinking.ngdoc')
| -rw-r--r-- | docs/cookbook.deeplinking.ngdoc | 114 |
1 files changed, 0 insertions, 114 deletions
diff --git a/docs/cookbook.deeplinking.ngdoc b/docs/cookbook.deeplinking.ngdoc deleted file mode 100644 index 7d69ee84..00000000 --- a/docs/cookbook.deeplinking.ngdoc +++ /dev/null @@ -1,114 +0,0 @@ -@workInProgress -@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 `#` 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> - AppCntl.$inject = ['$route'] - function AppCntl($route) { - // define routes - $route.when("", {template:'./examples/welcome.html', controller:WelcomeCntl}); - $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl}); - $route.parent(this); - - // initialize the model to something useful - this.person = { - name:'anonymous', - contacts:[{type:'email', url:'anonymous@example.com'}] - }; - } - - function WelcomeCntl($route){} - WelcomeCntl.prototype = { - greet: function(){ - alert("Hello " + this.person.name); - } - }; - - function SettingsCntl(){ - this.cancel(); - } - SettingsCntl.prototype = { - cancel: function(){ - this.form = angular.copy(this.person); - }, - - save: function(){ - angular.copy(this.form, this.person); - window.location.hash = "#"; - } - }; - </script> - <div ng:controller="AppCntl"> - <h1>Your App Chrome</h1> - [ <a href="#">Welcome</a> | <a href="#/settings">Settings</a> ] - <hr/> - <span style="background-color: blue; color: white; padding: 3px;"> - Partial: {{$route.current.template}} - </span> - <ng:view style="border: 1px solid blue; margin: 0; display:block; padding:1em;"></ng:view> - <small>Your app footer </small> - </div> - </doc:source> - <doc:scenario> - 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/); - }); - </doc:scenario> -</doc:example> - - - -# Things to notice - -* Routes are defined in the `AppCntl` class. The initialization of the controller causes the - initialization of the {@link angular.service.$route $route} service with the proper URL routes. -* The {@link angular.service.$route $route} service then watches the URL and instantiates the - appropriate controller when the URL changes. -* The {@link angular.widget.ng:view ng:view} 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 programatically or by the user. |
