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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
详解JavaScript的变量
Apr 04 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
咖啡的种类和口感
2021/03/03 新手入门
php MySQL与分页效率
2008/06/04 PHP
解析php中反射的应用
2013/06/18 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
详解如何设置Python环境变量?
2019/05/13 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python自动化之Ansible的安装教程
2019/06/13 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python学生管理系统的实现
2020/04/05 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
关于爱国的标语
2014/06/24 职场文书
医德医风自我评价
2014/09/19 职场文书
2014年招商工作总结
2014/11/22 职场文书
质量保证书格式模板
2015/02/27 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL