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 unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vuex的使用步骤
Jan 06 Vue.js
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
深入了解php4(2)--重访过去
2006/10/09 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python处理XML格式数据的方法详解
2017/03/21 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python装饰器代替set get方法实例
2019/12/19 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Django自带的用户验证系统实现
2020/12/18 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
社区母亲节活动总结
2015/02/10 职场文书
学历证明样本
2015/06/16 职场文书
结婚幸福感言
2015/08/01 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS