search

angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.53k stars 3k forks source link

Child templateURL: is never requested from server, and its controller function doesn't run. #277

Closed JimtotheB closed 11 years ago

JimtotheB commented 11 years ago

From the example, this works just fine. Output is as expected. html5 mode is set to true.

        .state('route2', {
          url: "/route2",
          template: "<p>hey Buddy</p><div class=\"ui-view\"></div>",
          controller: ratingListProductsEngine
        })
        .state('route2.list', {
          url: "/list",
          template: "<p>{{things}}</p>",
          controller: function($scope){
            $scope.things = ["A", "Set", "Of", "Things"];
          }
        })

However, when I try this, "rating.ratingList" never even gets requested. I can load up all of my parent templates just fine but the children do nothing.

    .state('rating', {
      url: "/ratings",
      templateUrl: '/partials/ratemaster',
      controller: ratingEngine
    })
      .state('rating.ratingList', {
        url: "/all",
        templateURL: '/partials/ratelist',
        controller: ratingListProductsEngine
      })

This doesnt work either, just to check my settings, it doesn't request the child partial either.

    .state('route2', {
      url: "/route2",
      template: "<h1>hey Buddy</h1><div class=\"ui-view\"></div>",
      controller: ratingListProductsEngine
    })
    .state('route2.list', {
      url: "/list",
      templateURL: '/partials/somesimplehtml',
      controller: function($scope){
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    })

Am I missing something? Am I doing something wrong? Is it not possible to request server side html for child templates?

KilianSSL commented 11 years ago

Also facing this issue. Was able to make it work temporarly by using this implementation:

.state('route2', {
  url: "/route2",
  template: "<h1>hey Buddy</h1><div class=\"ui-view\"></div>",
  controller: ratingListProductsEngine
})
.state('list', {
      url: "/list",
      parent: 'route2', 
      template: "<p>{{things}}</p>",
      controller: function($scope){
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    })

However this leads into the problem that you can only use one state with the name "list". So it's not a solution.

timkindberg commented 11 years ago

Check the FAQ in the wiki. The issue about templates not loading.

JimtotheB commented 11 years ago

Templates load just fine, child templates do not.

timkindberg commented 11 years ago

If you can reproduce the issue in a plunkr I'll take a look.

Only other idea is that maybe you are accessing the nested state from the incorrect url?? You are going to "/ratings/all" right?

timkindberg commented 11 years ago

what url are you trying to access rating.ratingList and route2.list?

It should be:

JimtotheB commented 11 years ago

Pretty sure I'm hitting the correct url, as it works when I'm not hitting a remote url for the template... The first commenter on this issue apparently had the same problem. It also does nothing if I set it programically.

timkindberg commented 11 years ago

Didn't mean to close the issue. Can you make a plunkr?

JimtotheB commented 11 years ago

I tried to but it throws an origin policy error if I try to load my template and I'm not sure how else to make it request a remote url. On Jul 24, 2013 9:26 AM, "Tim Kindberg" notifications@github.com wrote:

Didn't mean to close the issue. Can you make a plunkr?

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21484222 .

timkindberg commented 11 years ago

You should be able to create all those files in the plunkr right? Don't import your remote url, just make an identical template within plunkr.

JimtotheB commented 11 years ago

Well its dynamically generated from express. And we already know that http://plnkr.co/edit/u18KQc?p=preview example loads templates just fine. I can take the example routing from that page, and it works on my server/client, until I attempt to load the child template via url. The only think I didn't try is actually giving it a pre rendered .html file, as I have zero use for doing that in my application. My partials loading code in express:

exports.loadPartials = function(req, res){
  res.render('angularPartials/' + req.params.name, {}, function(err, html){
    if(!err){
      res.end(html)
    }
    else {
      console.log(err)
      res.redirect('/404')
    }
  });
}

I can hit the existing partials just fine from the urls and as I said the master view loads up just fine.

timkindberg commented 11 years ago

And you tried to add <base href> as this FAQ explains? https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading

JimtotheB commented 11 years ago

Yep. I added that.

timkindberg commented 11 years ago

Hmmm, I guess try a regular html template just to see what happens.

nprbst commented 11 years ago

You might try building Angular 1.1.6 from github and using that instead of 1.1.5. I had a similar issue and that solved it for me...

On Wednesday, July 24, 2013, PaperElectron wrote:

Yep. I added that.

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21485938 .

Nathan Probst CTO - Rebit, Inc. 720.204.3359 office 970.402.7384 cell

Joebob12 commented 11 years ago

I also have this problem, gonna try and throw up a plunker later today. EDIT: went ahead and tried building with angularjs 1.1.6 and still have the problem. Working on plunker...

Joebob12 commented 11 years ago

And Here is the Plunker. So it just shows route 1 even when route 1 sub should display route2.html. http://plnkr.co/edit/gxYUJaH6lwzMJxBve85C?p=preview

jeme commented 11 years ago

That is the classic "people don't understand how the views work"... And to be fair to you @Joebob12, they can be some bloody bastards to get to work right, even I gave up on them and went back to my own solution... I also think we have had enough issues posted that rooted in how they work as an indicator that they might not be easy to understand, just saying...

Making the following changes to your app should make it work in the case it seems you wan't it...

<div ui-view="view"></div>
  $stateProvider
    .state('route1', {
            url: "/route1",
        views: {
          'view@': {
            templateUrl: "route1.html"
          }
        }
    })
    .state('route1.sub', {
            url: "/sub",
        views: {
          'view@': {
            templateUrl: "route2.html"
          }
        }
    })
    .state('route2', {
            url: "/route2",
        views: {
          'view@': {
            templateUrl: "route2.html",
          }
        }
    })

That is because you only use one root view (which UI-Router goes beyond)... so when you click state 2, it looks for a unnamed view inside the template for Route1 to populate, but there is none...

But as that stands, why is "route1.sub" a child route in your case, doesn't seem to be needed here?.

JimtotheB commented 11 years ago

Ahh yeah, the old blame it on the stupid users bit. Funny that the documented usage doesn't work, we must all just be stupid. On Jul 26, 2013 11:35 AM, "Jens Melgaard" notifications@github.com wrote:

That is the classic "people don't understand how the views work"... (And to be fair to you @Joebob12 https://github.com/Joebob12, they can be some bloody bastards to get to work right, even I gave up on them and went back to my own solution)

One way will to make the following changes.

$stateProvider .state('route1', { url: "/route1", views: { 'view@': { templateUrl: "route1.html" } } }) .state('route1.sub', { url: "/sub", views: { 'view@': { templateUrl: "route2.html" } } }) .state('route2', { url: "/route2", views: { 'view@': { templateUrl: "route2.html", } } })

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21628263 .

jeme commented 11 years ago

@PaperElectron Please read all that I wrote, I do in no way blame the users... On the contrary.

JimtotheB commented 11 years ago

That is the classic "people don't understand how the views work"... Could have fooled me? How exactly are people not understanding when the documented usage doesn't work? I don't have hours and hours to dig into something to learn it's idiosyncrasies, especially if simple behavior doesn't work as advertised. On Jul 26, 2013 11:41 AM, "Jens Melgaard" notifications@github.com wrote:

@PaperElectron https://github.com/PaperElectron Please read all that I wrote, I do in no way blame the users...

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21628755 .

jeme commented 11 years ago

@PaperElectron ... yes... and then continue reading the next few lines...

The fact is that many people doesn't understand how the views work... but I never said whom of the two sides was the "stupid" part... my next few lines might have given a clear indication on where I stand on that, although I choose to keep things diplomatic...

JimtotheB commented 11 years ago

Yeah? I read that as "you don't understand views, here is an example that works" if that's not what you mean, great.

That is the classic "people don't understand how the views work"... Could have fooled me? How exactly are people not understanding when the documented usage doesn't work? I don't have hours and hours to dig into something to learn it's idiosyncrasies, especially if simple behavior doesn't work as advertised. On Jul 26, 2013 11:41 AM, "Jens Melgaard" notifications@github.com wrote:

@PaperElectron https://github.com/PaperElectron Please read all that I wrote, I do in no way blame the users...

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21628755 .

jeme commented 11 years ago

@PaperElectron Here... let me help you: https://github.com/angular-ui/ui-router/issues/277#issuecomment-21628263

Open the page.

Reading git issues in mail trails are annoying as it doesn't get the edits, and I have a filthy habit of "saving often", and I would recommend to always open the page before reacting negatively to make sure you got all the context correctly.

JimtotheB commented 11 years ago

Makes more sense now, it wasnt exactly clear who you were criticizing. In this case, you can direct my comments to your intended party.

And as an aside, I've moved on to my own solution as well. On Jul 26, 2013 11:53 AM, "James Bulkowski" james@monstertke.com wrote:

Yeah? I read that as "you don't understand views, here is an example that works" if that's not what you mean, great.

That is the classic "people don't understand how the views work"... Could have fooled me? How exactly are people not understanding when the documented usage doesn't work? I don't have hours and hours to dig into something to learn it's idiosyncrasies, especially if simple behavior doesn't work as advertised. On Jul 26, 2013 11:41 AM, "Jens Melgaard" notifications@github.com wrote:

@PaperElectron https://github.com/PaperElectron Please read all that I wrote, I do in no way blame the users...

— Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/ui-router/issues/277#issuecomment-21628755 .

timkindberg commented 11 years ago

@PaperElectron, sorry you've experienced trouble with the nesting. I'm sure that @jeme was simply referencing the on-going rampant issue/discussion about new users not easily understanding how the states nest. Its a problem that keeps cropping up. So I think @jeme was kind of telling us (the ui-router team) that "hey! here's another example and this is a problem".

Anyway, I personally like how the nesting works (I am biased though). You just need to understand that children states, by default, plug their templates into the parent state's ui-view, NOT index.html's ui-view. Only top level states will plug into index's ui-view because that's essentially their "parent".

I forked your plunkr (that just sounds dirty) and made some mods. I added a ui-view to route1.html and that's it! Now it works. http://plnkr.co/edit/dTopUAjVt4c7rUuL1kDE?p=preview

FYI, your code did not technically match any of the doc examples (it kind of mimicked), but I will admit that the nesting is confusing at first. I hope this helps clear things up a bit.

JimtotheB commented 11 years ago

Im not sure how this

  $stateProvider
    .state('route1', {
        url: "/route1",
        templateUrl: "route1.html"
    })
      // This guy's template will get plugged into 'route1' ui-view, NOT index.
      .state('route1.sub', {
          url: "/sub",
          templateUrl: "route2.html",
     })
    .state('route2', {
        url: "/route2",
        templateUrl: "route2.html",
    })  
})

is substantially different than this

$stateProvider
  .state('rating', {
      url: "/ratings",
      templateUrl: '/partials/ratemaster',
      controller: ratingEngine
    })
  .state('rating.ratingList', {
    url: "/all",
    templateURL: '/partials/ratelist',
    controller: ratingListProductsEngine
      })
})

But that is neither here nor there, the examples worked just fine for me until I changed the templateURL to a remote location then they didn't load. As long as it was template: "Some HTML' it worked fine, nested templates and all. There were several commenters above me that noted this, offered solutions, and blamed it on angular.

Joebob12 commented 11 years ago

I would definitely like to see "view@" as an example in the documentation. The way it works is what I was looking for with my accordion menu. I see now how the top level views are only loaded into the view but certainly @jeme answer is clearly needed in the docs to explore the differences in how the templates are rendered into view.

timkindberg commented 11 years ago

@Joebob12 there is a section about view targeting in the wiki. I'd link but I'm on my phone.

jeme commented 11 years ago

@timkindberg mr. lazy! :-P https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names

timkindberg commented 11 years ago

Oh crap I just realized that the docs have some errors in the code comments. The first two examples are supposed to say contact.details *parent

I'll fix later.

timkindberg commented 11 years ago

ok i have to apologize, because man the docs were so f'd up, mainly the Multiple Views page. But I've editing the whole thing extensively. I really hope it makes sense now and doens't mislead anyone. The old docs were blatantly saying to target the view within the state you declare the views in, so I fixed all those to target the parent. It was just a mess. Sorry @PaperElectron.

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views