ui-router(三)controller与template
这篇就是在以前的基础上,把客户端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 定位到博客详情页视图
ui-router(三)controller与template的更多相关文章
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- vue mandmobile ui实现三列列表的方法
vue mandmobile ui实现三列列表的方法 请问这种列表的要用那个组件好呢?Cellitem 只能用到两列,这个要三列的怎么弄?mand的好像没有listview,grid组件的 问了man ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
随机推荐
- windows如何查看删除记录
方法 打开组策略中的计算机配置-Windows设置-安全设置-本地策略-审核策略的审核对对像防问, 双击出现的对话框中钩选成功和失败,经过上面的设置,现在就可以设置文件和文件夹的审核了.(注须在NTF ...
- Struts2自定义Result处理JSON
以前在采用Struts2开发的项目中,对JSON的处理一直都在Action里处理的,在Action中直接Response,最近研读了一下Struts2的源码,发现了一个更加优雅的解决办法,自己定义一个 ...
- [Android 新特性] Android 4.3 Top 5新功能
直播会上,Android 4.3不像Nexus 7那么Sexy,也没有Chromecast电视棒那样惹人注目,但它有许多强悍的新特点,下面来看看Top 5. 1. 权限配置 支持在一台终端设备上有多个 ...
- [Gradle] Gradle 构建工具的未来
转载地址:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gradle Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你 ...
- COGS 08-备用交换机 题解——S.B.S.
8. 备用交换机 ★★ 输入文件:gd.in 输出文件:gd.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] n个城市之间有通讯网络,每个城市都有通讯交换机,直 ...
- csm pssm +pcf pcss sdsm
这几个shadow算法 pcf是sample时候用的 按照一个mode采样几个位置 根据采样结果 决定0-1 可以是0.234 这样就不是 0或者1 就是soft了 主要讲下pcss 是啥 因为我之 ...
- MFC【6】文件I/O和串行化
文件输入和输出(I/O)服务是所有操作系统的主要工作.Microsoft Windows提供了各种API函数用来读.写和操作磁盘文件.MFC将这些桉树和CFile类融合在面对对象的模型里.其中CFil ...
- Tensorflow 之模型内容可视化
TensorFlow模型保存和提取方法 1. tensorflow实现 卷积神经网络CNN:Tensorflow实现(以及对卷积特征的可视化) # 卷积网络的训练数据为MNIST(28*28灰度单色图 ...
- 关于Javascript你可能不知道的事
NaN表示一个不能产生正常结果的运算结果.它不等于任何值,包括它自己.可以用isNaN(number)来检测. 同Java中的字符串一样,JS中的字符串是不可变的.也就是说一旦字符串被创建,就无法改变 ...
- [C++基础]那些容易被混淆的概念：函数/数组指针-指针函数/数组，类/函数模板-模板类/函数
函数指针-指针函数 函数指针的重点是指针.表示的是一个指针,它指向的是一个函数.eg: int (*pf)(); 指针函数的重点是函数.表示的是一个函数,它的返回值是指针.eg: int* fun() ...