33@name Cookbook: Deep Linking
44@description
55
6-
76Deep linking allows you to encode the state of the application in the URL so that it can be
87bookmarked and the application can be restored from the URL to the same state.
98
10-
119While <angular/> does not force you to deal with bookmarks in any particular way, it has services
1210which make the common case described here very easy to implement.
1311
14-
1512# Assumptions
1613
17-
1814Your application consists of a single HTML page which bootstraps the application. We will refer
1915to this page as the chrome.
2016Your 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
2521have multiple partials, but a single partial is the most common construct. This example makes the
2622partial boundary visible using a blue line.
2723
28-
2924You can make a routing table which shows which URL maps to which partial view template and which
3025controller.
3126
32-
3327# Example
3428
35-
3629In this example we have a simple app which consist of two screens:
3730
38-
3931* Welcome: url `#` Show the user contact information.
4032* Settings: url `#/settings` Show an edit screen for user contact information.
4133
4234
43-
44-
4535The two partials are defined in the following URLs:
4636
47-
4837* {@link ./examples/settings.html}
4938* {@link ./examples/welcome.html}
5039
51-
5240<doc:example>
5341 <doc:source>
5442 <script>
@@ -59,23 +47,20 @@ The two partials are defined in the following URLs:
5947 $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
6048 $route.parent(this);
6149
62-
6350 // initialize the model to something useful
6451 this.person = {
6552 name:'anonymous',
6653 contacts:[{type:'email', url:'anonymous@example.com'}]
6754 };
6855 }
6956
70-
7157 function WelcomeCntl($route){}
7258 WelcomeCntl.prototype = {
7359 greet: function(){
7460 alert("Hello " + this.person.name);
7561 }
7662 };
7763
78-
7964 function SettingsCntl(){
8065 this.cancel();
8166 }
@@ -84,7 +69,6 @@ The two partials are defined in the following URLs:
8469 this.form = angular.copy(this.person);
8570 },
8671
87-
8872 save: function(){
8973 angular.copy(this.form, this.person);
9074 window.location.hash = "#";
@@ -117,12 +101,8 @@ The two partials are defined in the following URLs:
117101
118102
119103
120-
121-
122-
123104# Things to notice
124105
125-
126106* Routes are defined in the `AppCntl` class. The initialization of the controller causes the
127107 initialization of the {@link api/angular.service.$route $route} service with the proper URL
128108routes.
0 commit comments