您的位置：首页 > 产品设计 > UI/UE

#学习笔记#(56)angular ui-router使用姿势

2016-03-31 13:51 656 查看
一、单个ui-view
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view></div>
<script>
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider) {
$stateProvider.state('test', {
url: "",
template: "<h1>这是一个路由</h1>"
});
});
</script>
</body>
</html>


1 引入angular-ui-router.js
<script src="js/ui-router/angular-ui-router.min.js"></script>
2 注入模块
var myApp = angular.module('myApp', ['ui.router']);
3 配置路由
myApp.config(function($stateProvider) {

$stateProvider.state('test', {

url: "",

template: "<h1>这是一个路由</h1>"
});
注意：1 必须写url: "",可为空，但必须写，不然就看不到视图内容
2 加上“/”可以通过ui-sref="test"访问到，不加表示初始默认显示，但不能通过ui-sref访问
3 .state('test', {}）；.state的第一个参数必须写，不写会报错（一般写index），当通过ui-sref访问时，这个参数会显示在浏览器url地址栏里

二、多个ui-view
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">路由1</a>
<a ui-sref="route2">路由2</a>
<script>
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider) {
$stateProvider
.state('test', {
url: "",
views: {
"viewA": { template: "<h1>这是视图A</h1>" },
"viewB": { template: "<h1>这是视图B</h1>" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "<h1>路由1.视图A</h1>" },
"viewB": { template: "<h1>路由1.视图B</h1>" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "<h1>路由2.视图A</h1>" },
"viewB": { template: "<h1>路由2.视图B</h1>" }
}
})
});
</script>
</body>
</html>


显示结果：



三、通过templateUrl属性配置视图
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view></div>
<script>
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider) {
$stateProvider
.state('test', {
url: "",
templateUrl:'test2.html'
});
});
</script>
</body>
</html>


显示结果：



这句话是写在test2.html里的。

四、通过controller属性配置控制器

这个比较简单，有两种方式，
1 直接把控制器方法写在路由里：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view></div>
<script>
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider) {
$stateProvider.state('test', {
url: "",
template: "<h1>{{title}}</h1>",
controller:function($scope){
$scope.title='测试控制器';
console.log('如果显示[测试控制器]表示controller配置成功');
}
});
});
</script>
</body>
</html>


2 controller通过函数名指向一个函数
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view></div>
<script>
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider) {
$stateProvider.state('test', {
url: "",
template: "<h1>{{title}}</h1>",
controller:'myCtrl'
});
});
myApp.controller('myCtrl',myCtrl);
function myCtrl($scope){
$scope.title='测试控制器';
console.log('如果显示[测试控制器]表示controller配置成功');
}
</script>
</body>
</html>


注意事项：myApp.controller('myCtrl',myCtrl);
记得在模块里配置！
附：还有一种controllerAS的用法，就不写了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航