[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 and how these patterns has emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your apps 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(){        varHomectrl = This; Homectrl.content= "Content from the controller"; }). directive (' Appheader ',function(){        return{controller:"Appheadercontroller as Headerctrl", Templateurl:"Templates/appheader.tpl.html"}}). controller (' Appheadercontroller ',function(){        varHeaderctrl = This; Headerctrl.content= "This content if from header"; });

What we can see now is, our controllers is pretty much exactly the same them. Our directive configuration object are pretty much the same as our state provider configuration object here.

One difference that's can notice is the We do has a function here wrapping around this return statement. Now, the using a controller is more common place the could actually go away, but I don ' t see that happening anytime soon.

The other idea or concept which are very similar is using the state params to pass in data from the URL and scope to pass in Da Ta through attributes on the element. The pattern that we've really seen emerge here's defining a configuration for your state from the state provider, have 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 is the state looks like.

Those exact same ideas apply to directives as well, where the is your configuration on how to set up your directive, this Is all of the Your code and APIs to access services, and the is just your template. What's this means is so if you had a directive that think was getting too big or too much for just a component, it cou LD easily evolve and grow into a state. Or If you had a state which you think be too small for taking up an entire view and you could shrink then down into a di Rective 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