[Angularjs] View and Routing (ii)

Write in front

The previous article mainly introduces the basic concepts of view and routing, and at the end of the article, a simple use case. This article will continue to learn the configuration of the route and the description of the relevant parameters.

Series Articles

[Angularjs]ng-select and Ng-options

[Angularjs]ng-show and Ng-hide

[Angularjs] View and Route (i)

Parameters

When method, the previous article also mentions the When method to configure the route, and what attributes the second parameter of the When method can receive, which is listed here.
1. Controller

Controller: ' Mycontroller '// or controller:function($scope) {}

<script>varApp = Angular.module (' app ', [' Ngroute ']); App. Config ([' $routeProvider ',function($routeProvider) {//This specifies the route$routeProvider. When (‘/‘, {templateurl:'./views/login.html ', Controller:' Logincontroller '}). When ('/login ', {templateurl:'./views/login.html ', Controller:' Logincontroller '                })        }]); //ControllerApp.controller (' Logincontroller ',function($scope) {}); </script>

If the When method is configured with the Controller property, the specified controller is associated with the new scope created by the route. If the parameter value is a character type, the corresponding content is found in all registered controllers in the module and then associated with the route, and if the parameter value is a function type, the function is used as the controller of the DOM element in the template and associated with the template.
2. Template

Template: ' <div>
Angularjs renders the HTML template in the configuration object to the corresponding DOM element with the Ng-view directive.
3, Templateurl
Templateurl: ' views/template_view.html '
The app reads the view (or reads from $templatecache) through XHR based on the path specified by the Templateurl property. If the template can be found and read, Angularjs renders the contents of the template into a DOM element with a ng-view instruction.
This is the most common way to use it, for the sake of code cleanliness.
4, Resolve
resolve:{           ' data ': [' $http ',function($http) {                    return $http. Get ('/api ') ). Then (                             function Success (response) {return  response.data;},                              function Error (reason) {returnfalse;}            );}      ];}
If the Resolve property is set, Angularjs injects elements from the list into the controller. If these dependencies are promise objects, they are resolve and set to a value before the controller is loaded and $routechangesuccess is triggered.
The list object can be:
Key, the key value is the name of the dependency that will be injected into the controller.
A factory, which can be a service name or a return value, is a function that will be injected into the controller or promise object that can be resolve.
In the example above, resolve sends a $HTTP request and replaces the value of data with the value of the returned result. The key data in the list is injected into the controller, so it can be used in the controller.
5, Redirectto
Redirectto: '/home '// or redirectto:function(route,path,search)
If the value of the Redirectto property is a string, the path is replaced with this value and the route change is triggered based on the target path.
If the value of the Redirectto property is a function, then the path is replaced with the return value of the function, and the route change is triggered based on the target path.
If the value of the Redirectto property is a function, Angularjs will pass in the following three arguments when it is called:

 
 

  
  
 
   
The route parameters that are extracted from the current path.
 
   
Current path
 
   
The query string in the current URL.
 
  
 
 
6, Reloadonsearch
If the Reloadonsearch option is set to True (the default), the route is reloaded when $location.search () changes. If set to False, the route is not reloaded when the query string portion of the URL changes. This tip is useful for requirements such as nesting and in-place paging.
Angular.module (' MyApp ', []). config ([function($routeProvider) {$routeProvider. When ('/')  ' homecontroller' views/home.html '). When ('/inbox/:name 'inboxcontroller '  ' views/inbox.html'/'}]);
In the above example, the When method is used to set up two routes, and the otherwise method is called when there is no route match. We use it to set a default jump to the '/' path of the route.
When the browser loads the Angularjs app, the URL is set to the path that the default route points to. Unless we load a different URL in the browser, the route to the '/' path is used by default.
Summarize
The main study of the When method of the second parameter of some properties, in the project, often used, here on its specific description of the record, deepen the impression, in the project, but also to do, here is the first practice again theory.
Article from
Angularjs Authoritative Tutorials
[Angularjs] View and Routing (ii)