Definition and use of angular routing

original link: http://www.ng-newsletter.com/advent2013/#!/day/2 first, what is routing (routing)

Almost all non-trivial, Non-demo single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page (the Settings page is different from the control page, the login screen is different from the account Information page ....) It means a lot of different features of the page.

We can use angular to implement this function simply and elegantly (control jumps between pages ... ）

Second, installation

Using the angular routing feature requires the installation of the routing module ... (The introduction of angular-route.js is possible)

third, the definition

Defining the route is easy, and injecting ngroute dependency into our application Mian module is possible.

?

12	angular.module(‘myApp‘, [‘ngRoute‘])  .config(function($routeProvider) {});

Now we can define the route for the application. The . config () method inside the routing module injects a $routeProvider, which shows us two ways to define a route.

When ()

The When () method has two parameters, we want to match the browser URL and the routing action object. In general, the main route often uses "/" to express, you can also define the URL parameters, in the controller using $routeparams to get the URL parameters.

• Templateurl: A view template that represents a routed jump

• Controller: Controllers

?

1234567891011

angular.module(‘myApp‘, [‘ngRoute‘])    .config(function($routeProvider) {      $routeProvider        .when(‘/‘, {          templateUrl: ‘views/main.html‘,          controller: ‘MainCtrl‘        })        .when(‘/day/:id‘, {          templateUrl: ‘views/day.html‘,          controller: ‘DayCtrl‘        })

otherwise ()

Otherwise () defines the route to jump when the application cannot find a specified route

?

123456789101112131415

angular.module(‘myApp‘, [‘ngRoute‘]).config(function($routeProvider) {  $routeProvider    .when(‘/‘, {      templateUrl: ‘views/main.html‘,      controller: ‘MainCtrl‘    })    .when(‘/day/:id‘, {      templateUrl: ‘views/day.html‘,      controller: ‘DayCtrl‘    })    .otherwise({      redirectTo: ‘/‘    });})

Iv. Use of

How do you define a route? We're going to tell angular which part of the page we want to convert, which requires the use of the Ng-view directive.

?

123	< div   class = > my page</ div > < div  ng-view></ div > < span  class = "footer" >a footer</ span >

This will only <div ng-view></div> will be updated, Header/footer always remain the same

Definition and use of angular routing