How to display nav menu while using ui router

Question

I'm trying to display navigation bar menu items using ng-repeat and I'm using ui router simultaneously, but output is not what I expected.

<!--HTML-->
 <body>
 <div ng-app="navApp" ng-controller="navCtrl">
            <a  ng-repeat="item in navItems" ui-sref="{{item.sref}}">{{item.label}}</a>   
  </div>
  <div ng-app="mainApp">
      <div ui-view></div>
  </div>
 </body>

//JS
angular.module('navApp', []).controller('navCtrl', function($scope){
    $scope.navItems = [
        {'sref': 'home', 'label': 'Home'},
        {'sref': 'login', 'label': 'Login'},
        {'sref': 'signup', 'label': 'Signup'},
        {'sref': 'other', 'label': 'Label'}
    ];
});  


var app = angular.module('mainApp', ['ui.router']);

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

   $stateProvider.state('login', {
      url: '/login',
      templateUrl:'login.html',
      controller: function($scope) {
          $scope.message = 'Login Page'                 
      }
   }).state('signup', {
       url: '/signup',
       templateUrl:'signup.html',
       controller: function($scope) {
           $scope.status = 'Signup Page'
       }
   }).state('home', {
       url: '/',
       template:'Home Page'
   }).state('other', {
       url: '/other',
       template:'Other Page'
   });
});

I'm getting output as:

HomeLoginSignupLabel

Here sref are not working as href. Using static navigation menu instead of displaying dynamically then everything is working fine. I think both apps are executing at same causing this issue.

omer cohen · Accepted Answer · 2016-10-22 11:51:11Z

2

use some navbar like bootsrap or semantic-ui etc.

bootstrap example :

 <body>
      <div ng-app="navApp" ng-controller="navCtrl">
         <nav class="navbar navbar-inverse">
            <ul class="nav navbar-nav">
                <li ng-repeat="item in navItems"><a ui-sref="{{item.sref}}">{{item.label}}</a></li>
            </ul>
          </nav>
      <div ng-app="mainApp">
         <div ui-view></div>
      </div>
</body>

edited Oct 22, 2016 at 11:51

answered Oct 20, 2016 at 9:47

omer cohen

2821 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IntelliJ Amiya Over a year ago

Now it looks well .

Collectives™ on Stack Overflow

How to display nav menu while using ui router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related