Recently, a colleague encountered some problems in the process of learning routes and templates. So today I wrote an example for her and shared it with those who are learning AngularJS.
Speaking of which, the AngularJs development project is very exciting, and the fun is its development model, making the code clearer, more readable, more concise and more maintainable. However, there are also things that give me a headache when developing using AngularJS, that is, the current front-end framework is more focused on Jquery, and many plug-ins rely on Jquery, and there are very few plug-ins for AngulaJS (I don’t know other Angular plug-ins except AngularUI. If any master guides you, you can share them with me). In order to ensure that the code in the Controller is clear and not confusing, we stipulate that Dom is not allowed to be operated in the Controller, so every time we need to operate the Dom element, we are instructions to complete it, so it exists. Many Jquery plug-ins need to be converted into instructions to operate, which is a very disgusting thing. It seems to be a long way off, OK ~~
Table of contents:
1. AngularJs routing introduction
2. AngularJS routing instance
3. AngularJS uses HTML5 mode routing combined with WebServer redirection to simplify routing addresses
1. AngularJS routing introduction
AngularJS routing is different from backend MVC routing. AngularJS front-end routing requires defining routing rules (routeProvider) for the specified (ng-app) in advance on the template page, and then telling (ng-app) which page (HTML) to load through different URLs, and then rendering them into the (ng-app) view (ng-view). The MVC routing is to request the controller's Action through different Url requests, and then return the View according to the routing rules. AngularJS is a pure front-end route. Later, we will combine configuration files to simplify routing addresses.
2. AngularJS routing instance
We create a new JS file, here I name it app.js, and we write the following code in the file:
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 })10 .otherwise({11 redirectTo: "/list"12 })13 }])
We create a new html file and name it index.html. The code and description are as follows:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <header> 8 <h2>This is the head</h2> 9 </header>10 <content>11 <div ng-view></div>12 </content>13 <footer>14 <h3>This is the bottom</h3>15 </footer>16 </body>17 </html>18 <script src="/scripts/angular/angular.min.js"></script>19 <script src="/scripts/angular-route/angular-route.min.js"></script>20 <script src="/scripts/app.js"></script>
Run the example, the effect is as follows.
Open the input address of the browser: http://localhost:2987/index.html#/detail and http://localhost:2987/index.html#/list respectively, you can see the pages shown in the following figure:
3. AngularJS uses HTML5 mode routing combined with WebServer to simplify routing addresses
In the picture above, we can see that the request address is very long. It is difficult for me who have obsessive-compulsive disorder to accept this type of address, so I decided to make such a change:
1) AngulaJS enables HTML5 mode routing and removes the # number:
For ANgulaJS, the default is that the HTML5 routing mode is not turned on. We enable the HTML5 routing mode by following the following methods:
1 angular.module("app", [ 2 'ngRoute' 3 ]) 4 .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 5 //Open html5 routing mode 6 $locationProvider.html5Mode(true) 7 $routeProvider.when("/list", { 8 template: "This is the list page" 9 }).when("/detail", {10 template: "This is the details page"11 })12 .otherwise({13 redirectTo: "/404.html"14 })15 }])
In this way, after removing the # number according to the above request address, the page was refreshed. The prompt 404 could not find the page. The reason is that if such an address is requested to the background IIS, the corresponding file will not be found, so the 404 error page will be directly returned. Therefore, 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*" ignoreCase="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 shown in the above code, the <match url="^list|detail*" ignoreCase="true"/> means that if the request address contains list or detail (write the regular expression itself according to the requirements), it will be redirected to the index.html page. When entering http://localhost:2987/detail on the page, IIS will first return to the template page (index.html), and then the AngulaJS route will start to be executed.
Enter http://localhost:2987/detail in the browser and found that we did not get the result we wanted, that is, the route did not match.
After searching online for a long time, I finally found the solution, which is to add the <base> tag to the html page as follows:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> 3 <head> 4 <title></title> 5 <base href="/" /> 6 </head> 7 <body> 8 <header> 9 <h2>This is the head</h2>10 </header>11 <content>12 <div ng-view></div>13 </content>14 <footer>15 <h3>This is the bottom</h3>16 </footer>17 </body>18 </html>19 <script src="/scripts/angular/angular.min.js"></script>20 <script src="/scripts/angular-route/angular-route.min.js"></script>21 <script src="/scripts/app.js"></script>
In this way, enter: http://localhost:2987/detail on the browser and you will see the result we want. The screenshot is as follows:
Legacy question: Why can you succeed by adding the <base href="/" /> tag? I would like to ask all bloggers about this question.
If there is anything wrong with the above content, please complain about it! ! !
The above is the full content of AngularJS routing and template examples and routing address simplification methods (must-read) brought to you by the editor. I hope everyone will support Wulin.com more~