AngularJS 避繁就简的路由  更新时间:2016年07月01日 15:56:47   作者:super_yang_android   这篇文章主要为大家详细介绍了AngularJS 避繁就简的路由的相关资料,感兴趣的小伙伴们可以参考一下 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 先看看$routeProvider 的配置对象属性方法: 路由设置对象解析: $routeProvider.when(url(路由名称), { template: string(模板提示字符串), templateUrl: string(模板路径URL), controller: string, function 或 array(在当前模板创建控制器,生成新的 $scope 作用域), controllerAs: string(控制器别名), redirectTo: string, function(重定向地址), resolve: object(当前路由所依赖的模块) }); 实现路由的大致步骤: 第一步:导入ngRoute模块 第二步:在应用模块中使用ngRoute angular.module(“routeApp”, [“ngRoute”]) 第三步:使用 ng-view 指令 第四步:配置 $routeProvider 路由规则 … .config([‘$routeProvider’, function ($routeProvider){ $routeProvider .when(‘/home’, { templateUrl : ‘home.tpl.html’, controller : ‘HomeCtrl’, }) .when(‘/computer’, { templateUrl : ‘computer.html’, }) .when(‘/phone’, { templateUrl : ‘phone.html’, }) .when(‘/other’, { templateUrl : ‘other.tpl.html’, controller : ‘OtherCtrl’, }) }]) … 第五步:通过超链接使用路由 首页 电脑 手机 其他 完整案例: 1 route.html页面 AngularJS 路由实例 首页 电脑 手机 其他 2.computer.html 页面 名称 类别 价格 {{data}} {{item.name}} {{item.category}} {{item.price | currency}} 删除 编辑 + 添加 Add 3.phone.html 页面 名称 类别 价格 {{data}} {{item.name}} {{item.category}} {{item.price | currency}} 删除 编辑 + 添加 Add 单击“首页” 单击“电脑” 单击“手机” 单击“其他” 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: 微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决 Angularjs制作简单的路由功能demo AngularJS 路由详解和简单实例 使用AngularJS对路由进行安全性处理的方法 AngularJS 路由和模板实例及路由地址简化方法(必看) AngularJS监听路由的变化示例代码 AngularJS通过ng-route实现基本的路由功能实例详解 简单讲解AngularJS的Routing路由的定义与使用 AngularJs ng-route路由详解及实例代码 AngularJS路由实现页面跳转实例 AngularJS 路由 相关文章 Angularjs实现带查找筛选功能的select下拉框示例代码 这篇文章主要介绍了Angularjs实现带查找筛选功能的select下拉框的详细过程及示例代码,文中通过示例介绍的很详细,相信会对大家学习使用Angularjs具有一定的参考借鉴价值,有需要的朋友们可以一起来看看。 2016-10-10 详解Angular Karma测试的持续集成实践 这篇文章主要介绍了详解Angular Karma测试的持续集成实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-11-11 AngularJS中的Directive自定义一个表格 本篇文章给大家介绍在angularjs中自定义一个有关表格的directive,涉及到angularjs directive相关知识,对本文感兴趣的朋友一起学习吧 2016-01-01 Angularjs整合微信UI(weui) 本文给大家推荐的是使用angularjs实现整合微信新推出的UI(weui)的全部过程,有相同需求的小伙伴可以参考下 2016-03-03 实例解析angularjs的filter过滤器 本文对angularjs的filter过滤器进行系统介绍,附上实例解析,便于理解。具有很好的参考价值,需要的朋友可以看下 2016-12-12 Angular请求防抖处理第一次请求失效问题 这篇文章主要介绍了angular请求防抖及处理第一次请求失效的相关资料,需要的朋友可以参考下 2019-05-05 详解Angualr 组件间通信 本篇文章主要介绍了Angualr 组件间通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 Angular.js回顾ng-app和ng-model使用技巧 这篇文章主要回顾Angular.js中ng-app和ng-model使用技巧,感兴趣的小伙伴们可以参考一下 2016-04-04 实例详解angularjs和ajax的结合使用 本篇文章给大家介绍angularjs和ajax的结合使用,本文介绍的非常详细,对angularjs和ajax感兴趣的朋友一起参考下吧 2015-10-10 angularjs手动识别字符串中的换行符方法 今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 最新评论

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。

通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

这里写图片描述

先看看$routeProvider 的配置对象属性方法:

路由设置对象解析:

$routeProvider.when(url(路由名称), {
 template: string(模板提示字符串),
 templateUrl: string(模板路径URL),
 controller: string, function 或 array(在当前模板创建控制器,生成新的 $scope 作用域),
 controllerAs: string(控制器别名),
 redirectTo: string, function(重定向地址),
 resolve: object<key, function>(当前路由所依赖的模块)
});

实现路由的大致步骤:

第一步:导入ngRoute模块

<script type=”text/javascript” src=”js/angular-route.min.js”></script>

第二步:在应用模块中使用ngRoute

angular.module(“routeApp”, [“ngRoute”])

第三步:使用 ng-view 指令

<div ng-view class=”well” ng-controller=’defaultCtrl’></div>

第四步:配置 $routeProvider 路由规则

