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 post方式传递提交的实现代码
May 31 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
解析Vue.js中的组件
2018/02/02 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
外包公司软件测试工程师
2014/11/01 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
电气工程自动化求职信
2014/03/14 职场文书
出生公证委托书
2014/04/03 职场文书
银行求职自荐书
2014/06/25 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
外贸英文求职信范文
2015/03/19 职场文书
综合办公室岗位职责
2015/04/11 职场文书
培训班通知
2015/04/25 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Golang全局变量加锁的问题解决
2021/05/08 Golang