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. POJ 1401 Factorial

    题意:求一个数的阶乘最后边有几个0. 解法:如果有0说明这个数含有2和5这两个因子,对于一个阶乘来说因子2的数量一定比5的数量多,所以只要算有几个5就可以了,依次算5的个数,25的个数,125的个数… ...

  2. 《Python核心编程》 第三章 Python基础 - 练习

    创建文件: # -*- coding: gbk -*- #! /auto/ERP/python_core/chapter ''' Created on 2014年5月21日 @author: user ...

  3. python测试基于websocket协议的即时通讯接口

    随着html5的广泛应用,基于websocket协议的即时通讯有了越来越多的使用场景,本文使用python中的websocket-client模块来做相关的接口测试 import webclient ...

  4. Java Spring boot 系列目录

    Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boo ...

  5. 使用 CreateInstallMedia 创建 苹果系统安装U盘

    一般来说,从app store上面 下载下来的image位置,都是在 /Applications 下面 使用命令创建安装U盘,(备份一下命令,太长,记不住) sudo /Applications/In ...

  6. ACCESS TOKEN

    Access Token 在微信公众平台接口开发中,Access Token占据了一个很重要的地位,相当于进入各种接口的钥匙,拿到这个钥匙才有调用其他各种特殊接口的权限. access_token是公 ...

  7. CSS 高级:尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  8. vs2012不能打开项目解决办法

    只要卸载这两个不定就能解决问题.

  9. libsvm使用方法总结

    1.所需要软件下载: (1)libsvm(http://www.csie.ntu.edu.tw/~cjlin/libsvm/) (2)python (3)gnuplot 画图软件(ftp://ftp. ...

  10. 如何学习java ee

    来看看Sun给出的J2EE 相关技术主要分为几大块. 1. Web Service技术 -  Java API for XML Processing (JAXP) -  Java API for XM ...