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. Maximum Product Subarray JAVA实现

    题目描述: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  2. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  3. 《Linux命令行与shell脚本编程大全》 第三章 学习笔记

    第三章:基本的bash shell命令 bash程序使用命令行参数来修改所启动shell的类型 参数 描述 -c string 从string中读取命令并处理他们 -r 启动限制性shell,限制用户 ...

  4. 【Hadoop代码笔记】Hadoop作业提交之Child启动reduce任务

    一.概要描述 在上篇博文描述了TaskTracker启动一个独立的java进程来执行Map任务.接上上篇文章,TaskRunner线程执行中,会构造一个java –D** Child address ...

  5. pomelo windows 环境

    1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program File ...

  6. Git Book 中文版 - Git的撤消操作 - 重置, 签出 和 撤消

    Git Book 中文版 - Git的撤消操作 - 重置, 签出 和 撤消 Git的撤消操作 - 重置, 签出 和 撤消 Git提供了多种修复你开发过程中的错误的方法. 方法的选择取决于你的情况: 包 ...

  7. Innodb刷脏页技术深度挖掘

    DBA某数据库集群每日17:00左右会出现一个性能陡降的现象,在10~20秒内主库出现大量慢查询.这些查询本身没有性能问题,也没有任何关联,可以认为是由于数据库系统负载较重,由于并发导致的慢查询.通过 ...

  8. HTML5几种常见的错误写法

    本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元 ...

  9. 从0,1,2...n中统计0,1,2...9各出现了多少次【SWUN1597】

    题目就是说给你一个N.计算一下从0,1,2,3,4,5,,,,,,n-1,n中计算出0,1,2,3,,,,7,8,9分别出现了多少次... #include<cstdio> #includ ...

  10. 修改浏览器accept使支持@ResponseBody

    原始:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 application/json,text/javascript, ...