The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

AngularJS Architecture: Using ui-router's named views

AngularJS Architecture: Using ui-router's named views

8:03
We'll take a deeper look at ui-router as we introduce named views into Eggly. We will take the basic state that we defined in the previous video and refactor it so that it consists of two unique views within the application.
Watch this lesson now
Avatar
egghead.io

We'll take a deeper look at ui-router as we introduce named views into Eggly. We will take the basic state that we defined in the previous video and refactor it so that it consists of two unique views within the application.

Avatar
Danny

in categories.js, by injecting $stateProvider a dependency on the ui.router module created. Should that be made explicit in the module definition? (again in later video in the series when injecting the $state service into a controller.)

// categories.js
angular.module('categories', [
  'eggly.models.categories',
  'ui.router'  // <= required
])
In reply to egghead.io
Avatar
Joel

It isn't required, but if you want to test the controller/module later it will throw an error.

I've also run into order-of-operations issues with the top level app module ui.router import. It needs to be above modules that require it.

So, with those two things in mind, it is a good idea to explicitly declare a module's dependencies.

In reply to Danny
Avatar
Fang

what's interesting to me is that MainCtrl is parent of two ui-views which convert to BookmarkCtrl and CategoryCtrl, so how does the scope work ?

because in the BookmarkCtrl template, ng-repeat needs to ask $scope.bookmarks, is the bookmarks here same as the one in the MainCtrl ?

maybe you will talk about in the next video :)

In reply to egghead.io
Avatar
James

So, I get that a lot of people wonder how to handle sub views and the like in angular, but is this not what directives and transclusion are for? I know that for many people directives are the 'hardest' part of angular to learn but as a teaching resource would it be better to point people to directives as a solution to their problem?

Im just curious about the decision process for using ui-router for this feature? (Its better then ng-route just because of the ui-serf function but Im not sold on named views).

Nice demo though :) Keep up the good work.

Avatar
Robbie

Hi, Ive been having real problems on this section. Up to the start of the video I had everything working has planned. By the time I end this video I get almost nothing (other than the background css stuff main body/sidebar.)

Whats weird is that if I put my no named ui-view back in to the container-fluid, and keep my first view as
.state('eggly',{
url:' ',
templateUrl:'app/categories/categories.tmpl.html',
controller:'MainCtrl'
});
})
then I can get the body of the site to display whatever I want in the categories.tmpl.html.

However when I take the no named ui-view away I get blank. I've even tried copying code across from you completed code but still no luck. Do you know how I can go about debugging? There are no errors in console.

In reply to egghead.io
Avatar
Mike

I was just going through this today and ran into the same issue. The problem for me was that while writing the views in the categories.js file I copied the first
'categories@': {
controller: 'CategoriesCtrl',
templateUrl: 'app/categories/categories.tmpl.html'
},
to make the bookmarks but didn't update the templateUrl to account for the fact that the bookmarks.tmpl.html was inside the bookmarks folder and not the categories folder. After fixing this error I got everything working as normal. It's a long shot if that's your problem but it just happened to explain the exact same problem I was having. So maybe the solution will be the same :)

In reply to Robbie
Avatar
Joel

ui-routers #1 flaw IMO is the debugging. It fails silently providing no context for debugging. If a view is specified, but no matching target is found, it doesn't say a word!

These errors are almost always a missing ui-view or there is a string with a typo someplace.

Regardless, it is impossible to debug this without the code in context!

Avatar
Guillaume

Question. I have almost the same setup, a main app with submodules, I use ui.router in all the submodules. But I couldn't make it work initially, I had a loading module error from Angular. I was able to solve it by putting ui.router as the first dependency in the main module. But I don't understand why it works. If I put my submodules first and ui.router after in the main module, then I have to redefine the ui.router dependency in my submodules. If I put ui.router first, then I don't need. I'm surprised. I'm sure I'm missing something simple here, any idea? Thanks!

Avatar
Tom

@Robbie
I had the same issue and after about 1/2 hour of individually inspecting every character and comparing with the vid I realised I had "view" instead of "views" in the categories.js state definition.

In reply to Robbie
Avatar
Paul Mark Quinn

It was bizarre for me in that, it would only work after I actually removed abstract and url from the base module state config:

.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eggly', {
//url : '/',
//abstract : true
})
;

$urlRouterProvider.otherwise('/');

})

Avatar

Good call. Same situation here. The commenting out worked.

In reply to Paul Mark Quinn
Avatar
Aaron Endsley

Im getting an injector error saying $urlRouteProvider

In reply to
Avatar
Aaron Endsley

Ha Ha Never Mind I Mistyped its supposed to be $urlRouterProvider

In reply to Aaron Endsley
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?