ui-view in Jade file doesn't work

[robhicks]

This seems to follow the documentation for nested states.

http://plnkr.co/edit/fp09uXZ8xM2suQBwvXr7

EDIT: updated title for more clarity.

[robhicks]

Okay, I modified it to work.

But I still can't get route state changes for children routes to work. I'm using the same structure as the plunker I linked above. When the state is changed through a link, the html is fetched from the server but never gets injected into the dom at the ui-view div. Looking at the state in the dom, this is what I'm seeing:

{"params":{},"current":{"url":"/sys_users","templateUrl":"/system/partials/sys_users","controller":"SysUsersCtrl","name":"system.sys_users"},"transition":null}

When a change occurs:

{"params":{},"current":{"url":"/all_users","templateUrl":"/system/partials/all_users","name":"system.all_users"},"transition":null}

I noted in both that transition is null. Should it be?

[timkindberg]

Everything looks to be working for me. I can navigate around with the links and even type the url into the address bar and its all working as expected.

[robhicks]

The plunkr works but I can't get my app to work.

I need to know how to debug ui-router in a more complex scenario.

In the app that I am porting it to use ui-router (previously used angular router and ng-includes), I have the following main page:

header with navigation
div(ui-view)
footer

Then for each main route that is added to the first ui-view, I have several sub routes. Each of these sub route partials includes:

left column menu
right column with a ui-view

I can't get these subroutes to work. Ui router fetches the partials for the right column ui-view but they are never added to the dom. I have looked at the directive that seems responsible for making the dom changes but it is beyond my skill level.

I would really like to use ui-router. Any help would be appreciated.

[timkindberg]

Can you post snippets of your actual code? Maybe the plunkr had some difference that we can detect that you are overlooking...

[nateabele]

I noted in both that transition is null. Should it be?

$state.transition is a promise that represents the transition taking place, and is only non-null pending completion of template-loading, resolves, animation, and state events.

The plunkr works but I can't get my app to work.
I need to know how to debug ui-router in a more complex scenario.

We can't debug what we can't see, so I'm not sure how we're supposed to help you. All I can suggest is that you either pare down your existing app to fit in a plunkr which we can help you debug, or download the plunkr code and scale it up to your app, incrementally checking to see if anything breaks.

[robhicks]

Thanks for your input.

I finally made it back to this problem and have updated the plunkr to demonstrate what I'm seeing in my app.

http://plnkr.co/edit/fp09uXZ8xM2suQBwvXr7

Note that the Create Account and Logout links don't work. I believe they are mapped correctly but transitions are not made and no console errors occur.

Thanks for your help.

[laurelnaiad]

here is a modified plunker

Of note:

• 'auth' is abstract
• otherwise points to /auth/login
• child states inherit their parent's url as a prefix.
• you don't have a logout route/state so it doesn't find it.

Key changes:

    $urlRouterProvider.otherwise("/auth/login");
    $stateProvider
        //Authentication Routes
        .state('auth', {url: "/auth", abstract: true, templateUrl: "auth.html", controller: 'AuthCtrl'})
        .state('auth.login', {url: "/login", templateUrl: "login.html", controller: 'LoginCtrl'})
        .state('auth.createAccount', {url: "/create_account", templateUrl: "create_account.html", controller: 'CreateAccountCtrl'})

                  <a href="#/auth/create_account">Create Account</a> 

and

              <a href="/auth/logout">Logout</a>

[robhicks]

Stu,

Thanks for your help!

[robhicks]

I have been trying to play with angular-ui-router from time to time. I think it is a great project and I would like to use it in a future.

However, while I can get a plunker to work, using standard hmtl, I develop using ExpressJS (Jade), NodeJS and Angular. I can't get angular-ui-router to work in my development environment.

To demonstrate the difference, I have used angular-seed and angular-express-seed as starting points. angular-express-seed is based upon angular-seed. It simply converts angular-seed to use a different file structure, server routing mechanism (Express) and support Jade.

Since angular-seed is html based, it is fairly easy to modify it to work with angular-ui-router. To demonstrate, I forked and modified it. It can be found at https://github.com/robhicks/angular-seed.

After modifying angular-seed to support angular-ui-router, I also forked and modified angular-express-seed. The modified version is at https://github.com/robhicks/angular-express-seed.

You'll note that I added children routes of both view1 and view2. They work with angular-seed and do not work with angular-express-seed. No errors are thrown. It simply doesn't work. I can't figure out why.

Any help would be appreciated.

Rob

[laurelnaiad]

@robhicks I use jade and express with ui-router all the time (although I convert from jade to html at build time). Nothing's wrong with ui-router in this regard. You might want to post something sort of like this on stackoverflow.... after you've exhausted the routes you have available (logging, debug breakpoints, etc).

EDIT: I guess more generally, the problem you're presenting is very general and asking a lot of people, especially since you can't get it into a plunker. With express, obviously you can't do so, but it has an issues list, too, and so does Jade! This just doesn't feel like a ui-router issue.

[robhicks]

Stu,

I can appreciate that it appears too broad.

The basic problem is that I can't get angular-ui-router to add children partials to the dom.

Since your last post, I have spent several hours trying to figure out what is happening. What I can say is this:

1. the dom delivered by express and by file are identical in the browser.
2. the javascript configuration of angular is identical.

config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/view1");
$stateProvider
.state('view1', {url: "/view1", templateUrl: "partials/partial1", controller: 'MyCtrl1'})
.state('view1.subpartial1', {url: "/subpartial1", templateUrl: "partials/partial1subpartial1"})
.state('view1.subpartial2', {url: "/subpartial2", templateUrl: "partials/partial1subpartial2"})
.state('view2', {url: "/view2", templateUrl: "partials/partial2", controller: 'MyCtrl2'})
.state('view2.subpartial1', {url: "/subpartial1", templateUrl: "partials/partial2subpartial1"})
.state('view2.subpartial2', {url: "/subpartial2", templateUrl: "partials/partial2subpartial2"});
}
]);

1. When a route is selected (via link or $state.go()), angular retrieves all partials including children partials.
2. In the case of the expressjs app, angular-ui-router does not add children partials to the dom. More specifically, in line 95 of viewDirectives.js, the child partials (strings) are empty when passed to the render function.

I would ask questions on stackoverflow about jade and express but i am positive they are not the problem. As mentioned, the html delivered to the browser from expressjs and static file read are identical. Also, the loading order of all the javascript is identical.

I am more than willing to delve deeper into debugging if you can give me some guidance.

Rob

[timkindberg]

Using angular 1.1.5? Using html5mode?

[nateabele]

Well, I suppose by virtue of the fact that one scenario works and the other one doesn't, they are not, in fact, identical.

I assume you've verified (via Web Inspector or whatever), that Express is actually serving the templates correctly?