Cookbook: Deep Linking

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:

The two partials are defined in the following URLs:

    <script>
     angular.module('deepLinking', ['ngSanitize'])
       .config(function($routeProvider) {
          $routeProvider.when("/welcome",  {template:'./examples/welcome.html',  controller:WelcomeCntl});
          $routeProvider.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
       });

     AppCntl.$inject = ['$scope', '$route']
     function AppCntl($scope, $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();
     }
    </script>
    <div ng-controller="AppCntl">
      <h1>Your App Chrome</h1>
      [ <a href="welcome">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>
 
   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/);
   });
 

Things to notice