脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularJS中router的使用指南

angularJS中router的使用指南

 更新时间：2015年02月09日 09:03:26   投稿：hebedich  
这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下

这几天看了angularjs和backbone，大看了解了knockout和emberjs，刚刚上网看到了一个angular的router的demo，现在顺便记下来

复制代码 代码如下:

<!---
DEMO_INDEX.html
-->
<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head><br>//这个重要是做IE的兼容，发现不管用，IE坑爹，你懂的
<body ng-app="routeApp" class="ng-app:routeApp"  id="routeApp">
<h1>Route Demo index</h1>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
<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

运行下面代码

复制代码 代码如下:

<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

运行下面代码

复制代码 代码如下:

<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

代码就这些了，希望小伙伴们能够喜欢。

您可能感兴趣的文章:

相关文章

  • @angular前端项目代码优化之构建Api Tree的方法

    @angular前端项目代码优化之构建Api Tree的方法

    这篇文章主要介绍了@angular前端项目代码优化之构建Api Tree的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解如何在Angular优雅编写HTTP请求

    详解如何在Angular优雅编写HTTP请求

    这篇文章主要介绍了详解如何在Angular优雅编写HTTP请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • angularjs中ng-attr的用法详解

    angularjs中ng-attr的用法详解

    这篇文章主要给大家介绍了angularjs中ng-attr的用法,文中通过实例代码介绍的很详细，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 利用angular自动编译andriod APK的绕坑经历分享

    利用angular自动编译andriod APK的绕坑经历分享

    这篇文章主要给大家介绍了关于如何利用angular自动编译andriod APK的绕坑经历，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Angularjs实现分页和分页算法的示例代码

    Angularjs实现分页和分页算法的示例代码

    分页是很多web应用都会用到的，本篇文章主要介绍了Angularjs实现分页和分页算法的示例代码，具有一定的参考价值，有兴趣的可以了解一下。
    2016-12-12
  • AngularJs Forms详解及简单示例

    AngularJs Forms详解及简单示例

    本文主要介绍AngularJs Forms，这里整理了相关资料及简单示例代码，有需要的朋友可以参考下
    2016-09-09
  • Angular2学习教程之组件中的DOM操作详解

    Angular2学习教程之组件中的DOM操作详解

    这篇文章主要给大家介绍了Angular2学习教程之组件中DOM操作的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。
    2017-05-05
  • angular ng-click防止重复提交实例

    angular ng-click防止重复提交实例

    本篇文章主要介绍了angular ng-click防止重复提交实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular 4.0学习教程之架构详解

    Angular 4.0学习教程之架构详解

    作为一种大受欢迎的Web应用程序框架,Angular终于迎来了版本4.0，下面这篇文章主要给大家介绍了关于Angular 4.0学习教程之架构的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • AngularJs用户输入动态模板XSS攻击示例详解

    AngularJs用户输入动态模板XSS攻击示例详解

    这篇文章主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04

最新评论