5

I recently split out a rails app I had and created the front end as a separate app with yeoman. For some reason my views no longer render, for example my app defines:

    'use strict';

    var actionTrackApp = angular.module('actionTrackApp', [ 'ui.router', 'ngGrid']);
    actionTrackApp.config(function($locationProvider) {
      return $locationProvider.html5Mode(true);
    });
    actionTrackApp.config(function($stateProvider){
      $stateProvider
        .state("packageIndex", {
          url: "/packages",
          views: {
            "main": {
              controller: "ApplicationCtrl",
              template: "<h1>Test</h1>"
            },
            "": {
              template: "<h1>Test2</h1>"
            }
          },
          resolve: {
            test: function(){
              console.log("test")
            }
          }
        })  
    });

and in my index.html file I have:

bodytag ng-app="actionTrackApp" ng-controller="ApplicationCtrl">
    your site or application content here<a href='/packages'>Package Index</a>

    <div ng-view="main" class="container"></div>
    <div ng-view=""></div>
/bodytag

When i click the link the resolve property does resolve and I see "test" in the console. I tried attaching $routeChangeStart/success watches on applicaiton controller but neither start/success fire here.

jvans
  • 2,765
  • 2
  • 22
  • 23
  • You can only have one `ng-view` defined. – zs2020 Oct 02 '13 at 02:35
  • No you can use multiple views. It doesn't work with 1 either though – jvans Oct 02 '13 at 02:36
  • Found this from another SO question: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview ,multiple views isn't the problem. I did try it with one as well ofc and still not rendering – jvans Oct 02 '13 at 02:42
  • 1
    You are using ui-router which takes `ui-view` directive not `ng-view`. Change your directive to `ui-view`. Also i am not sure if empty view name is allowed if you are using named view. – Chandermani Oct 02 '13 at 05:18

1 Answers1

4

I took a look at your code and found a couple issues

  1. to reference ui-router views, you must use the directive ui-view, not ng-view
  2. the "" view is incorrectly defined - you must use a valid key name, I changed it to aand updated the reference in the html

After I made these changes, all works as expected here: http://plnkr.co/edit/lxAUGMqajwI461VKz8xo

ps: I went ahead and used ui-sref on your link instead of hard-coding the /package url...

bendalton
  • 778
  • 6
  • 8
  • Awesome that was it. Thanks for your help. ui-sref is definitely the right approach here as well. I think "" is valid though. I played with your plunker and it still works with ui-view="" and views: { "": {template: "

    Test2

    "}}.     – jvans Oct 02 '13 at 05:36
  • Aha... interesting, I guess I was wrong about the empty string key... good to know. – bendalton Oct 09 '13 at 19:57