AngularJS 路由详解和简单实例


Posted in Javascript onJuly 28, 2016

AngularJS 路由

本章节我们将为大家介绍 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

当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

AngularJS 路由详解和简单实例

在以上图形中,我们可以看到创建了两个 URL: /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。

接下来我们来看一个简单的实例:

<html>
  <head>
  	<meta charset="utf-8">
    <title>AngularJS 路由实例 - 菜鸟教程</title>
  </head>
  <body ng-app='routingDemoApp'>
   
    <h2>AngularJS 路由应用</h2>
    <ul>
      <li><a href="#/">首页</a></li>
      <li><a href="#/computers">电脑</a></li>
      <li><a href="#/printers">打印机</a></li>
      <li><a href="#/blabla">其他</a></li>
    </ul>
     
    <div ng-view></div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script>
      angular.module('routingDemoApp',['ngRoute'])
      .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
      }]);
    </script>
   
   
  </body>
</html>

运行结果:

AngularJS 路由应用

  • 首页
  • 电脑
  • 打印机
  • 其他
这是首页页面

实例解析:

1、载入了实现路由的 js 文件:angular-route.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。

angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令。

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when('/',{template:'这是首页页面'})
    .when('/computers',{template:'这是电脑分类页面'})
    .when('/printers',{template:'这是打印机页面'})
    .otherwise({redirectTo:'/'});
}]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。

路由配置对象语法规则如下:

$routeProvider.when(url, {
  template: string,
  templateUrl: string,
  controller: string, function 或 array,
  controllerAs: string,
  redirectTo: string, function,
  resolve: object<key, function>
});

参数说明:

template:

如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:

.when('/computers',{template:'这是电脑分类页面'})

templateUrl:

如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:

$routeProvider.when('/computers', {
  templateUrl: 'views/computers.html',
});

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

controller:

function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。

controllerAs:

string类型,为controller指定别名。

redirectTo:

重定向的地址。

resolve:

指定当前controller所依赖的其他模块。

实例

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'embedded.home.html',
    controller: 'HomeController'
  }).
  when('/about', {
    templateUrl: 'embedded.about.html',
    controller: 'AboutController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});
</script>

 
</head>

<body ng-app="ngRouteExample" class="ng-scope">
 <script type="text/ng-template" id="embedded.home.html">
   <h1> Home </h1>
 </script>

 <script type="text/ng-template" id="embedded.about.html">
   <h1> About </h1>
 </script>

 <div> 
  <div id="navigation"> 
   <a href="#/home">Home</a>
   <a href="#/about">About</a>
  </div>
   
  <div ng-view="">
  </div>
 </div>
</body>
</html>

运行结果:

Home About

Home

以上就是对AngularJS 路由的资料整理,希望能帮助AngularJS 编程的同学。

Javascript 相关文章推荐
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python中的元组介绍
2019/01/28 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
求职简历自我评价范例
2014/03/12 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
关于开学的感想
2015/08/10 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书