Refactor with Multi-Transclusion and Directives structure, from a Big Controller to Small UI Components
Original: Focus on Controller and Html (View)
In the original Admin Portal, the main structure is Controllers . It is the traditional Model-View-Controller (MVC) like structure. Almost all business logic is builded in Controller . Even we already have reusable S ervice package and widget Directives , but it has repetitive html layout in different controllers. Put all logic in one controller, is hard to find specify codes for maintaining and updating. That why we should refactor our admin portal with multi-transcludsion and directives , so that it would make the Reusable UI Component . Finally, We could use the same UI component, insert different html to structure different pages. After refactor with this way, it will bring lot of benefits.
The UI Component Benefits:
There are many benefits in constructing with UI components.
- Consistency — Allow developers building product features to quickly implement consistent user interfaces.
- Faster Development and Better Focus — Components hide the complexity and implementation details, allowing developers to focus on writing code for their features, speeding up development.
- Maintenance — When developer would like to improve, update and bugfixs application, keeping the changed code isolated and access target code quickly.
- For Coming Angular 2.0 — Controller will be disappear in Angular 2. It mean the business logic will be in each component, the structure of Angular 2 Component is quite like the refactoring UI component we do now.
Original: Route state, Controller and Html (View)
The entry point to each Controller is controlled by Route state . (we use ui-route)
Each state owns its Controller and Html (View). In our case, it is app-manage-controller.js and app-manage.html
app-manage.html is like:
The Controller pattern is followed by John Papa’s AngularJS style guide . It works great for Admin Portal. The View of Controller is pretty straightforward, we expand all html here except the bottom of pagination Directive. Straightforwardly, but not good to find what you would like to modify. For solving the situation, we will use UI component to make structure more component orientation. First, we needs the home html for each route state.
We replaced original app-manage.html with home html . The home html is not similar to the original html (app-manage.html) displaying whole html we can’t focus on easily. It mainly is responsible for organizing each directive for displaying clear UI components structure. Apparently, it only shows simple component html tag, no other mess html tag.
The Home html help us understand current page structure and functions quickly.
We still need the Home Controller , but we wouldn’t like to put all logic in it. It should focus on fetching datas and transmit datas to child UI components with Directive attribute . More detail, you can see the new component orientation structure of page below.
Main UI component and Multi-Transclusion
In our case, The outer wrapper is app-manage — the Main UI component . That means we have app-manage Directive. The key point is its html-template . We moved the original html layout in the html-template of app-manage Directive and put other UI components in it.
You can easily find search-panel , table-list and pagination-component UI components in the html.
Even we put the each custom Directive (UI components) in the different position here, but actually we could not do this step with ng-transclude in Angular 1.4. (Angular 1.5 is allowed now, but our Admin Portal used Angular 1.4) The ng-transclude only let us put the transclude html to the one position, not multi-position. Luckily, OpenTable provided custom Service for multi-transclude. Follow their tips, we could put the specific attribute ( transclude-to ) displayed their destination name on each Directive.
We also put the same destination name as ID to the destination on transclude-id attribute in the main UI-component template. Now we could display multi UI components in the main UI Component template.
Custom UI Component
Final step, making custom UI component the page needed. As custom Directive, the difference is we should put the logic of the Component in controller of Directive , not in home Controller. The Component will get datas with attribute , pass them to the scope property of Directive with “ = ” (two-way data binding).
Because the article talks about the refactor structure, we don’t deeply explain custom Directive properties here.
转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Refactor with Multi-Transclusion and Directives structure, from a Big Controller to Small U…