ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.

angular.module('app', ['ui.router', 'ui.bootstrap'])

    .config('home', function($stateProvider){
$stateProvider.state('home', {
url: "",
controller: "HomeController as homeCtrl"
templateUrl: "templates/home.tpl.html"
})
}) .controller("HomeController", function(){
var homeCtrl = this; homeCtrl.content = "Content from the controller";
}) .directive('appHeader', function(){
return{
controller: "AppHeaderController as headerCtrl",
templateUrl: "templates/appHeader.tpl.html"
}
}) .controller('AppHeaderController', function(){
var headerCtrl = this; headerCtrl.content = "This content if from header";
});

What we can see now is that our controllers are pretty much exactly the same in the way that we set them up and configure them. Our directive configuration object here is pretty much the same as our state provider configuration object here.

One difference that you can notice is that we do have a function here wrapping around this return statement. Now that using a controller is more common place this could actually go away, but I don't see that happening anytime soon.

The other idea or concept which is very similar is using state params to pass in data from the URL and scope to pass in data through attributes on the element. The pattern that we've really seen emerge here is defining a configuration for your state from the state provider, having a controller handle all of the code and the APIs for the different services you're going to access, and then just dropping everything in your template to design what that state looks like.

Those exact same ideas apply to directives as well, where this is your configuration on how to set up your directive, this is all of your code and APIs to access services, and this is just your template. What this means is that if you have a directive that you think is getting too big or too much for just a component, it could easily evolve and grow into a state. Or if you have a state which you think is too small for taking up an entire view, you could shrink that down into a directive component.

See more: https://egghead.io/lessons/angularjs-consistency-between-ui-router-states-and-angular-directives

[AngularJS] Consistency between ui-router states and Angular directives的更多相关文章

  1. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  2. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  3. AngularJS学习之 ui router

    1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...

  4. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

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

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

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

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  8. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  9. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

随机推荐

  1. [Everyday Mathematics]20150115

    试计算积分 $$\bex \int_{-\pi}^\pi \frac{\sin nx}{(1+2^x)\sin x}\rd x, \eex$$ 其中 $n$ 是自然数.

  2. visual studio 2013 配置 ef+pgsql

    环境:VS2013,WIN7 准备工作: 1.有哪些供应商提供EF6的支持? 可以看msdn给出的答案:Which providers are available for EF6? 在本文使用 Dev ...

  3. web自动化框架之一介绍与环境搭建(Selenium+Eclipse+Python)

    看到一篇环境搭建文章,详细又全面,这里就不一一重复了 http://blog.csdn.net/dyllove98/article/details/9390649 其它: 1.框架介绍      整个 ...

  4. 【STL】帮你复习STL泛型算法 一

    STL泛型算法 #include <iostream> #include <vector> #include <algorithm> #include <it ...

  5. Rust 中的继承与代码复用

    在学习Rust过程中突然想到怎么实现继承,特别是用于代码复用的继承,于是在网上查了查,发现不是那么简单的. C++的继承 首先看看c++中是如何做的. 例如要做一个场景结点的Node类和一个Sprit ...

  6. Eclipse中设置在创建新类时自动生成注释的方法

     windows–>preference Java–>Code Style–>Code Templates code–>new Java files 编辑它 ${filecom ...

  7. Android相关图书推荐

    疯狂Android讲义(第3版 附光盘) 作      者 李刚 著 出 版 社 电子工业出版社 出版时间 2015-06-01 版      次 3 页      数 780 印刷时间 2015-0 ...

  8. centos编译helloworld的几个小问题

    1.GCC使用在使用GCC编译程序时,编译过程可以被细分为四个阶段:预处理(Pre-Processing)编译(Compiling)汇编(Assembling)链接(Linking).例如:      ...

  9. POJ3237-Tree (树链剖分,线段树区间更新+点更新+区间查询)

    两个更新操作,一个将第i条路径权值改为w,一个是将a-b之间所有路径权值取反. 一个查询操作,求a-b之间路径中权值最大的边. 很容易想到维护一个最大最小值,取反就是把最大最小取反交换一下. 开始遇到 ...

  10. homework-05

    经过这几天的深思熟虑我和小明同学将这次作业基本的完整了,可能界面略丑陋,但是基本功能均已实现.我们的服务器端采用python编写,因为服务器端是这次作业的难点,而python中有一个叫做web.py的 ...