Angularjs more attention to the use of graphs and routes

Using Angularjs to take a long view of the map and the route is convenient, in the development process, there are many pages, and these pages have the same parts, such as the head and tail of the page is usually the same, the change is the main part, there are some back-end management of some projects, usually unchanged is the head, The tail and the menu section, the change is the right part of the content, using ANGULARJS more attention to the map and routing can be very convenient to achieve this effect. Before the implementation of the need to prepare two files, one is the main JS file angular, and the other is the angular of the route JS file, as follows:

<script src= "Js/angular.min.js" ></script><script src= "Js/angular-route.min.js" ></script>

The introduction of these two JS files on the page can be used angular, here will achieve this effect is divided into the following steps:

1. Create a simple layout file

2. Create a module, can be written in the current layout file can also open a new JS file, in order to facilitate management or separate better

3. Create a routing rule

4. If it is useful to the controller, then create the controller

The next step is to implement this effect:

1.

<! DOCTYPE html>

In Angularjs, it is a combination of ng-view directives and routes.
2. Create a module
var mainapp=angular.module ("Main.app", [' Ngroute ']);

Because you want to use routing, you must add Ngroute dependencies
3. Create a routing rule
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/", {        Template: "
As above, we have set up two routes using the When method. The otherwise method is called when there is no route match, and it sets a default prompt route. As can be seen here, there are two central, one is the use of the template, the other is the template path used, in fact, there are many properties in the route can be configured, such as configuration controller,
Resolve,redirectto.
Configure the controller in the route as follows:
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/", {        Template: "
Can also be written like this
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/", {        Template: "
If you need to use resolve, you must configure the controller, otherwise you will get an error, if you use the Resolve property, then Angularjs will inject the property's key into the configured controller, using the following:
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/", {        Template: "

The list object can be:
Key: Is the name injected into the controller
Factory: Can be a service factory, or it can be a return value
In the controller, this gets the key injected above
Mainapp.controller ("Maincontroller", ["Name", "$scope", function (name, $scope) {    $scope. name=name;}]);
The use of Redirectto, its role is to do forwarding, as follows:
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/", {        Template: "

If the first route is accessed because the Redirectto attribute is configured inside, it will go to the route it is configured on.
The configuration of the route is completed, and if the parameters of the route need to be obtained, it can be obtained through the controller.
$routeParams:
It can be used to get the route parameters, such as we configure the route to the following format:
Mainapp.config (["$routeProvider", function ($routeProvider) {    $routeProvider. When ("/index/:name", {        Templateurl: "index.html"    });}]);
The format of the access is/index/zhangsan, so the parameter format obtained by the controller is {"name": "Zhangsan"}, as follows:
Mainapp.controller ("Maincontroller", ["$scope", "$routeParams", Function ($scope, $routeParams) {    $scope. name=$ Routeparams;}]);
$location service, which can be used to parse the information in the requested URL, the controller uses the following:
Mainapp.controller ("Maincontroller", ["$scope", "$<span style=" font-family:arial, Helvetica, Sans-serif; " >location</span> ", Function ($scope, $<span style=" font-family:arial, Helvetica, Sans-serif; " >location</span>) {    }]);

The following methods are available under $location service:
1.path (); Gets the path to the current page, or you can set a new path ("/") so that the route is modified to "/"
$location. Path ();//Get
$location. Path ("/");//settings
2.replace ()
ANGULARJS provides the replace () method to do this if you want the user to not click the Back button after a jump (for a jump after a login that takes place after a jump):
$location. Path (' home ');
$location. replace ();
Or
$location. Path (' home '). replace ();
3.ABSURL ()
The Absurl () method is used to obtain the full URL after encoding:
$location. Absurl ()
4.hash ()
The hash () method is used to get the hash fragment in the URL:
$location. hash (); Returns the current hash fragment
The 
 5. Host () 
 Host () method is used to get the host in the URL: 
 $location. Host ();//hosts for the current URL 
 6. Port ()   the 
 Port () method is used to get the port number in the URL: 
 $location. Port ()///ports of the current URL 
 7. The Protocol () 
 Protocol () method is used to get the protocol in the URL: 
 $location. Protocol ();//protocol for current URL The 
 8. Search () 
 Search () method is used to get the query string in the URL: 
 $location. Search ();   
 We can pass in the new query parameter to this method to modify the query string part in the URL: 
//Set query with Object 
 $location. Search ({name: ' Ari ', username: ' Auser '});   
//Set query with string 
 $location. Search (' Name=ari&username=auser ');   The 
 Search method can accept two parameters. 
     Search (optional, string or object) 
 This parameter represents the new query parameter. The value of a hash object can be an array. 
     paramvalue (optional, string) 
 If the type of the search parameter is a string, then Paramvalue overrides the corresponding 
 value in the URL for the value of the parameter. If the value of paramvalue is null, the corresponding parameter is removed. The 
 9. URL () 
 URL () method is used to get the URL of the current page: 
 $location. URL (); The URL's string 
 If a parameter is passed when the URL () method is called, the current URL is set and modified. This modifies the path in the URL, the 
 query string, and the hash, and returns $location. 
//Set a new url  
 $location. URL ('/home?name=ari#hashthing ');   the 
 URL () method can accept two parameters. 
    url (optional, string) 
 The base prefix of the new URL. 
Replace (optional, string)
The path that you want to modify.


Angularjs more attention to the use of graphs and routes