...
.config(['$routeProvider', function ($routeProvider){
 $routeProvider
  .when('/home', {
   templateUrl : 'home.tpl.html',
   controller : 'HomeCtrl',
  })
  .when('/computer', {
   templateUrl : 'computer.html',
  })
  .when('/phone', {
   templateUrl : 'phone.html',
  })
  .when('/other', {
   templateUrl : 'other.tpl.html',
   controller : 'OtherCtrl',
  })
}])
...

第五步:通过超链接使用路由

<ul class="nav nav-tabs">
 <li><a href="#/home">首页</a></li>
 <li><a href="#/computer">电脑</a></li>
 <li><a href="#/phone">手机</a></li>
 <li><a href="#/other">其他</a></li>
</ul>

完整案例:
1 route.html页面

<html>
 <head>
  <meta charset="utf-8">
  <title>AngularJS 路由实例</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 </head>
 <body ng-app='routeApp'>
  <ul class="nav nav-tabs">
   <li><a href="#/home">首页</a></li>
   <li><a href="#/computer">电脑</a></li>
   <li><a href="#/phone">手机</a></li>
   <li><a href="#/other">其他</a></li>
  </ul>
  <div ng-view class="well" ng-controller='defaultCtrl'></div>


  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-route.min.js"></script>
  <script type="text/ng-template" id="home.tpl.html">
   <h1>{{data}}</h1>
  </script>
  <script type="text/ng-template" id="other.tpl.html">
   <h1>{{data}}</h1>
  </script>
  <script type="text/javascript">
  angular.module("routeApp", ["ngRoute"])
   .config(['$routeProvider', function ($routeProvider){
    $routeProvider
     .when('/home', {
      templateUrl : 'home.tpl.html',
      controller : 'HomeCtrl',
     })
     .when('/computer', {
      templateUrl : 'computer.html',
     })
     .when('/phone', {
      templateUrl : 'phone.html',
     })
     .when('/other', {
      templateUrl : 'other.tpl.html',
      controller : 'OtherCtrl',
     })
   }])
   .controller('defaultCtrl', function ($scope) {
    $scope.computers = [
     { id: 0, name: "宏基", category: "Test", price: 1.25 },
     { id: 1, name: "联想", category: "Test", price: 2.45 },
     { id: 2, name: "苹果", category: "Test", price: 4.25 }
    ];
    $scope.phones = [
     { id: 0, name: "三星", category: "Test", price: 1.25 },
     { id: 1, name: "荣耀", category: "Test", price: 2.45 },
     { id: 2, name: "魅族", category: "Test", price: 4.25 }
    ];
   })
   .controller("HomeCtrl", function ($scope, $route) {
    $scope.$route = $route;
    $scope.data = "Home Home";
   })
   .controller("OtherCtrl", function ($scope, $route) {
    $scope.$route = $route;
    $scope.data = "Other Other";
   })
  </script>
 </body>
 </html>

2.computer.html 页面

<div class="panel-body">
 <table class="table table-striped table-hover">
  <thead>
   <tr>
    <th>名称</th>
    <th>类别</th>
    <th class="text-right">价格</th>
    <th>{{data}}</th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="item in computers">
    <td>{{item.name}}</td>
    <td>{{item.category}}</td>
    <td class="text-right">{{item.price | currency}}</td>
    <td class="text-center">
     <button class="btn btn-xs btn-primary" ng-click="deleteProduct(item)">删除</button>
     <a href="/edit/{{item.id}}" class="btn btn-xs btn-primary" ng-click="editOrCreateProduct(item)">编辑</a>
     <button class="btn btn-xs btn-primary" ng-click="incrementPrice(item)">+</button>
    </td>
   </tr>
  </tbody>
 </table>
 <div>
  <button class="btn btn-xs btn-primary" ng-click="editOrCreateProduct()">添加</button>
  <a href="create" class="btn btn-xs btn-primary" ng-click="editOrCreateProduct()">Add</a>
 </div>
</div>

3.phone.html 页面

<div class="panel-body">
 <table class="table table-striped table-hover">
  <thead>
   <tr>
    <th>名称</th>
    <th>类别</th>
    <th class="text-right">价格</th>
    <th>{{data}}</th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="item in phones">
    <td>{{item.name}}</td>
    <td>{{item.category}}</td>
    <td class="text-right">{{item.price | currency}}</td>
    <td class="text-center">
     <button class="btn btn-xs btn-primary" ng-click="deleteProduct(item)">删除</button>
     <a href="/edit/{{item.id}}" class="btn btn-xs btn-primary" ng-click="editOrCreateProduct(item)">编辑</a>
     <button class="btn btn-xs btn-primary" ng-click="incrementPrice(item)">+</button>
    </td>
   </tr>
  </tbody>
 </table>
 <div>
  <button class="btn btn-xs btn-primary" ng-click="editOrCreateProduct()">添加</button>
  <a href="create" class="btn btn-xs btn-primary" ng-click="editOrCreateProduct()">Add</a>
 </div>
</div>

单击“首页”

这里写图片描述

单击“电脑”

这里写图片描述

单击“手机”

这里写图片描述

单击“其他”

这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
  • Angularjs制作简单的路由功能demo
  • AngularJS 路由详解和简单实例
  • 使用AngularJS对路由进行安全性处理的方法
  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • AngularJS监听路由的变化示例代码
  • AngularJS通过ng-route实现基本的路由功能实例详解
  • 简单讲解AngularJS的Routing路由的定义与使用
  • AngularJs ng-route路由详解及实例代码
  • AngularJS路由实现页面跳转实例
张贴在3