0

I'm trying to keep my index.html file clean and abstract out the navigation along with the partials that I load in there. I want to specify that my nav.html file should load in every page and have something like this:

index.html

...
<body ng-app="myApp">
  <div ui-view="views/nav.html"></div>
  <div ui-view=""></div>
</body>
...

app.js

...
  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'views/main.html',
        controller:'MainCtrl'
      })

      .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller:'AboutCtrl'
      });
  });

This of course doesn't seem to be working, but I'm sure there's a way to do it and can't seem to find the answer. Can anyone enlighten me? Using Angular 1.3.0 & ui-router 0.2.13 - New to angular and would appreciate any help!

hummmingbear
  • 2,294
  • 5
  • 25
  • 42

2 Answers2

1

If you just want to include navigation bar in every page, you should use this code

<body ng-app="myApp">
  <div ng-include="'views/nav.html'"></div>
  <div ui-view=""></div>
</body>
nnc1311
  • 89
  • 2
0

After a bit more research, there's a way to do this within ui-router and abstracting the states out. Maybe someone can mark this as a duplicate and link to this question: Angular ui router multiple named views for all states

Community
  • 1
  • 1
hummmingbear
  • 2,294
  • 5
  • 25
  • 42