How to get state using Angular UI-Router?

Question

I am trying to migrate my Angular routing from routeProvider to stateProvider with below code, I don't see states content when click on navbar, any idea what's wrong?

app.js

angular.module('sampleApp', ['ui.router', 'MainCtrl', 'NerdCtrl', 'NerdService'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'MainController'
      })
      .state('nerd', {
        url: '/nerd',
        templateUrl: 'views/nerd.html',
        controller: 'NerdController'
      });
  });

main.html

<body ng-app="sampleApp" ng-controller="NerdController">
<div class="container-fluid">
    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" ui-href="home">Stencil: Node and Angular</a>
        </div>
        <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
        <ul class="nav navbar-nav">
            <li><a ui-sref="nerd">Nerds</a></li>
        </ul>
    </nav>
    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>
</div>
 <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</body>

Pankaj Parkar · Accepted Answer · 2017-01-20 03:43:36Z

2

Use ui-view instead of ng-view, in that element ui-router will put template based on $location changes.

<div ui-view></div>

answered Jan 20, 2017 at 3:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Meer · Accepted Answer · 2017-01-20 06:19:10Z

2

Remove ng-controller from body. Using, ui-router, It handles injecting the right controller for the right templates that you have defined in your $stateProvider.
Like Pankaj has pointed out, change ng-view to ui-view.
Change ui-href="home" to ui-sref="home"

edited Jan 20, 2017 at 6:19

Meer

2,8632 gold badges21 silver badges28 bronze badges

answered Jan 20, 2017 at 4:51

Bala Abhinav

1,3481 gold badge9 silver badges15 bronze badges

Comments

Shubham Verma · Accepted Answer · 2017-01-20 06:05:30Z

I have solution for this question. some time ago i was doing the same:

in app.js:

var app=angular.module('ppl_App',['ui.router','oc.lazyLoad','ngStorage','ngFileUpload'])

Provide UI-Routing content ( In app.js ):

angular.module('ppl_App').config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/login');

    $stateProvider
    .state('root',{
        views: {
            '@':{
                templateUrl:'index.html'
                    },
        'header@':{
                templateUrl: 'app/views/common/header.html'
                          },
        'content_left@':{
                templateUrl: 'app/views/common/content-left.html'
                            },
        'content_right@':{
                templateUrl: 'app/views/common/contentright.html'
                         },
        'footer@':{
                templateUrl: 'app/views/common/footer.html'
          }
        }               
        })
    .state('root.login',{
            url:'/login',
            views:{
                'contentRight@root':{
                        templateUrl:'app/views/login.html',
                        controller:'loginCtrl'
                                            },
                          },
                    })


 .state('root.register',{
    url:'/register',
    views:{
            'contentRight@root':{
            templateUrl:'app/views/register.html',
            controller:'registerCtrl'
              },
            },    
        })
    });

See the view name in the snapshot ( In red color shape) :

Now you can use these views in your html page. ( I have used in index.html )

<body ng-app="ppl_App">
    <div class="navbar navbar-inverse navbar-fixed-top" ui-view="navigation">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <a class="brand" href="">PPL</a>
                <div class="pro_info pull-right">
                    <div class="pro_icn"><img src="app/assests/images/pic_small.png"></div>
                    <div class="pro_txt">Me<b class="caret"></b></div>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a tabindex="-1" href="#">My Profile</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="header header_fixed" ui-view="header">
        <!-- //header goes here -->
    </div>
    <div class="container">
            <div class="content_rgt" ui-view="content_right">
                <!-- //right content goes here -->
            </div>
            <div class="content_lft" ui-view="content_left">
                <!-- //left content goes here -->
            </div>
    </div>
    <div class="clear"></div>
    </div>
    <div class="footr" ui-view="footer">
        <!-- //footer goes here -->
    </div>
    <script type="text/javascript" src="app/app.js"></script>
</body>

See how to use in html in snapshot ( In red color box ):

You can redirect on this particular views using ui-sref, like this:

<div class="addtnal_acnt">
    <a ui-sref="root.register">Create My Account Now !</a>
</div>


    <div class="addtnal_acnt">
       <br>
          <a ui-sref="root.login"> Loging Again !</a>
    </div>

You can redirect from controller code ( .js file ) using $state.go() :

$state.go('root.login');

or

$state.go('root.register');

You can go to plunker for demo after clicking on this link : plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview

Collectives™ on Stack Overflow

How to get state using Angular UI-Router?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related