AngularJS入门教程一：路由用法初探
57 浏览量
2020-10-19
19:03:35
上传
评论
收藏 48KB PDF 举报
AngularJS入门教程一：路由用法初探入门教程一：路由用法初探
主要介绍了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控制器一样。
评论0
最新资源