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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
javascript操作文本框readOnly
May 15 Javascript
用js实现的页面关键字密度查询代码
Dec 27 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
js判断节假日实例代码
Dec 27 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 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简单的MVC框架实现方法
2015/12/01 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
浅谈Django的缓存机制
2018/08/23 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python3中数组逆序输出方法
2020/12/01 Python
jupyter 添加不同内核的操作
2021/02/06 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
入党自我评价优缺点
2014/01/25 职场文书
产品销售计划书
2014/05/04 职场文书
会计毕业生自荐书
2014/06/12 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
置业顾问岗位职责
2015/02/09 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python多线程 Queue 模块常见用法
2021/07/04 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js