CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
larsheavy
larsheavy

Reputation: 69

Angularjs app not routing back to homepage with ui-router

I have hit a snag with my ui-routing in my angularjs app. previously it was working fine and to be honest I dont remember changing anything that would have affected the routing.

When I first start debugging the app loads fine with the index navbar and home view appering. I can then navigate to the other areas of the app without issue, it's only when I click on the home link in the navbar that the request fails and the index page and home view wont load.

I am using netbeans to build my app.

my folder structure root --app ----services ----controllers ----css ----data ----js ----views index.html

here is my index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <link rel="stylesheet" href="app/css/bootstrap.min.css" >
        <link rel="stylesheet" href="app/css/bootstrap.css" >
    </head>

    <!-- Define an angular controller -->
    <body>
        <div class="navbar-wrapper">
            <div class="container">

                <nav class="navbar navbar-inverse navbar-static-top">
                  <div class="container">
                    <div id="navbar" class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="/home">Home</a></li>
                        <li class="dropdown">
                          <a ui-sref="hydrotel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydrotel<span class="caret"></span></a>
                          <ul class="dropdown-menu">
                            <li><a ui-sref="hydrotel.overview">Overview</a></li>
                            <li role="seperator" class="divider"></li>
                            <li><a ui-sref="hydrotel.interfaces">Interfaces</a></li>
                            <li><a ui-sref="hydrotel.dataTransfer">Data Transfers</a></li>
                          </ul>                          
                        </li>
                        <li class="dropdown">
                        <a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">WISKI<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="wiski">Overview</a></li>
                        </ul>
                        </li>
                        <li class="dropdown">
                            <a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydstra<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a ui-sref="hydstra">Overview</a></li>
                            </ul>
                        </li>
                      </ul>
                    </div>
                  </div>
                </nav>

            </div>    
        </div>
        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div class="main">           
            <div ui-view></div>
        </div>


        <!-- Angular Declaration -->
        <script src="app/js/angular.min.js" type="text/javascript"></script>
        <script src="App/js/angular-table.js" type="text/javascript"></script>
        <script src="App/js/angular-table.min.js" type="text/javascript"></script>
        <!-- Include the AngularJS routing library -->        
        <script src="App/js/angular-route.min.js" type="text/javascript"></script>
        <script src="App/js/angular-ui-router.min.js" type="text/javascript"></script>
        <script src="App/js/angular-ui-router.js" type="text/javascript"></script>
        <!-- Jquery -->
        <script src="app/js/jquery-2.2.0.js" type="text/javascript"></script>
        <!-- Bootstrap js -->
        <script src="app/js/bootstrap.min.js" type="text/javascript"></script>

        <!-- Modules-->
        <script src="App/js/app.js" type="text/javascript"></script>
        <!-- Controllers -->
        <script src="App/controllers/homeController.js" type="text/javascript"></script>
        <script src="App/controllers/hydrotelController.js" type="text/javascript"></script>
        <script src="App/controllers/overviewController.js" type="text/javascript"></script>
        <script src="App/controllers/interfaceController.js" type="text/javascript"></script>
        <script src="App/controllers/dataTransferController.js" type="text/javascript"></script>
        <script src="App/controllers/hydstraController.js" type="text/javascript"></script>
        <!-- Angular google charts-->
        <script src="App/js/ng-google-chart.min.js" type="text/javascript"></script>
        <script src="App/js/ng-google-chart.js" type="text/javascript"></script>
        <!-- Smart Table-->
        <script src="App/js/smart-table.min.js" type="text/javascript"></script>
        <script src="App/js/smart-table.js" type="text/javascript"></script>
    </body> 
</html>

my app.js where I declare the module and the routing.

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var app = angular.module('myApp',['ui.router','googlechart','smart-table']);

app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider,$urlRouterProvider){

    $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'app/views/home.html',
                controller: 'homeController'
            }) 
            .state('hydstra',{
                url: '/hydstra',
                templateUrl: 'app/views/hydstra.html',
                controller: 'hydstraController'
            })
            .state('hydrotel', {
                url: '/hydrotel',
                templateUrl: 'app/views/hydrotel.html',
                controller: 'hydrotelController'
            })
            .state('hydrotel.overview',{
                url: '/overview',
                templateUrl: 'app/views/hydrotelOverview.html',
                controller: 'overviewController'
            })
            .state('hydrotel.interfaces',{
                url: '/interfaces',
                templateUrl: 'app/views/Interfaces.html',
                controller: 'interfaceController'    
            })
            .state('hydrotel.dataTransfer',{
                url: '/dataTransfer',
                templateUrl: 'app/views/dataTransfer.html',
                controller: 'dataTransferController'
            });
    $urlRouterProvider.otherwise('/home');

}]);

If this is not enough info to go with please let me know.

Upvotes: 0

Views: 107

Answers (2)

Anandhan S
Anandhan S

Reputation: 1

UI-Router you have to only keep state in mind. <a data-ui-sref="home">Home</a>. Note that even if you use <a href=""> in UI-Router, just like you would do in ng-router, it will still work. but this not best practice. If you want to use <a href=""> this method you can use $routeProvider instead of $stateProvider

Upvotes: 0

austin665
austin665

Reputation: 91

If you just use <a ui-sref="home">Home</a> instead of <a href="/home">Home</a> it should fix the problem. Its better to link to a state and not url when you are using ui-router. The ui-sref will add the href in your browser.

Upvotes: 1

Related Questions