A brief introduction to the definition and use of Routing routing AngularJS

In single-page applications, jumping between views is particularly important. As applications become more complex, we need a way to control exactly when and what page is presented to the user.

It is possible to support switching between pages by introducing different templates on the main page, but the downside of this is that more and more embedded code becomes unmanageable.

With the ng-include directive we can integrate a number of templates into a view, but we have a better way to handle this situation by breaking up the view into layout and template views and then displaying the desired view based on the specific URL that the user is accessing

These "pieces" can be pieced together in one layout template

AngularJS implements the above concept by declaring routes on $routeProvider(the provider of the $route service)

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

To set up the route in our application, we need to do two things: First, we need to indicate where our layout template is to hold the content of the new page. For example, if we wanted to have header and footer on all pages, we could design the layout template like this:

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

ng- The view directive will speed $routeProvider where to render templates

Second, we need to configure our routing information. We will configure $routeProvider in the application

$routeProvider provides two ways to handle routing: when and otherwise. The method when takes two arguments. The first one is set to $location.path (). (It's OK to just use "//")

define
Defining the route is very easy, just inject the ngRoute dependency into our application mian module

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

We are now ready to define the route for our application. The route module injects $routeProvider into the.config () method. The above code demonstrates two methods for defining the route.

when()

The when() method takes two parameters that we want to match to the browser url and the routing operation object. 1 a main route often use "/", can also define URL parameter, use $in controller routeParams url parameters.

ES68en: An ES69en template that represents a 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 to if 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
Now that you've defined the route, how do you use it? To tell the angular which part of the page we want to transform, we need to use the ng-view directive

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

So there's only < div ng-view > < /div > Will be updated, header/footer will always remain the same