angularJS中router的使用指南
更新時間：2015年02月09日 09:03:26 投稿：hebedich
這篇文章主要介紹了angularJS中router的使用方法和示例分享,需要的朋友可以參考下
這幾天看了angularjs和backbone，大看了解了knockout和emberjs，剛剛上網(wǎng)看到了一個angular的router的demo，現(xiàn)在順便記下來
復(fù)制代碼 代碼如下:
<!---
DEMO_INDEX.html
-->
<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head><br>//這個重要是做IE的兼容，發(fā)現(xiàn)不管用，IE坑爹，你懂的
<body ng-app="routeApp" class="ng-app:routeApp" id="routeApp">
<h1>Route Demo index</h1>
<script src=">
<script src=">
<div ng-view></div>
<script src="http://localhost:81/js/angular.min.js"></script>
<script>
var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'list.html',
controller: 'RouteListCtl'
})
.when('/list/:id', {
templateUrl: 'detail.html',
controller: 'RouteDetailCtl'
})
.otherwise({
redirectTo: '/list'
});
}]);
//controller
routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
</script>
</body>
</html>
//list.html
運(yùn)行下面代碼
復(fù)制代碼 代碼如下:
<hr/>
<h3>Route : List.html</h3>
<ul>
<li ng-repeat="id in [1, 2, 3 ]">
<a href="#/list/{{ id }}"> ID{{ id }}</a>
</li>
</ul>
//detail.html
運(yùn)行下面代碼
復(fù)制代碼 代碼如下:
<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
代碼就這些了，希望小伙伴們能夠喜歡。
相關(guān)文章
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實(shí)例代碼介紹的很詳細(xì)，有需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
利用angular自動編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動編譯andriod APK的繞坑經(jīng)歷，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼
分頁是很多web應(yīng)用都會用到的，本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
本文主要介紹AngularJs Forms，這里整理了相關(guān)資料及簡單示例代碼，有需要的朋友可以參考下2016-09-09
Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之組件中DOM操作的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來看看吧。2017-05-05
angular ng-click防止重復(fù)提交實(shí)例
本篇文章主要介紹了angular ng-click防止重復(fù)提交實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0，下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04