AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)

2019-11-20 09:36:44

字體：大中小

供稿：網(wǎng)友

最近一同事在學(xué)習(xí)AngularJS，在路由與模板的學(xué)習(xí)過(guò)程中遇到了一些問(wèn)題，于是今天給她寫(xiě)了個(gè)例子，順便分享出來(lái)給那些正在學(xué)習(xí)AngularJS的小伙伴們。

話(huà)說(shuō)這AngularJs 開(kāi)發(fā)項(xiàng)目非常的爽，其中爽就爽在它的開(kāi)發(fā)模式，使得代碼更加的清晰、更加具有可讀性、更簡(jiǎn)潔、更具有維護(hù)性。但是在使用AngularJS開(kāi)發(fā)的過(guò)程中也有讓我頭疼的地方，那就是目前前端框架更多的還是以Jquery為主，很多插件都是依賴(lài)于Jquery的，AngulaJS的插件少之又少（除了AngularUI其他的Angular插件我就不知道了，如果哪位大神指導(dǎo)的話(huà)可以跟我分享一下）。為了保證Controller中代碼清晰，不混亂，我們規(guī)定在Controller中不允許操作Dom，所以每次需要操作Dom元素的是我們都是指令去完成，因此就存在了，需要將很多Jquery插件轉(zhuǎn)換成指令去操作，這是一件非常惡心的事情。好像扯遠(yuǎn)了，好吧~~

目錄：

1.AngularJs路由介紹

2.AngularJS路由實(shí)例

3.AngularJS采用HTML5模式的路由結(jié)合WebServer重定向簡(jiǎn)化路由地址

1.AngularJS路由介紹

AngularJS路由與后端MVC的路由不一樣。AngularJS的前端路由，需要在模板頁(yè)提前對(duì)指定的(ng-app)，定義路由規(guī)則(routeProvider)，然后通過(guò)不同的URL，告訴(ng-app)加載哪個(gè)頁(yè)面(HTML)，再渲染到(ng-app)視圖(ng-view)中。而MVC路由是通過(guò)不同的Url請(qǐng)求，然后根據(jù)路由規(guī)則請(qǐng)求控制器的Action，并返回View。AngularJS是一個(gè)純前端的路由。后面我們會(huì)結(jié)合配置文件簡(jiǎn)化路由地址。

2.AngularJS路由實(shí)例

我們新建一個(gè)JS文件，此處我命名為app.js，在文件中我們寫(xiě)入如下代碼：

1 angular.module("app", [ 2 'ngRoute' 3 ]) 4 .config(['$routeProvider', function ($routeProvider) { 5 $routeProvider.when("/list", { 6 template: "這是列表頁(yè)" 7 }).when("/detail", { 8 template: "這是詳情頁(yè)" 9 })10 .otherwise({11 redirectTo: "/list"12 })13 }])

我們新建一個(gè)html文件命名為index.html，代碼及說(shuō)明如下：

www.survivalescaperooms.com

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>這是頭部</h2> 9 </header>10 <content>11 <div ng-view></div>12 </content>13 <footer>14 <h3>這是底部</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>

運(yùn)行實(shí)例，效果如下。

瀏覽器打開(kāi)輸入地址：http://localhost:2987/index.html#/detail和http://localhost:2987/index.html#/list分別可以看到如下圖所示頁(yè)面：

www.survivalescaperooms.com

3.AngularJS采用HTML5模式的路由結(jié)合WebServer簡(jiǎn)化路由地址

上圖中我們可以看到，請(qǐng)求地址很長(zhǎng)，對(duì)于有強(qiáng)迫癥的我來(lái)說(shuō)，很難接受這種類(lèi)型的地址，于是我決定作出這樣的改變：

1）AngulaJS開(kāi)啟HTML5模式路由，去掉#號(hào)：

對(duì)于ANgulaJS來(lái)說(shuō)，其默認(rèn)是沒(méi)有打開(kāi)Html5路由模式，我們通過(guò)如下做法開(kāi)啟HTML5路由模式：

1 angular.module("app", [ 2 'ngRoute' 3 ]) 4 .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 5 //開(kāi)啟html5路由模式 6 $locationProvider.html5Mode(true) 7 $routeProvider.when("/list", { 8 template: "這是列表頁(yè)" 9 }).when("/detail", {10 template: "這是詳情頁(yè)"11 })12 .otherwise({13 redirectTo: "/404.html"14 })15 }])

　這樣按照上面的請(qǐng)求地址去掉#號(hào)后刷新頁(yè)面，發(fā)現(xiàn)提示404找不到頁(yè)面，原因是這樣的地址請(qǐng)求到后臺(tái)IIS會(huì)找不到對(duì)應(yīng)的文件，因此直接返回404錯(cuò)誤頁(yè)面。因此我們需要在配置文件中添加WebServer配置，重定向文件如下：

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>

如上面代碼顯示，其中<match url="^list|detail*" ignoreCase="true"/> 的意思是，如果請(qǐng)求地址中包含list或detail（根據(jù)需求自己書(shū)寫(xiě)正則表達(dá)式），那么會(huì)被重定向到index.html頁(yè)面，這樣在頁(yè)面上輸入http://localhost:2987/detail的時(shí)候IIS會(huì)先返回模板頁(yè)（index.html），然后AngulaJS路由才開(kāi)始執(zhí)行。

在瀏覽器輸入http://localhost:2987/detail回車(chē)，發(fā)現(xiàn)并沒(méi)有得到我們想要的結(jié)果，也就是說(shuō)，路由沒(méi)有匹配上。

網(wǎng)上查了很久，終于找到解決方案，就是在html頁(yè)面中添加<base>標(biāo)簽如下：

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>這是頭部</h2>10 </header>11 <content>12 <div ng-view></div>13 </content>14 <footer>15 <h3>這是底部</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>

這樣，在瀏覽器上輸入：http://localhost:2987/detail回車(chē)就會(huì)看到我們想要的結(jié)果，截圖如下：

www.survivalescaperooms.com