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

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


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.