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. WPF MultiBinding 和 IMultiValueConverter

    MultiBinding,描述附加到单个绑定目标属性的Binding对象的集合.可以指定多个数值绑定. IMultiValueConverter通过转换器使用MultiBingding对象,该对象讲根 ...

  2. [Everyday Mathematics]20150117

    设 $f:\bbR^{n\times n}\to\bbR$ 适合 $$\bex f(cA+B)=cf(A)+f(B),\quad f(AB)=f(BA),\quad\forall\ c\in\bbR, ...

  3. hdu 3746 Cyclic Nacklace(KMP)

    题意: 求最少需要在后面补几个字符能凑成两个循环. 分析: 最小循环节的应用,i-next[i]为最小循环节. #include <map> #include <set> #i ...

  4. Oracle中错误代码ORA-02292 违反了完整性约束条件解决

    百度处理: A表被B表引用,删除A表的时候提示ORA-02292,A表的主键被引用了,虽然已经把B表的数据全部删除掉,但仍然删除不了A表的数据.解决办法: 用禁用约束语句把A表的主键约束给禁用掉.1. ...

  5. android:照片涂画功能实现过程及原理

    这个功能可以帮你实现,在图片上进行随意的涂抹,可以用于SNS产品. 绘图本身很简单,但是要实现在图片上指定的部分精确(位置,缩放)的绘图,就有点麻烦了. 下面讲讲实现过程及原理: UI构图 这个UI, ...

  6. 多校7 HDU5818 Joint Stacks

    多校7 HDU5818 Joint Stacks 题意:n次操作.模拟栈的操作,合并的以后,每个栈里的元素以入栈顺序排列 思路:开三个栈,并且用到了merge函数 O(n)的复杂度 #include ...

  7. Windows 窗体—— 键盘输入工作原理

    方法 注释 PreFilterMessage 此方法在应用程序级截获排队的(也称为已发送的)Windows 消息. PreProcessMessage 此方法在 Windows 消息处理前在窗体和控件 ...

  8. makefile、gdb使用记录

    makefile的模板 all: rover server station rover: rover.c tcputil.o gcc rover.c tcputil.o -o rover -lpthr ...

  9. HYSBZ 2243-染色 (树链剖分)

    1A!!! 哈哈哈哈哈没看题解 没套模板哈哈哈哈 太感动了!! 如果只是线段树的话这道题倒是不难,只要记录左右边界就好了,类似很久以前做的hotel的题 但是树上相邻的段会有连续的 树上top[x]和 ...

  10. 【转】Maven实战(三)---插件动态打包

    原博文出于:http://blog.csdn.net/liutengteng130/article/details/41622013    感谢! maven把项目的构建划分为不同的生命周期(life ...