Mastering Web Application

Chapter 6

One route corresponds to one rectangle on the screen

As you now know, the ng-view directive is used to indicate the DOM element whose
content should be replaced with the content defined by the route (via the template
or templateUrl property). This immediately tells us that in the $route service, a
route can describe content for only one "hole" in the UI.

In reality, there are times where we would like to fill in multiple areas of a screen
in response to a route change. A typical example would involve a menu that might
be common to several routes and should change as we navigate from one area of an
application to the other. The following figure illustrates this:

ADMIN

MENU

ADMIN

CONTENT

NG-VIEW

NAVIGATION BAR

Taking the preceding figure as an example, we would like to keep the ADMIN
MENU if a user navigates within the administration area. The only way to achieve
this navigation scheme with the current version of AngularJS is to use a combination
of the ng-include directive and the trick described in the next section.

Handling multiple UI rectangles with ng-include

Route definition objects are regular JavaScript objects and can contain custom
properties, in addition to the ones interpreted by AngularJS. Defining a custom
property won't interfere with the default $route behavior, but the AngularJS routing
system will preserve those properties, so we can access them later on. Given this
observation, we could define the custom menuUrl and contentUrl properties on a
route level as follows:

$routeProvider.when('/admin/users/new', {

templateUrl:'admin/admin.tpl.html',