AngularJS 避繁就简的路由


Posted in Javascript onJuly 01, 2016

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

AngularJS 避繁就简的路由

先看看$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 避繁就简的路由

单击“电脑”

AngularJS 避繁就简的路由

单击“手机”

AngularJS 避繁就简的路由

单击“其他”

AngularJS 避繁就简的路由

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

Javascript 相关文章推荐
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python版百度语音识别功能
2019/07/09 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python数据存储之 h5py详解
2019/12/26 Python
python新手学习使用库
2020/06/11 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
设计总监岗位职责
2013/12/07 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
改进工作作风心得体会
2016/01/23 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Java的Object类的九种方法
2022/04/13 Java/Android