AngularJs multi-view and routing usage, angularjs View

AngularJs multi-view and routing usage, angularjs View

Using AngularJs for multi-view and routing is not convenient. There are many pages in the development process, and these pages have the same part, for example, the header and tail of a page are usually the same, and the changes are the main part. Some projects managed by the backend are also the headers, tails, and menus, all the changes are the content on the right. Using AngularJs's multiple views and routes can easily achieve this effect. Before implementation, you need to prepare two files, one is angular's main JS file and the other is angular's routing JS file, as shown below:

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

You can use angular by introducing these two JS files on the page. Here we will divide the implementation into the following steps:

1. Create a simple layout File

2. Create a module and write it in the current layout file. You can also open a new js file. It is better to separate it for ease of management.

3. Create a routing rule

4. If it is useful to the Controller, create a controller.

The following describes how to achieve this effect:

1.

<! DOCTYPE html> 



In angularjs, the ng-view command is used together with the route.
2. Create a module

var mainApp=angular.module("main.app",['ngRoute']);



To use a route, you must add the ngRoute dependency
3. Create a routing rule

MainApp. config (["$ routeProvider", function ($ routeProvider) {$ routeProvider. when ("/", {template: "

As shown above, we have used the when method to set two routes. The otherwise method is called when no route match exists. It is used to set a default prompt route. It can be seen that there are two routes, one is the template used, and the other is the template path used. In fact, there are many attributes that can be configured in the routing, such as configuring the controller,
Resolve, redirectTo.
Configure the controller in the route as follows:

MainApp. config (["$ routeProvider", function ($ routeProvider) {$ routeProvider. when ("/", {template: "You can also write it as follows:


MainApp. config (["$ routeProvider", function ($ routeProvider) {$ routeProvider. when ("/", {template: "

If you need to use resolve, you must configure the Controller; otherwise, an error will be reported. If you use the resolve attribute, angularjs will inject the attribute key into the configured controller, using the following:

MainApp. config (["$ routeProvider", function ($ routeProvider) {$ routeProvider. when ("/", {template: "

The list object can be:

Key: The name injected into the controller.
Factory: it can be a service factory or a return value.
In the controller, obtain the key injected above.

mainApp.controller("MainController",["name","$scope",function(name,$scope){    $scope.name=name;}]);

RedirectTo is used for forwarding as follows:

MainApp. config (["$ routeProvider", function ($ routeProvider) {$ routeProvider. when ("/", {template: "

If you access the first route, because the redirectTo attribute is configured in it, it will be forwarded to the route configured in it.
The route configuration is complete. If you need to obtain the route parameters, you can obtain them through the Controller.
$ RouteParams:
You can use it to obtain route parameters. For example, we configure the route to the following format:

mainApp.config(["$routeProvider",function($routeProvider){    $routeProvider.when("/index/:name",{        templateUrl:"index.html"    });}]);
The ACCESS format is/index/zhangsan. The parameter format obtained through 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 relevant information in the request 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 $ location service provides the following methods:

1. path (); to obtain the path of the current page, you can also set a new path ("/"), and then change it to the "/" route.
$ Location. path (); // get
$ Location. path ("/"); // set
2. replace ()
If you do not want to click the back button after the jump (this is useful for redirection after logon.) AngularJS provides replace () method To achieve this function:
$ Location. path ('/home ');
$ Location. replace ();
// Or
$ Location. path ('/home'). replace ();

3. absUrl ()
The absUrl () method is used to obtain the complete Encoded URL:
$ Location. absUrl ()
4. hash ()
The hash () method is used to obtain the hash fragment in the URL:
$ Location. hash (); // returns the current hash segment
5. host ()
The host () method is used to obtain the host in the URL:
$ Location. host (); // host of the current URL
6. port ()
The port () method is used to obtain the port number in the URL:
$ Location. port (); // The port of the current URL
7. protocol ()
The protocol () method is used to obtain the protocol in the URL:
$ Location. protocol (); // protocol of the current URL
8. search ()
The search () method is used to obtain the query string in the URL:
$ Location. search ();
We can introduce new query parameters to this method to modify the query string section in the URL:
// Query with object settings
$ Location. search ({name: 'ari ', username: 'auser '});
// Set the query with a string
$ Location. search ('name = Ari & username = auser ');
The search method can accept two parameters.
Search (optional, string or object)
This parameter indicates the new query parameter. The value of the hash object can be an array.
ParamValue (optional, string)
If the search parameter is of the string type, paramValue overwrites the corresponding
Value. If the value of paramValue is null, the corresponding parameter will be removed.
9. url ()
The url () method is used to obtain the URL of the current page:
$ Location. url (); // string of the URL
If a parameter is set when the url () method is called, the current URL is set and modified,
Query string and hash, and return $ 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)
Path to be modified.