AngularJS入門(mén)教程一：路由用法初探

更新時(shí)間：2017年05月27日 09:52:43 作者：面具哥布林

這篇文章主要介紹了AngularJS路由用法,簡(jiǎn)單分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以參考下

本文實(shí)例講述了AngularJS路由用法。分享給大家供大家參考，具體如下：

目前的理解中，這個(gè)NG的路由模塊可以用于帶有多視圖的單頁(yè)面開(kāi)發(fā)。

先把所有代碼貼出：

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由應(yīng)用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首頁(yè)</a></li>
  <li><a href="#/computers" rel="external nofollow" >電腦</a></li>
  <li><a href="#/user" rel="external nofollow" >用戶(hù)</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

list.html：

<div>
  <h1>HI,這里是list.html</h1>
  <h2>{{name}}</h2>
</div>

JS:

var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'這是首頁(yè)頁(yè)面'})
      .when('/computers',{
        template:'這是電腦分類(lèi)頁(yè)面'
      })
      .when('/user',{templateUrl:'list.html',controller:'listController'})
      .otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
  $scope.name="ROSE";
});

首先由于我用的是Angular1.5,所以需要額外引入angular-route.js:

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

要使用NG里的路由，必須先在特定的模塊中定義它：

.config(['$routeProvider', function($routeProvider){
//內(nèi)容
}

通過(guò)when和otherwise兩個(gè)方法來(lái)進(jìn)行路由的匹配。（其實(shí)就是匹配上面URL后面/的字符）。最后把匹配到的字符所對(duì)應(yīng)的字段或者文件放入帶有ng-view 指令的DOM里面。

when里面有許多屬性。里面可以設(shè)置控制器，控制器會(huì)匹配給對(duì)應(yīng)的字段或文件。就像上面代碼中l(wèi)istController控制器一樣。

ng-view指令有許多規(guī)則：

在匹配路由時(shí)：

1、創(chuàng)建一個(gè)新的當(dāng)前作用域。
2、刪除前一個(gè)作用域。
3、將當(dāng)前的模板（控制器等）與當(dāng)前新建的作用域關(guān)聯(lián)起來(lái)。
4、如果有內(nèi)置關(guān)聯(lián)的控制器，將其與當(dāng)期作用域關(guān)聯(lián)起來(lái)。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)表單驗(yàn)證
客戶(hù)端表單驗(yàn)證是AngularJS里面最酷的功能之一。 AngularJS表單驗(yàn)證可以讓你從一開(kāi)始就寫(xiě)出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗(yàn)證指令。在這里，我們將談?wù)剮讉€(gè)最流行指令，然后我們將討論如何編寫(xiě)自定義的驗(yàn)證。
2015-01-01
ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開(kāi)發(fā)框架，可通過(guò)web技術(shù)開(kāi)發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-06-06
AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
如何使用AngularJs打造權(quán)限管理系統(tǒng)【簡(jiǎn)易型】
這篇文章主要介紹了使用AngularJs打造權(quán)限管理系統(tǒng)【簡(jiǎn)易型】的相關(guān)資料,需要的朋友可以參考下
2016-05-05
基于Angularjs-router動(dòng)態(tài)改變Title值的問(wèn)題
今天小編就為大家分享一篇基于Angularjs-router動(dòng)態(tài)改變Title值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Angular Material Icon使用詳解
這篇文章主要介紹了Angular Material Icon使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能
本篇文章給大家分享了angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能的方法以及代碼實(shí)例，有興趣的朋友參考下。
2018-06-06
AngularJS讀取JSON及XML文件的方法示例
這篇文章主要介紹了AngularJS讀取JSON及XML文件的方法,涉及AngularJS針對(duì)xml及json格式文件數(shù)據(jù)的讀取、遍歷、輸出等相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)（代碼加簡(jiǎn)單）
這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)，利用Angular+Angular-Ui實(shí)現(xiàn)的分頁(yè)分頁(yè)代碼更加簡(jiǎn)單，更加容易懂哦，相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03