Mike Lewis Mike Lewis - 5 months ago 88
AngularJS Question

Angular ui-router: ui-views vs directives?

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)

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-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:

  • Transclude

  • Replace

  • Isolate scoping

  • Compile / linking functions

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:

  • 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.