angular 系列九 ui-router适配模板,模板指定controller控制器
前几篇博文简单说了下angular的视图,模型,控制器,ui-router等,但是一直没有串起来.查找目录
所以今天这篇就是在以前的基础上,把客户端angular.js 负责的部分整体串起来演示一下.
我们按照angular执行顺序来做前提准备:
(1)Client 根目录下 index.html 首先加载angular.js 和 ui-router.js 文件
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script> <script src="./vender/angular-ui-router-0.2.13.js"></script>
(2)引用 app.js
<script src="/app.js"></script>
此文件是 gulpfile.js 通过配置任务生成的一个文件,此文件包含了 angular.js 使用的 router 配置,controller控制器脚本,服务,组件,过滤器及初始化注册config配置等.
(3)指定 angular.js 接管部分及视图填充部分
<html ng-app="YIJIEBUYI”> //angular.js 接管标识 ……. <body> <div ui-view="container" id="BodyContainer”> //模板视图填充部分 </div> </body>
(4)scripts 根目录下创建一个 main.js 的初始化注册脚本.
angular.module('YIJIEBUYI', ['ui.router']) .config(['$locationProvider', '$urlRouterProvider', function($locationProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/blog"); }]);前面的文章已经说过了 module 下面几个重要的 api ,config 对于常用功能服务及公用模块的初始化注册起到了很重要的角色.因为我们从头到尾要用到 ui.router 模块来解析路由,所在这里注册.
我们在前面的博文里说过了,angular.js默认路由导航还是需要 ng-Route模块,所以我们在 main.js 里面用 ng-Route 模块的 urlRouterProvider 服务指定了一个启动默认路由定位到 /blog
就是这一句的作用 $urlRouterProvider.otherwise("/blog");
(5)定制路由
routes 根目录下我们创建一个 blog.js的脚本文件
angular.module('YIJIEBUYI').config(['$stateProvider',function($stateProvider){
$stateProvider.state('blog',{
url:'/blog',
views:{
'container':{templateUrl:'templates/blog_layout.html'}
}
}).state('blog.detail',{
url:'/:blogID',
views:{
'container':{templateUrl:'templates/blog_detail.html'}
}
});
}]);上面我们依赖注入了 $stateProvider 服务,然后定制了2个路由 /blog 博客主页和 /blog/1234 博客详情页
(6)templates 目下创建模板视图
header.html
footer.html
这是页头和页脚视图,因为共用的地方很多,所以单独做成2个局部视图
blog.layout.html
这是博客首页,你也可以理解成母版页
<div ng-controller="blogLayoutCtrl"> <span>{{title}}</span>
<div ng-include="'templates/header.html'">header</div>
<div ui-view="container">
</div>
<div ng-include="'templates/footer.html'">footer</div>
</div>你可以看到这个母版页里通过 ng-include 把通用的页头,页尾模板加载进来.
他有一个自己的控制器 ng-controller=“blogLayoutCtrl"
里面可以处理母版页的一些逻辑控制.
下面有 视图容器 <div ui-view="container"></div> 这里面可以装载嵌套视图
blog_detail.html
这是博客详情页
此视图只会嵌套在 blog_layout.html 母版页中,所以这个视图只需要关注自己所需要的逻辑即可
<div ng-controller="blogDetailCtrl" ui-view="container"> {{title}} </div>他对应的控制器 blogDetailCtrl
(7)我们要在controllers根目录下创建上面所需要的2个控制器
母版页
blogLayoutCtrl.js
angular.module('YIJIEBUYI').controller('blogLayoutCtrl', ['$scope','$state',
function ($scope, $state) {
$scope.title='一介布衣-博客共用模板';
}
]);博客详情页
blogDetailCtrl.js
angular.module('YIJIEBUYI').controller('blogDetailCtrl', ['$scope','$state',
function ($scope, $state) {
$scope.title='一介布衣-博客详情页';
}
]);我们上面的controller 都给 $scope对象定义了一个title属性.
启动应用
zhangzhi@moke:~/code/work$ gulp
默认定位到 /blog 母版视图,
修改url到/blog/234234 定位到博客详情页视图