AngularJS入门教程一:路由用法初探


Posted in Javascript onMay 27, 2017

本文实例讲述了AngularJS路由用法。分享给大家供大家参考,具体如下:

目前的理解中,这个NG的路由模块可以用于带有多视图的单页面开发。

先把所有代码贴出:

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

list.html:

<div>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</div>

JS:

var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'这是首页页面'})
      .when('/computers',{
        template:'这是电脑分类页面'
      })
      .when('/user',{templateUrl:'list.html',controller:'listController'})
      .otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
  $scope.name="ROSE";
});

首先由于我用的是Angular1.5,所以需要额外引入angular-route.js:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

要使用NG里的路由,必须先在特定的模块中定义它:

.config(['$routeProvider', function($routeProvider){
//内容
}

通过when和otherwise两个方法来进行路由的匹配。(其实就是匹配上面URL后面/的字符)。最后把匹配到的字符所对应的字段或者文件放入带有ng-view 指令的DOM里面。

when里面有许多属性。里面可以设置控制器,控制器会匹配给对应的字段或文件。就像上面代码中listController控制器一样。

ng-view指令有许多规则:

在匹配路由时:

1、创建一个新的当前作用域。
2、删除前一个作用域。
3、将当前的模板(控制器等)与当前新建的作用域关联起来。
4、如果有内置关联的控制器,将其与当期作用域关联起来。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
Jquery 扩展方法
May 06 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
js简单时间比较的方法
Aug 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 #Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
简单实现JavaScript弹幕效果
Aug 27 #Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
js简单实现删除记录时的提示效果
2013/12/05 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
使用Python写个小监控
2016/01/27 Python
python实现批量监控网站
2016/09/09 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python xpath获取页面注释的方法
2019/01/14 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
2014年银行工作总结范文
2014/11/12 职场文书
投资意向协议书
2015/01/29 职场文书
活动经费申请报告
2015/05/15 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL