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属性.

启动应用

[email protected]:~/code/work$ gulp

默认定位到 /blog 母版视图,

修改url到/blog/234234 定位到博客详情页视图

时间: 2024-10-27 12:57:25

ui-router(三)controller与template的相关文章

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

ios-用xib和UI table View controller 的团购网站

首先 素材 照例是照片和plist文件 然后依旧是 字典转模型 UI table View controller 的缺点是 不能灵活控制 图片的大小 和布局 所以 新建一个xib文件,然后新建同名的类  xib继承此类 里面的控件可以拖线到类中 // // Tg.h // 团购网 // // Created by YaguangZhu on 15/8/18. // Copyright (c) 2015年 YaguangZhu. All rights reserved. // #import <F

Angularjs ui router,路由嵌套 父controller执行问题

路由路径设置:structured.text   :structured是第一层路由,text是第二层路由: 问题如下,当$state.transitionTo路由到第二层是,structured的controller也会执行一次,导致页面控件重新加载刷新. $state.transitionTo( "structured.text", { args : $stateParams }, { reload: false} ); 查了github看到 https://github.com/

UI第三课

主要内容:自定义视图.视图控制器 一.自定义视图 自定义视图:除系统提供UI之外,开发者自己组合而出的新的视图 根据需求不同,自定义视图要继承的类也不同,一般自定义的视图会继承于UIView: 步骤: 1.创建一个UIView的子类 2.在类的初始化方法中添加子视图 3.类的 .h 文件提供了一些接口(方法),便于外界操作子视图 二.视图控制器(UIViewController) 控制视图显示,响应事件,分担AppDelegate工作,实现模块的独立,提高复用性 功能: 1.控制视图大小变换.布