Replacing ng-router with ui-router on the Angular-

Question

problem 1: url:/home, templateUrl: 'index.html is rendering twice.

problem 2: views: templateUrl: 'views/partials/main.html is not being rendered at all

What am I missing? How do I properly integrate ui-router into yeoman's angular-fullstack generator?

app/scripts/app.js:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
            url: '/home',
            templateUrl: 'index.html',
            views: {
                '': {
                    templateUrl: 'views/main.html'
                },
                'navigation@home': {
                    templateUrl: 'views/_partials/navigation.html',
                    controller: 'NavigationCtrl'
                },

                'menu@home': {
                    templateUrl: 'views/_partials/menu.html',
                    controller: 'MenuCtrl'
                },
                'weekly@home': {
                    templateUrl: 'views/_partials/weekly.html',
                    controller: 'WeeklyCtrl'
                },
                'sidepanel@home': {
                    templateUrl: 'views/_partials/side-panel.html',
                    controller: 'SidePanelCtrl'
                },
                'shoppanel@home': {
                    templateUrl: 'views/_partials/shop-panel.html',
                    controller: 'ShopPanelCtrl'
                },
                'footer@home': {
                    templateUrl: 'views/_partials/footer.html',
                    controller: 'FooterCtrl'
                }
            }
        });
    $locationProvider.html5Mode(true);
});

app/index.html

<div class="container" ui-view></div>

app/views/main.html

    <!-- z-100 fixed-->
<section ui-view="navigation" id="navigation"></section>

<!-- z-5 fixed-->
<section ui-view="weekly" id="weekly" class="panel" ></section>

<!-- z-10 relative top:100%; margin-bottom: 33%;-->
<section ui-view="content" id="content" ></section>




<!-- z-1 fixed height: 33%;-->
<section id="footer" ui-view="footer" ></section>

<!-- z-1 fixed -->
<section id="ui">

    <div ui-view="sidepanel" id="side-panel" class="panel"></div>
    <div ui-view="shoppanel" id="shop-panel" class="panel"></div>

</section>

/lib/routes.js

  app.route('/partials/*')
   .get(index.partials);
  app.route('/*')
   .get( index.index);

lib/controllers/index.js

var path = require('path');

/**
 * Send partial, or 404 if it doesn't exist
 */
exports.partials = function(req, res) {
  var stripped = req.url.split('.')[0];
  var requestedView = path.join('./', stripped);
  res.render(requestedView, function(err, html) {
    if(err) {
      console.log("Error rendering partial '" + requestedView + "'\n", err);
      res.status(404);
      res.send(404);
    } else {
      res.send(html);
    }
  });
};

/**
 * Send our single page app
 */
exports.index = function(req, res) {
  res.render('index');
};

Answer 1

Hmm, I'm kind of confused a little by your code, but try my tweaks. I've been working on a barebones framework that stacks mongo/express/angular/node with jade as a view engine, and based on what I've seen in the lib directory of the project on github, the changes should work.

For problem #1, in your /libs/routes.js, change:

app.route('/partials/*').get(index.partials);
app.route('/*').get( index.index);

to

app.get('/partials/*', index.partials);
app.get('/*', index.index);

For problem #2, in your app/scripts/app.js, change:

 .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'index.html',
        views: {
          '': {
            templateUrl: 'views/partials/main.html'
          }
        }
      });
    $locationProvider.html5Mode(true);
  });

to

  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
        url: '/home',

        views: {
            'navigation': {
                templateUrl: 'views/_partials/navigation.html',
                controller: 'NavigationCtrl'
            },

            'menu': {
                templateUrl: 'views/_partials/menu.html',
                controller: 'MenuCtrl'
            },
            'weekly': {
                templateUrl: 'views/_partials/weekly.html',
                controller: 'WeeklyCtrl'
            },
            'sidepanel': {
                templateUrl: 'views/_partials/side-panel.html',
                controller: 'SidePanelCtrl'
            },
            'shoppanel': {
                templateUrl: 'views/_partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
            },
            'footer': {
                templateUrl: 'views/_partials/footer.html',
                controller: 'FooterCtrl'
            }
        }
      });
    $locationProvider.html5Mode(true);
  });

You will already be requesting index.html (via h t t p : / / <your host>/#/home, index.html is loaded by the web server by default more than likely), so there's no reason to request it again in your app.js file. Also, you have define the /partials/* route in your routes.js file, so that's why /views/partials was changed to /partials. Kind of pointless IMO, your /views/partials/main.html should load just fine because the framework has express static routes setup for /tmp and /app directory.

Try to visit your partials and make sure they are serving up. if you can't type h t t p : / / <your host>/<partial directory>/main.html and get the contents of the file back, ui-router won't be able to pull the contents as well. Make sure to check your DevTools for GET errors.

I apologies a head of time for any typos.