溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

AngularJS中路由怎么用

發(fā)布時(shí)間：2021-07-09 11:21:08 來(lái)源：億速云 閱讀：145 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了AngularJS中路由怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體如下：

目前的理解中，這個(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'>
<h3>AngularJS 路由應(yīng)用</h3>
<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" >用戶</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>
  <h2>HI,這里是list.html</h2>
  <h3>{{name}}</h3>
</div>

JS:

var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'這是首頁(yè)頁(yè)面'})
      .when('/computers',{
        template:'這是電腦分類頁(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)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“AngularJS中路由怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手