AngularJS "routing" definition concept, detailed use-AngularJS learning materials tutorial, angularjs learning materials

AngularJS "routing" definition concept, detailed use-AngularJS learning materials tutorial, angularjs learning materials

This is a small part of learning materials. In theory, it is only for your future learning needs, but you still need to take it seriously.
The following content is for reference only. Please use it with caution

AngularJS "routing" definition concept

AngularJS has been very popular recently. Many colleagues, classmates, and friends are using it. It is not recommended that I study it. When I hear this name, it will be very popular.

Nothing is explained about AngularJS. This is very interesting.

Here we recommend the learning website and cainiao tutorials. Although many of the tutorials are simple and not described in many cases, they are a good choice for getting started.

1. What isWhat about AngularJS routing?

AngularJS routing allows us to access different contents through different URLs. AngularJS can be used to implement single-page Web applications with multiple views

1 http://mibear.com/#/first3 http://mibear.com/#/second5 http://mibear.com/#/third

The above is its display form. Does the content after the # sign look like a server request? In fact, it will be ignored by the browser during the request. What we need is to implement the function of # content after the client implementation. AngularJS routes are passed through# + MarkIt helps us to differentiate different logical pages and bind different pages to the corresponding controller.

2. RouteConfigure an instance

 

1 
 
3. Resolution
1 // contains the ngRoute module's 2 angular. module ('routingdemoapp', ['ngroup'])
1 // use the ngView command to display the Routing Switching page 2 <div ng-view> </div>
1 // One of the route Configuration Settings 2. config (function ($ routeProvider) {3 $ routeProvider. 4 when ('/a1', {5 templateUrl: 'a1.html', 6 controller: 'a1' 7 }). 8 when ('/a2', {9 templateUrl: 'a2.html ', 10 controller: 'a2 '11 }). 12 otherwise ({13 redirectTo: '/a2' 14}); 15}); 16 17 // templateUrl, insert the HTML template file address in ng-view
18 // controller, function, string, or array type. Execute the controller function on the current template to generate a new scope.
20 // redirectTo, the redirection address, which can be the page you want to first load
 
1 <script type = "text/ng-template" id = "a1.html"> 2 
The corresponding HTML file is directly set to a1.html and a2.html. The path must be correct (put in the same directory)

 
4. effect Style
So what is the final look like?
Click different labels. The following <divNg-view = ""> Different pages are loaded. The page here can be a local page.