AngularJS入門教學（1）-路由用法簡單介紹-js教程-PHP中文網

AngularJS入門教學（1）-路由用法簡單介紹

黄舟

發布： 2017-05-27 10:33:39

原創

871 人瀏覽過

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

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

目前的理解中，這個NG的路由模組可以用於具有多視圖的單頁開發。

先把所有程式碼貼出：

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</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>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

登入後複製

list.html：

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>

登入後複製

JS:

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,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([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

登入後複製

透過when和otherwise兩個方法來進行路由的匹配。（其實就是要匹配上面URL後面/的字元）。最後把符合到的字元所對應的欄位或檔案放入有ng-view 指令的DOM裡面。

when裡面有許多屬性。裡面可以設定控制器，控制器會比對對應的欄位或檔案。就像上面程式碼中listController控制器一樣。

ng-view指令有許多規則：

在符合路由時：

1、建立一個新的目前作用域。
2、刪除前一個作用域。
3、將目前的範本（控制器等）與目前新建的作用域關聯起來。
4、如果有內建關聯的控制器，將其與當期作用域關聯起來。

以上是AngularJS入門教學（1）-路由用法簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

AngularJS入門教學（1）-路由用法簡單介紹