zoukankan      html  css  js  c++  java
  • [AngularJS] Consistency between ui-router states and Angular directives

    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

  • 相关阅读:
    第一章 数据库概论
    规范化
    qt mysql驱动问题解绝
    linux文件系统软链接硬链接
    linux命令总结
    shell应用技巧
    如何使滚动条保持在页面底部
    地图定位问题汇总
    webpack基本用法
    git异常操作解决办法合集
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4200262.html
Copyright © 2011-2022 走看看