[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
相关文章
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)
- [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service
- [Angular] Adding keyboard events to our control value accessor component
- [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy
- [Angular-Scaled web] 4. Using ui-router's named views
- [Angular-Scaled web] 1. Architecture and file structure
- [Angular v16] Signals
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
- [Angular] Some performance tips
- [Angular 2] 8. Better ES5 Code
- [Angular-Scaled Web] 6. Navigating between states with ui-router
- [Angular-Scaled web] 5. ui-router $stateParams for sharing information
- Angular 依赖注入机制实现原理的深入介绍
- Angular应用 vendor.js里的magic number 16384是什么含义
- SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
- Angular 应用级别的依赖 Fake
- Angular如何对包含了HTTP请求的服务类进行单元测试
- 一个Angular应用开发的辅助Visual Studio Code扩展 - Dependency Tree
- Angular单元测试里使用fixture.debugElement测试UI界面元素
- Angular Component UI单元测试的隔离策略