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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP7修改的函数
2021/03/09 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python采集腾讯新闻实例
2014/07/10 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
一套Java笔试题
2016/08/20 面试题
毕业自我鉴定书
2014/03/24 职场文书
个人委托书格式
2014/04/04 职场文书
城管综合整治方案
2014/05/01 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP