AngularJS 路由

時間 2019-11-08

原文原文鏈接

route 路由

在AngularJS裏面有兩種方式實現路由，第一個是$location,第二個就是route。
在這裏,我先介紹route模塊.javascript

因爲AngularJS是模塊化的，咱們要引用路由，就須要先將這個包下載下來。html

npm install angular-route --save

或者使用bowerhtml5

bower install angular-route --save

以後,在咱們的文件引入AngularJS-route.js文件,就可使用route路由了.java

因爲route是一個單獨的模塊,咱們想要使用,必需要在本身的模塊中添加對ngRoute模塊的依賴.ajax

var app = angular.module('myApp', ['ngRoute']);

而後,咱們須要經過config方法來配置.npm

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        controller: 'aController',
        templateUrl: './a.html'
    })
        .when('/b', {
            controller: 'bController',
            templateUrl: './b.html'
        })
        .when('/c', {
            controller: 'cController',
            templateUrl: './c.html'
        })
        .otherwise({
            redirectTo:'/a'
        });
}]);

注意,上面的config也要注入一個對象,後綴也是Provider.瀏覽器

config裏面注入的對象都要跟上Provider,即便後面有Provider.服務器

when表示匹配,若是有對應的路由匹配上, 那麼就會進入相應的控制器.架構

otherwise表示若是沒有匹配到,就走'\a'.app

下面是控制器代碼:

app.controller('aController', ['$scope', function ($scope) {
    $scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
    $scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
    $scope.msg = 'this is cController';
}])

註冊了三個控制器(注意,這裏的控制器不用在View裏面經過ng-controller申明.

好了

如今咱們須要在html文件裏面加上ng-app指令和ng-view指令

注意:ng-view 指令是一個特殊的指令,它的做用是在html中給$route對應的視圖佔位.(ng-view是優先級爲1000的終極指令,AngularJs不會運行做用在同一個指令上的其餘指令.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index.js"></script>
</body>
</html>

下面是個人三個html文件

a.html

<h2>
    {{msg}}
</h2>

b.html

<h2>
    {{msg}}
</h2>

c.html

<h2>
    {{msg}}
</h2>

好了,全部的文件都已經寫好了,彷佛已經能夠打開了,咱們試試

上面什麼都沒有顯示!!

咱們使用F12打開控制檯

咱們看到了關鍵字 XMLHttpRequest,這是一個ajax對象.

明白了,AngularJs加載a.html,b.html,c.html時經過ajax方式的,而File協議是不支持ajax方式的?

怎麼辦呢?

辦法就是起一個Web服務器.

如今主流的IDE都會自動以http方式在瀏覽器中查看文件,好比,WebStorm,HBuilder,Sublime也有對應的插件. Sublime Server.

但遺憾的是,VScode沒有,

VSCode經過

ext install view in-browser

安裝插件能夠打開瀏覽器,但也是file協議.

npmJs社區提供了一個Web服務器,叫作 http-server

能夠經過npm方式安裝.

npm install http-server -g

如今可使用命令

hs -o[path]

打開一個服務,

注意: 雖然路徑名是可選的,可是仍是須要寫上,由於這個在第一個啓動的時候會記住url地址,之後雖然在別的路徑下啓動服務,仍是隻會跳轉到第一個url上.

好了,

它會啓動一個端口8080的服務,並會打開個人資源管理器(我資源管理器使用了clover插件).
而後咱們在瀏覽器地址欄輸入

http://127.0.0.1:8080/01route/index.html

注意: /表示網站根目錄,必定要使用我上面開啓服務的路徑做爲網站根目錄.

它會默認跳轉到http://127.0.0.1:8080/01route/index.html#/a 並打開

是否是歐了哈哈哈哈

固然,你也能夠不使用這種方式,使用IIS或者其它的Web服務器. 可是我太不喜歡IIS啦(其實我之前作ASP.NET過的... 囧),

嗯,雖然這麼作可行,可是有一個弊端,看下面的圖

它每次都要請求a.html,b.html,c.html,若是文件多起來,是否是很麻煩呢?
因爲在html裏面,script標籤在html5中能夠省略type="text/javascript",默認會做爲JavaScript文件解析,可是咱們咱們聲明爲其餘的類型,html就不會作爲JavaScript解析了,而是一個普通的節點. AngularJs就是利用這個特色,實現了在一個頁面上放置多個View.

看下面的代碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script id="a_html" type="text/ng-template">
{{msg}}
    </script>
    <script id="b_html" type="text/ng-template">
{{msg}}
    </script> <script id="c_html" type="text/ng-template">
{{msg}}
    </script>
</head>

<body>
    <ul>
        <li>
            <a href="#/a">a視圖</a>
        </li>
        <li>
            <a href="#/b">b視圖</a>
        </li>
        <li>
            <a href="#/c">c視圖</a>
        </li>
    </ul>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index2.js"></script>
</body>

</html>

js代碼有稍微的變化

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        controller: 'aController',
        templateUrl: './a_html'
    })
        .when('/b', {
            controller: 'bController',
            templateUrl: './b_html'
        })
        .when('/c', {
            controller: 'cController',
            templateUrl: './c_html'
        })
        .otherwise({
            redirectTo:'/a'
        });
}]);
app.controller('aController', ['$scope', function ($scope) {
    $scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
    $scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
    $scope.msg = 'this is cController';
}])

下面看效果:

可是,有時候好比一個班級的信息統計,我須要查看每一個同窗的詳細信息,好比 ..#/tom,那麼還有#/linda,在這裏若是爲每一個學生都寫一個模板是否是太浪費了? 並且每一個學生之間的信息模板都是相同的,不一樣的就是數據,而數據是能夠經過控制器來提供的. 因此在這種狀況下,只須要聲明一個模板就而且只匹配一次.

看下面的代碼:

index2.html

<!--/*
 * @Author: Pawn.Hu 
 * @Date: 2016-08-14 13:48:39 
 * @Last Modified by:   Pawn.Hu 
 * @Last Modified time: 2016-08-14 13:48:39 
 */-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            <a href="#/student/Tom">Tom</a>
        </li>
        <li>
            <a href="#/student/Linda">Linda</a>
        </li>
        <li>
            <a href="#/student/Taylor">Taylor</a>
        </li>
    </ul>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index2.js"></script>
</body>

</html>

這裏申明瞭3個錨點

index2.js

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/student/:name', {
        controller: 'studentController',
        templateUrl: './student.html'
    }).otherwise({
        redirectTo: '/student/Tom'
    });
}])
app.controller('studentController', ['$scope', '$routeParams', function ($scope, $routeParams) {
    var name = $routeParams.name;
    $scope.name = name;

}])

這裏when方法第一個參數後面的冒號表示後面是一個路由參數.

注意: $routeProvider.when('/student/:name', { ... }) 這裏when的後面還能夠跟上一個?號,表示沒有也能匹配成功,可是一般狀況下不會跟otherwise合用.,並且AngularJS路由模塊只有這兩個特殊符號.

這裏是student.html 模板