快捷導(dǎo)航

angularJS中router的使用指南

更新時(shí)間：2015年02月09日 09:03:26 投稿：hebedich

這篇文章主要介紹了angularJS中router的使用方法和示例分享,需要的朋友可以參考下

這幾天看了angularjs和backbone，大看了解了knockout和emberjs，剛剛上網(wǎng)看到了一個(gè)angular的router的demo，現(xiàn)在順便記下來

<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head><br>//這個(gè)重要是做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的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
angularjs中ng-attr的用法詳解
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實(shí)例代碼介紹的很詳細(xì)，有需要的朋友可以參考借鑒，下面來一起看看吧。
2016-12-12
利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷分享
這篇文章主要給大家介紹了關(guān)于如何利用angular自動(dòng)編譯andriod APK的繞坑經(jīng)歷，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼
分頁是很多web應(yīng)用都會(huì)用到的，本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁和分頁算法的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。
2016-12-12
AngularJs Forms詳解及簡單示例
本文主要介紹AngularJs Forms，這里整理了相關(guān)資料及簡單示例代碼，有需要的朋友可以參考下
2016-09-09
Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之組件中DOM操作的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來看看吧。
2017-05-05
angular ng-click防止重復(fù)提交實(shí)例
本篇文章主要介紹了angular ng-click防止重復(fù)提交實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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用戶輸入動(dòng)態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04