Briefly introduces the definition and use of AngularJS Routing, and angularjsrouting

Briefly introduces the definition and use of AngularJS Routing, and angularjsrouting

In a single page application, jump between views is particularly important. As the application becomes more and more complex, we need to use a method to precisely control the page to be presented to users.

We can introduce different templates on the home page to support switching between different pages, but the disadvantage is that more and more embedded code makes it difficult to manage at last.

Using the ng-include command, we can integrate many templates into the view, but we have a better way to deal with this situation. We can split the view into a layout and a template view, then, the view is displayed based on the specific URL accessed by the user.

We can splice these fragments in a layout template.

AngularJS declares routes on $ routeProvider (the provider of the $ route service) to implement the above idea.

With $ routeProvider, we can make better use of the browsing history API and allow users to save the current path as a bookmark for future use.

To set routes in our applications, we need to do two things: first, we need to point out where we store the layout template that will store the new page content. For example, if we want to add headers and footer to all pages, we can design a layout template as follows:

The ng-view command renders the template at high speed $ routeProvider
Second, we need to configure our route information. We will configure $ routeProvider in the Application
$ RouteProvider provides two ways to process routes: when and otherwise. Method when receives two parameters. The first parameter is set to $ location. path (). (It is no problem to directly use)

Definition
It is very easy to define routes. You can inject ngRoute dependencies into the mian module of our application.
angular.module('myApp', ['ngRoute']) .config(function($routeProvider) {});
Now, we can define a route for the application. $ RouteProvider is injected into the. config () method in the routing module. The code above demonstrates two methods for defining routes.
When ()
The when () method has two parameters. We want to match the url of the browser and the route operation object. Generally, main route uses "/" to represent the parameter. You can also define the URL parameter. In the controller, $ routeParams is used to obtain the url parameter.
TemplateUrl: view template for Route jump
Controller: controller
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 the specified route
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: '/'  });})
Use
How do I use a custom route? We want to tell which part of the angular page we want to convert. This requires the ng-view command.
<div class="header">My page</div><div ng-view></div><span class="footer">A footer</span>

In this way, only <div ng-view> </div> is updated, and the header/footer remains unchanged.
Articles you may be interested in:

 

 
  
How to Use AngularJS to secure routes
 
  
Angularjs makes a simple routing function demo