anjularjs 路由

在多视图单页面web应用中,angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上。通过一个简单的实例来深入理解:

1.index.html

主页面中插入代码:

<div ng-view></div>

该div内的html内容会根据路由的变化而变化。

(Tips:除了基本框架需要引入外,需要引入实现路由的js文件: ../angular-route.min.js)

 <!DOCTYPE html>
<html lang="zh-CN" ng-app="webapp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<style>
body {font-size:20px;}
.ng-scope {
margin: 10px;
padding:10px;
}
</style>
</head>
<body> <div ng-view></div> <script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/demo.js"></script> </body>
</html>

2.ctrl1.html

第一个html模板文件

 <div>I am ctrl1.html</div>
<div>{{Ctrl1Var}}</div>
<div ng-include="'views/links.html'"></div>

3.ctrl2.html

第二个html模板文件

 <div>I am ctrl2.html</div>
<div>{{Ctrl2Var}}</div>
<div ng-include="'views/links.html'"></div>

4.ctrl3.html

第三个html模板文件

 <div>I am ctrl3.html</div>
<div>{{Ctrl3Var}}</div>
<div ng-include="'views/links.html'"></div>

5.links.html

默认的html模板文件

 <ul class="list-unstyled">
<li><a href="#/ctrl1">ctrl1</a></li>
<li><a href="#/ctrl2">ctrl2</a></li>
<li><a href="#/ctrl3">ctrl3</a></li>
<li><a href="#/nonsense">nonsense</a></li>
</ul>

6.index.js

1) 引入ngRoute作为主应用模块的依赖模块;

2) angularjs的config模块用来配置路由规则,通过configAPI,请求把$routeProvider注入到我们的配置函数,然后使用$routeProvider.whenAPI来定义路由规则,when(path,object)&otherwise(object)按顺序定义我们的所有路由,其中函数的两个参数:path为URL或者URL正则规则,object则为路由配置对象,查阅资料,完整的object如下:

$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});

参数说明

•template:若ng-view中插入的只是简单的HTML代码,则使用

.when('/computers',{template:'这是ctrl1页面'})

•templateUrl:若在ng-view中插入HTML模板文件,则使用

$routeProvider.when('/computers', {
templateUrl: 'views/strl1.html',
});

•controller:可以是function,string或者数组类型,这表示在当前模板上执行的controller函数,生成新的scope.

•controllerAs:string类型,为controller指定别名。

•redirectTo:重定向的地址。

•resolve:指定当前controller所依赖的其他模块。

 angular.module("webapp",[
"ngRoute"
]);
angular.module("webapp").config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/ctrl1', {
templateUrl: 'views/ctrl1.html',
controller: 'Ctrl1'
})
.when('/ctrl2', {
templateUrl: 'views/ctrl2.html',
controller: 'Ctrl2'
})
.when('/ctrl3', {
templateUrl: 'views/ctrl3.html',
controller: 'Ctrl3'
})
.otherwise({
redirectTo: '/ctrl1'
});
}]); angular.module('webapp').controller('Ctrl1' , ['$scope',function($scope) {
$scope.Ctrl1Var = 'Ctrl1Var';
}]);
angular.module('webapp').controller('Ctrl2' , ['$scope',function($scope) {
$scope.Ctrl2Var = 'Ctrl2Var';
}]);
angular.module('webapp').controller('Ctrl3' , ['$scope',function($scope) {
$scope.Ctrl3Var = 'Ctrl3Var';
}]);

相关实例演示链接:http://dreammaker-8-16-qboooogle.c9users.io:8080/

上一篇:unbutu下搭建FTP服务


下一篇:Log4j,Log4j2,logback,slf4j日志学习