ANGULARJS Tutorial Routing and multi-view detailed _angularjs

In this step, you will learn how to create a layout template and build an application with multiple views through the routing function.

Please reset the working directory:

Git checkout-f step-7

Note that now when you go to app/index.html, you are redirected to App/index.html#/phones and the same list of phones is displayed in the browser. When you click on a mobile link, a phone details list is also displayed.

The most important differences between steps 6 and 7 are listed below. You can see the whole difference in the GitHub.

Multi-view, routing, and layout templates

Our applications are slowly evolving and becoming more complex. Prior to step 7, the application provided a simple interface (a list of all mobile phones) to our users, and all the template code was in the index.html file. The next step is to add a page that shows the details of each phone in our list.

To increase the detail view, we can expand the index.html to include two views of the template code, but this will quickly bring us great trouble. Instead, we want to turn the index.html template into a "layout template." This is the common template that we apply to all views. The other "local layout templates" are then filled in with the current "route" to form a complete view to show the user.

The routes applied in Angularjs are declared through $routeprovider, which is the provider of the $route service. This service makes it easy to integrate the controller, view template, and URL of the current browser. By applying this feature we can implement deep links that allow us to use the history of the browser (fallback or forward navigation) and bookmarks.

About Dependency Injection (DI), injector (Injector) and service provider (Providers)

As you've learned from the previous, dependency injection is the core feature of ANGULARJS, so you need to know a little bit about how this guy works.

When the application is booted, ANGULARJS creates an injector, which is required by all of the services that depend on the injection after it is applied. The injector itself does not know what $http and $route do, but it is not aware of the existence of these services unless it is configured at the time of the module definition. The only responsibility of the injector is to load the specified service module, register all defined service providers in these modules, and inject dependency (service) to a specified function when needed. These dependencies are instantiated through their provider "lazy" (loaded only if needed).

A provider is an object that provides (creates) a service instance and provides an external API interface that can be used to control the creation and run-time behavior of a service. For $route Services, $routeProvider provides an API interface that allows you to define routing rules for your application via API interfaces.

The Angularjs module solves two problems of removing the global state from the application and providing methods to configure the injector. Unlike the two modules (Angularjs two libraries) of AMD or Require.js, the Angularjs module does not attempt to solve problems such as the sequence of script loading and lazy script loading. These goals have nothing to do with the problems that angularjs to solve, so these modules can coexist to achieve their goals.

APP Module

App/js/app.js

Angular.module (' Phonecat ', []).
 Config ([' $routeProvider ', function ($routeProvider) {
 $routeProvider.
   When ('/phones ', {templateurl: ' partials/phone-list.html ',  Controller:phonelistctrl}).
   When ('/phones/:p Honeid ', {templateurl: ' partials/phone-detail.html ', Controller:phonedetailctrl}).
   Otherwise ({redirectto: '/phones '});
}];

To configure routing for our applications, we need to create a module for the application. We call this module Phonecat, and by using CONFIGAPI we ask to inject $routeprovider into our configuration function and use $ROUTEPROVIDER.WHENAPI to define our routing rules.

Note that the provider can be injected at the same time in the injector configuration phase, but once the injector is created and the service instance is created, they are no longer available to the outside world.

Our routing rules are defined as follows

When the URL map segment is/phones, the mobile list view is displayed. To construct this view, Angularjs uses the phone-list.html template and the Phonelistctrl controller.

When the URL map segment is/phone/:p Honeid, the phone details view is displayed. Here: Phoneid is the variable part of the URL. To construct a detailed view of the phone, Angularjs uses the phone-detail.html template and the Phonedetailctrl controller.
We reuse the previously created Phonelistctrl controller, and we add a new Phonedetailctrl controller to the detailed view of the phone and store it in a app/js/controllers.js file.

$route. Otherwise ({redirectto: '/phones '}) statement triggers redirection to/phones when the browser address does not match any of our routing rules.

Note that in the second Routing declaration: The use of the Phoneid parameter. The $route service uses the routing declaration/phones/:p Honeid as a template that matches the current URL. All variables declared by: symbol (where the variable is phones) are extracted and stored in the $routeparams object.

In order for our application to guide our newly created module, we also need to specify the name of the module on the value of the Ngapp instruction:

App/index.html

<!doctype html>
<html lang="en" ng-app="phonecat">
...

Controller

App/js/controllers.js

...
function Phonedetailctrl ($scope, $routeParams) {
 $scope. Phoneid = $routeParams. Phoneid
}

Phonedetailctrl $inject = [' $scope ', ' $routeParams '];

Template

$route services are usually used in conjunction with Ngview directives. The role of the Ngview directive is to load the corresponding view template into the layout template for the current route.

App/index.html

<html lang="en" ng-app="phonecat">
<head>
...
 <script src="lib/angular/angular.js"></script>
 <script src="js/app.js"></script>
 <script src="js/controllers.js"></script>
</head>
<body>

 <div ng-view></div>

</body>
</html>

Note that we have removed most of the code from the index.html template, and we have only placed a <div> container, which has a Ng-view attribute. The code we removed is now placed in the phone-list.html template:

App/partials/phone-list.html

<div class= "Container-fluid" >
 <div class= "Row-fluid" >
  <div class= "span2" >
   <!-- Sidebar content-->

   Search: <input ng-model= "Query" >
   Sort by:
   <select ng-model= "Orderprop" >
    <option value= "name" >Alphabetical</option>
    <option value= "age" >newest</option >
   </select>

  </div>
  <div class= "Span10" >
   <!--body content-->

   <ul class= "Phones" >
    <li ng-repeat= "Phone in phones | filter:query | orderby:orderprop" class= "thumbnail" & gt;
     <a href= "#/phones/{{phone.id}}" class= "thumb" ></a>
     <a Href= "#/phones/{{phone.id}}" >{{phone.name}}</a>
     <p>{{phone.snippet}}</p>
    </ li>
   </ul>

  </div>
 </div>
</div>

We also add a placeholder template for the phone details view.

App/partials/phone-detail.html

Tbd:detail view for {{Phoneid}}

Note that the Phonelistctrl or Phonedetailctrl controller properties are not added to our layout template!

Test

To automatically verify that everything is well integrated, we need to write some end-to-end tests, navigate to a different URL, and then verify that the correct view is rendered.

...
 It (' should redirect index.html to Index.html#/phones ', function () {
  browser (). NavigateTo ('. /.. /app/index.html ');
  Expect (browser (). location (). URL ()). Tobe ('/phones ');
 });
...

 Describe (' Phone detail View ', function () {

  Beforeeach (function () {
   browser (). NavigateTo (). /.. /app/index.html#/phones/nexus-s ');


  It (' should display placeholder page with Phoneid ', function () {
   Expect (binding (' Phoneid ')). Tobe (' nexus-s ');
  });
 });

You can now refresh your browser and run the End-to-end test again, or you can run it on a ANGULARJS server.

Practice

Try adding a {{Orderprop}} binding to the index.html and nothing changes when you're on the phone list view. This is because the Orderprop model is only visible under the scope of Phonelistctrl management, which is related to the <div ng-view> element. If you add the same binding to the phone-list.html template, the binding will be rendered as you intended.

Summarize

After setting up the routing and implementing the Mobile List view, we can now go to step 8来 to implement the mobile details view.

Above on the ANGULARJS Routing and multiple views of the data collation, follow-up continue to supplement the relevant knowledge, thank you for your support of this site!