angular ui router not working / routing

Question

I have this project structure :

-root
|-JS
  |-app.js
  |-COMPONENTS
   |-HOME
    |-homeController.js
    |-homeView.html
   |-ERROR
    |-error.html
|-index.html

Here is index.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- JS LOADING -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<!--APP JS -->
<script src="js/components/app.js"></script>
<script src="./js/shared/services/lb-service.js"></script>

<!--HOME JS-->
<script src="./js/components/home/homeController.js"></script>
</head>
<body ng-app='benirius'>
  <ul class="nav navbar-nav">
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="error">Error</a></li>
  </ul>
  <div ui-view></div>
</body>
</html>

and app.js:

'use strict';

angular.module('benirius', [
    'lbServices',
    'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/components/home/homeView.html',
                controller: 'homeController'
            })
            .state('error', {
                url: '/error',
                templateUrl: '/components/error/error.html'
            });

        $urlRouterProvider.otherwise('/');
    }]);

edit adding homeController.js:

angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
    $scope.test = "Inside home.";
}]);

Angular ui router does not create links / load pages. All js files are loaded and no javascript error shown in console. Does someone know why ui-router is not working ?

Ps : I've been playing around with templateUrl path with no success.

As mentioned I tried : "js/components/home/homeView.html", "components/home/homeView.html" but nothing changed. What path do you suggest ? — valvince
– valvince, Commented Sep 1, 2015 at 1:44

valvince · Accepted Answer · 2015-09-01 08:47:23Z

As show here in angular doc, when you separate files and add controllers, services, or others to a module, you have to load it with no arguments. You first define your app in a file :

angular.module('benirius', [
    'lbServices',
    'ui.router'
])
.config(
  // CODE IN HERE
);

        $urlRouterProvider.otherwise('/');
    }]);

Then if you want to add elements to your app in another file, you load the module with no arguments, like this:

// notice there is no second argument therefore it loads the previously defined module 'benirius'
angular.module('benirius') 
.controller('homeController', ['$scope', function($scope) {
    $scope.test = "Inside home.";
}]);

//=> NO ERROR

instead of:

// In this case, it is considered as a redefinition of 'benirius' module with no dependencies injected
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
    $scope.test = "Inside home.";
}]);

//=> ERROR

Collectives™ on Stack Overflow

angular ui router not working / routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related