Angular ui-router: ui-views vs directives?
How about if you used Angular UI router's inline views to point to directives?
Let's say you have a directive for a table that handles CRUD operations on user accounts. We'll say the directive is named user-admin
. Our routes file would look like:
.state('users', {
url: '/users',
template: "<user-admin>"
});
This would give you many nice things:
- Allow you to have a url that points straight to a directive
- Removes the duplication of needing two templates (view template and directive template) when a state is just a directive
- Allow you to start moving more controller logic into directives in prep for Angular 2.0. See here and here.
After some thinking/ correspondence, here's my conclusion:
ui-views define containers, and states define what goes in those containers
When you put a ui-view='containerName'
directive on an element, you're setting up a container that holds something. You haven't yet said anything about what goes in there.
When you create your $stateProvider.state(...)
definitions, you're specifying what goes in these containers:
$stateProvider.state('someState', {
views: {
"containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
"container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
}
})
Can you use all the traditional directive functionality (transclude, replace, isolate scoping, compile/linking functions) with your ui-views? I'm not sure. For example:
$stateProvider.state('someState', {
views: {
"containerName": {
templateUrl: "someContents.html",
scope: { localVar: "@" }, // can you
transclude: true, // do this?
controller: function(){}
},
"container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
}
})
In conclusion, it seems like each option has its tradeoffs. Directives have some additional features, yet ui-views are interchangeable and can have routes associated.