AngularJS實現(xiàn)路由實例
1、首先我們要引進angular.js和angular-route.js文件
2、然后我們要在html中創(chuàng)建錨點和容器（ng-view）
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a> <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a> <div ng-view></div>
3、在模塊中注入ngRoute依賴
4、配置路由
config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '<h1> first </h1>'
})
.when('/second',{
template : '<h1> second </h1>'
})
.otherwise({
redirectTo : '/first'
})
}])
效果展示：
完整代碼：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src=lib/angular.min.js></script>
<script type="text/javascript" src=lib/angular-route.js></script>
</head>
<body>
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a>
<div ng-view></div>
<script type="text/javascript">
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/first',{
template : '<h1> first </h1>'
})
.when('/second',{
template : '<h1> second </h1>'
})
.otherwise({
redirectTo : '/first'
})
}])
</script>
</body>
</html>
接下來我們做一個模擬項目路由
1、首先我們看一下我們所需要的文件
所有文件展示
2、之后我們看一下效果圖
有兩個頁面，first page跟second page，點擊兩個按鈕，切換不同頁面，展示不同樣式
3、好了。我們看一下代碼吧！
index.html
<!DOCTYPE html> <html ng-app='myApp'> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="lib/angular.min.js" ></script> <script type="text/javascript" src="lib/angular-css.js" ></script> <script type="text/javascript" src="lib/angular-route.js" ></script> </head> <body> <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a> <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a> <div ng-view></div> <script type="text/javascript" src='app.js'></script> <script type="text/javascript" src='js/services.js'></script> <script type="text/javascript" src='js/controller.js'></script> </body> </html>
代碼解釋：
首先我們要引進三個文件
1）angular.min.js----angularJS腳本
2）angular-css.js----用來轉化css的腳本
3）angular-route.js----路由腳本
然后我們需要兩個錨點
<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a> <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>
最后我們需要一個路由導入的容器
之后我們將路由的配置、服務、控制器分別放在app.js、services.js、controller.js文件中，便于代碼的管理、維護。
4、接下來我們看一下路由的部分
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ī)則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個參數(shù):
第一個參數(shù)是 URL 或者 URL 正則規(guī)則。第二個參數(shù)是路由配置對象。
3）controller
function、string或數(shù)組類型，在當前模板上執(zhí)行的controller函數(shù)，生成新的scope。
4）controllerAs
string類型，為controller指定別名。
5）redirectTo
重定向的地址
6）resolve
指定當前controller所依賴的其他模塊。
路由設置對象總覽：
5、下面我們看一下服務部分，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）在控制器中注入服務依賴以及#css依賴
2）添加css依賴路徑
注意：angular.module('myApp')不需要注入依賴
7、好了。邏輯的部分已經完成了，下面展示一下我們的樣式以及結構部分吧
first.html
<div class='first'>
<h1> First Page </h1>
<div ng-repeat="p in firstCtrl.list()">
{{ p.name }} == {{ p.age }}
</div>
</div>
second.html
<div class='second'>
<h1> Second Page </h1>
<div ng-repeat="p in secondCtrl.list()">
{{ p.name }} == {{ p.age }}
</div>
</div>
first.css
.first{
background-color: yellow;
}
.first *{
color: red;
}
second.css
.second{
background-color: skyblue;
}
.second *{
color: green;
}
相關文章
今天小編就為大家分享一篇angular2組件中定時刷新并清除定時器的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要記錄了一些在學習和使用angular.js踩到的坑和需要注意的點，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。2016-10-10
AngularJS中實現(xiàn)用戶訪問的身份認證和表單驗證功能
這篇文章主要介紹了AngularJS中實現(xiàn)用戶訪問的身份認證及表單驗證功能的方法,Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,需要的朋友可以參考下2016-04-04
本文主要介紹AngularJS環(huán)境設置,學習AngularJS的朋友肯定要設置開發(fā)軟件的環(huán)境,這里詳細介紹安裝設置流程，有需要的朋友可以參考下2016-08-08
本篇文章主要介紹了AngularJS自定義指令詳解（有分頁插件代碼），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了angularjs下拉框空白的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
下面小編就為大家?guī)硪黄狝ngularjs中的事件廣播 —全面解析$broadcast,$emit,$on。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
Angular2從搭建環(huán)境到開發(fā)步驟詳解
本文的內容主要是想幫助那些想學習Angular2的朋友們，因為我自己在玩Angular2時碰到了不少坑，而且Angular2語法一直處于變化中，讓人很頭疼。不過也怪不了Anguar2，因為它現(xiàn)在是處于并長期處于alpha階段，下面就通過本文來學習Angular2的搭建環(huán)境和開發(fā)吧。2016-10-10