The angular ui-router allows multiple nested views. The role of these interchangeable views seems to overlap the role of directives.
What are the pros/cons to using (multiple, nested) ui-view
s vs angular's directives?
States and routing are 2 different functions. States allow you to swap out partial.html templates and their controllers, and you can (optionally?) specify a corresponding URL/route.
In an email response from Tim Kindberg (a ui-router
dev):
ui-view is a directive, so if you use it you are using a directive that has been worked on particular to work well with the rest of the ui-router module. I can't imagine it being easy to roll your own directive to replace this functionality.
And to this, it seems you could have 2 options:
Normal Directives:
app.directive('myDir1', {/* controller: ... */})
.directive('myDir2', {/* controller: ... */})
vs ui-view "Directives"
$stateProvider.state('route1', {
/* url: "/route1", // optional?? */
views: {
"myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
"myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
}
})
Bonus question:
Are normal angular directive features available to views? Such as:
If ui-views ARE directives, it seems clear their usage is different. Wouldn't it make sense to harmonize these models?
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: