AngularJS入门教程一：路由用法初探
更新时间：2017年05月27日 09:52:43 作者：面具哥布林
这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- AngularJS 路由详解和简单实例
- 使用AngularJS对路由进行安全性处理的方法
- AngularJS路由实现页面跳转实例
- AngularJS通过ng-route实现基本的路由功能实例详解
- angularjs ui-router中路由的二级嵌套
- AngularJS监听路由变化的方法
- AngularJS基于ui-route实现深层路由的方法【路由嵌套】
- AngularJS入门教程之路由与多视图详解
- AngularJS ui-router (嵌套路由)实例
- AngularJS实现使用路由切换视图的方法
- 详解在Angularjs中ui-sref和$state.go如何传递参数
- Angularjs中$http以post请求通过消息体传递参数的实现方法
- AngularJS入门教程二：在路由中传递参数的方法分析
相关文章
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。2015-01-01
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了AngularJS实现给动态生成的元素绑定事件的方法,结合实例形式分析了AngularJS动态生成元素与事件绑定相关操作技巧,需要的朋友可以参考下2016-12-12
Angular 2父子组件数据传递之@Input和@Output详解(下)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了使用AngularJs打造权限管理系统【简易型】的相关资料,需要的朋友可以参考下2016-05-05
基于Angularjs-router动态改变Title值的问题
今天小编就为大家分享一篇基于Angularjs-router动态改变Title值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Angular Material Icon使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章给大家分享了angularjs结合html5实现拖拽功能的方法以及代码实例，有兴趣的朋友参考下。2018-06-06
这篇文章主要介绍了AngularJS读取JSON及XML文件的方法,涉及AngularJS针对xml及json格式文件数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下2017-05-05
利用Angular+Angular-Ui实现分页（代码加简单）
这篇文章主要介绍了利用Angular+Angular-Ui实现分页，利用Angular+Angular-Ui实现的分页分页代码更加简单，更加容易懂哦，相信本文的内容对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
最新评论