Briefly explain the definition and use of AngularJS Routing_AngularJS

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

We can support switching between different pages by introducing different templates into the main page, but the disadvantage of doing so is that more and more embedded codes make it difficult to manage in the end.

We can integrate many templates into the view through the ng-include directive, but we have a better way to handle this situation. We can break up the view into layout and template views, and then according to the specific user access URL to display the desired view

We can put these "pieces" together in a layout template

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

Using $routeProvider, we can better utilize the browsing history API and allow users to save the current path as a bookmark for future use

To set up routing in our application, we need to do two things: First, we need to indicate where we will store the layout template where the new page content will be stored. For example, if we want to add headers and footers to all pages, we can design the layout template like this:

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

The ng-view directive will use high-speed $routeProvider where to render the template

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

$routeProvider provides two methods to handle routing: when and otherwise. The method when receives two parameters, the first one is set $location.path(). (There is no problem in using "//" directly)

Definition
It is very easy to define routes, just inject the ngRoute dependency into our application main module

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

Now, we can define routes for the application. $routeProvider is injected into the .config() method in the routing module. The above code shows us two methods for defining routes.

when()

The when() method has two parameters, the browser url we want to match and the routing operation object. Generally, main route is often represented by "/", and URL parameters can also be defined. In the controller, $routeParams is used to obtain the url parameters.

templateUrl: view template representing 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 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 to use the defined route? We need to tell angular which part of the page we want to convert, which requires the use of the ng-view directive

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

In this way, only

will be updated, and header/footer will always remain unchanged