[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