Angularjs Routing and template instance and routing address simplification method (must see) _angularjs

Recently, a colleague in the study Angularjs, in Routing and template learning process encountered some problems, so today she wrote an example, by the way to share out to those who are learning ANGULARJS partners.

This ANGULARJS development project is very cool, which cool on the development of its model, making the code more clear, more readable, more concise, more maintenance. But in the process of using ANGULARJS development has also made me a headache, that is, the current front-end framework is mostly jquery, many plug-ins are dependent on jquery, Angulajs plugins are few and far between (except Angularui other angular plugins I don't know, and if any of the great God guides can share with me). In order to ensure that the code in the controller is clear, not confusing, we are not allowed to operate the DOM in the controller, so every time we need to manipulate the DOM element is that we are instructions to complete, so there is a lot of jquery plug-ins need to be converted into instructions to operate, This is a very disgusting thing. It's like pulling away, all right ~ ~

Directory:

1.AngularJs Routing Introduction

2.AngularJS Routing Instance

3.AngularJS routing combination with HTML5 mode and webserver redirection simplifies routing address

1.AngularJS Routing Introduction

Angularjs routing is not the same route as back-end MVC. Angularjs front-end routing, which needs to be defined in advance on the template page (Ng-app), define routing Rules (Routeprovider), and then by different URLs, tell (Ng-app) which page (HTML) to load, and then render to (Ng-app) view ( Ng-view). The MVC route requests the Controller's action and returns to view, based on a different URL request, followed by a routing rule. Angularjs is a pure front-end route. Later we will simplify the routing address with the configuration file.

2.AngularJS Routing Instance

We create a new JS file, here I named App.js, in the file we write the following code:

1 Angular.module ("app", [2 ' Ngroute ' 3]) 4. config ([' $routeProvider ', function ($routeProvider) {5 $routeProvider. When ( "/list", {6 Template: "This is the list page" 7}). When ("/detail", {8 Template: "This is the details page" 9}) otherwise ({One redirectto: "/list" 12}) 13 }])

We create a new HTML file named Index.html, and the code and description are as follows:

1 <! DOCTYPE html> 2

Run the instance, the effect is as follows.

Browser Open input Address: Http://localhost:2987/index.html#/detail and http://localhost:2987/index.html#/list can see the following image page:

3.AngularJS simplified routing address using HTML5-mode routing combination webserver

As we can see in the picture above, the request address is very long and it is difficult for me to accept this type of address for obsessive-compulsive disorder, so I decided to make the change:

1 Angulajs Open the HTML5 mode route, remove the # number:

For ANGULAJS, the default is not to open the HTML5 routing mode, we open the HTML5 routing mode by doing the following:

1 Angular.module ("app", [2 ' Ngroute ' 3]) 4 config ([' $routeProvider ', ' $locationProvider ', function ($routeProvider, $lo Cationprovider) {5//Open HTML5 routing mode 6 $locationProvider. Html5mode (True) 7 $routeProvider. When ("/list", {8 Template: "This is a list page "9}". When ("/detail", {Template: "This is the details page" one}) otherwise ({redirectto: "/404.html" 14}) 15}])

In this way the above request address to remove the # after the page refresh, found that tip 404 can not find the page, because such an address request to the background IIS will not find the corresponding file, so directly returned 404 error page. So we need to add the webserver configuration to the configuration file and redirect the file as follows:

1 <system.webServer> 2 <rewrite> 3 <rules> 4 <rule name= "Name" > 5 <match url= "^list|detail*" I Gnorecase= "true"/> 6 <conditions logicalgrouping= "Matchall" > 7 <add input= "{request_filename}" matchType= "Isfile" negate= "true"/> 8 <add input= "{request_filename}" matchtype= "Isdirectory" negate= "true"/> 9 </ conditions>10 <action type= "Rewrite" url= "/index.html"/>11 </rule>12 </rules>13, </rewrite >14 </system.webServer>

As the above code shows, where <match url= "^list|detail*" ignorecase= "true"/> means that if the request address contains a list or a detail (write the regular expression on demand), It is redirected to the index.html page so that when you enter http://localhost:2987/detail on the page, IIS returns the template page (index.html), and then angulajs the route to begin execution.

In the browser input http://localhost:2987/detail carriage return, found that did not get the result we want, that is, the route does not match on.

Online search for a long time, and finally found a solution, is to add <base> tags in the HTML page as follows:

1 <! DOCTYPE html> 2

In this way, enter on the browser: Http://localhost:2987/detail return will see the results we want, screenshot as follows:

Legacy question: Why add <base href= "/"/> tags to succeed? This question also needs to consult the general Bo friends.

For the above content, if there is any writing is not right, heartily spit groove!!!

The above is a small series for everyone to bring the ANGULARJS Routing and template examples and routing address simplification (must see) all content, I hope that we support cloud Habitat Community ~