1、首先我們要引進(jìn)angular.js和angular-route.js文件

2、然后我們要在html中創(chuàng)建錨點(diǎn)和容器(ng-view)

第一頁(yè)

第二頁(yè)

3、在模塊中注入ngRoute依賴

angular.module('myApp',['ngRoute'])

4、配置路由

config(['$routeProvider',function ($routeProvider) {

$routeProvider.when('/first',{

template : '

first

'

})

.when('/second',{

template : '

second

'

})

.otherwise({

redirectTo : '/first'

})

}])

效果展示：

完整代碼：

Document

第一頁(yè)

第二頁(yè)

angular.module('myApp',['ngRoute'])

.config(['$routeProvider',function ($routeProvider) {

$routeProvider.when('/first',{

template : '

first

'

})

.when('/second',{

template : '

second

'

})

.otherwise({

redirectTo : '/first'

})

}])

接下來(lái)我們做一個(gè)模擬項(xiàng)目路由

1、首先我們看一下我們所需要的文件

所有文件展示

2、之后我們看一下效果圖

有兩個(gè)頁(yè)面，first page跟second page，點(diǎn)擊兩個(gè)按鈕，切換不同頁(yè)面，展示不同樣式

3、好了。我們看一下代碼吧！

index.html

Document

First Page

Second Page

代碼解釋：

首先我們要引進(jìn)三個(gè)文件

1)angular.min.js----angularJS腳本

2)angular-css.js----用來(lái)轉(zhuǎn)化css的腳本

3)angular-route.js----路由腳本

然后我們需要兩個(gè)錨點(diǎn)

First Page

Second Page

最后我們需要一個(gè)路由導(dǎo)入的容器

之后我們將路由的配置、服務(wù)、控制器分別放在app.js、services.js、controller.js文件中，便于代碼的管理、維護(hù)。

4、接下來(lái)我們看一下路由的部分

angular.module('myApp',['ngRoute','angularCSS'])

.config(['$routeProvider',function ($routeProvider) {

$routeProvider

.when('/first',{

templateUrl : './view/first.html',

controller : 'FirstCtrl as firstCtrl'

})

.when('/second',{

templateUrl : './view/second.html',

controller : 'SecondCtrl as secondCtrl'

})

.otherwise({

redirectTo : '/first'

})

}])

代碼解釋：

1)首先，第一行，在myApp模塊中注入ngRoute跟angularCSS依賴。

2)然后配置路由(config)：

AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過(guò)使用 configAPI，我們請(qǐng)求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來(lái)定義我們的路由規(guī)則。

$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個(gè)參數(shù):

第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則。第二個(gè)參數(shù)是路由配置對(duì)象。

3)controller

function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope。

4)controllerAs

string類型，為controller指定別名。

5)redirectTo

重定向的地址

6)resolve

指定當(dāng)前controller所依賴的其他模塊。

路由設(shè)置對(duì)象總覽：

5、下面我們看一下服務(wù)部分，service.js

angular.module('myApp')

.factory('FirstService',[function () {

var list = [

{ name : 'Rose',age : 10 },

{ name : 'Tom',age : 19 }

];

return {

getList : function () {

return list;

}

}

}])

注意：angular.module('myApp')不需要注入依賴

6、下面看一下控制器集成，controller.js

angular.module('myApp')

.controller('FirstCtrl',['$css','FirstService',function ($css,$service) {

var self = this;

$css.add('css/first.css');

self.list = function () {

return $service.getList();

}

}])

.controller('SecondCtrl',['$css','FirstService',function ($css,$service) {

var self = this;

$css.add('css/second.css');

self.list = function () {

return $service.getList();

}

}])

代碼分析：

1)在控制器中注入服務(wù)依賴以及#css依賴

controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2)添加css依賴路徑

$css.add('css/first.css');

注意：angular.module('myApp')不需要注入依賴

7、好了。邏輯的部分已經(jīng)完成了，下面展示一下我們的樣式以及結(jié)構(gòu)部分吧

first.html

First Page

{{ p.name }} == {{ p.age }}

second.html

Second Page

{{ p.name }} == {{ p.age }}

first.css

.first{

background-color: yellow;

}

.first *{

color: red;

}

second.css

.second{

background-color: skyblue;

}

.second *{

color: green;

}

總結(jié)

以上是生活随笔為你收集整理的angularjsl路由_AngularJS实现路由实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。