Briefly explain the definition and use of Angularjs routing routing _angularjs

In a single page application, the jump between views is particularly important, as the application becomes more and more complex, we need to use a method to precisely control when to show what the page to the user.

We can support different pages by introducing different templates in the main page, but the downside is that more and more embedded code is ultimately difficult to manage.

With the Ng-include directive we can integrate many templates into the view, but we have a better way to handle this, we can break the view into layout and template view, and then display the desired view based on the specific URL that the user accesses

We can splice these "fragments" in a layout template.

Angularjs the above idea by declaring routes on $routeprovider (the provider of $route service)

With $routeprovider, we can make better use of the browsing History API and enable users to save the current path in a book for later use.

To set the route in our application, we need to do two things: first, we need to point out where we have the layout template where the content of the new page will be stored. For example, if we want to match headers and footer on 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>

Ng-view instructions where the high speed $routeprovider renders the template

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

$routeProvider provides two ways to handle routing: when and otherwise. method when receives two parameters, the first setting $location.path (). (Directly with "//" also no problem)

definition
It's easy to define a route and inject Ngroute dependencies into our application Mian module.

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

Now we can define the route for the application. In the. config () method inside the routing module, $routeprovider is injected, and the above code shows us two methods for defining the route.

When ()

When () method has two parameters, we want to match the browser URL and the routing action object. General main route often use "/" to express, you can also define URL parameters, controller inside the use of $routeparams get URL parameters.

Templateurl: A view 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 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
defines how the route needs to be used? We want 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>

So that only <div ng-view></div> will be updated, and header/footer always remain unchanged.