Search code examples
javascriptangularjsroutesng-viewroute-provider

AngularJS routeprovider is not called

I've googled a lot of info about routing in AngularJS and have seen questions at stackoverflow, for example, this 1, this 2, this 3, this 4. However, there is no result.

I've included AngularJS 1.5.8.js and angular-route.js.

HTML:

<!doctype html>
<html ng-app="employeesApp">
    <head>
        <title>Injecting view</title>              
    </head>
    <body > 

        <p>Hey! View should be injected between these statements</p>
        <div ng-view></div>  
        <p>Hey! View should be injected between these statements</p>

        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-route.js"></script> 
        <script src="app/app.js"></script>
        <script src="app/controllers/employeesController.js"> </script>
    </body>
</html>

Employees.html:

<h2>Employees</h2>
<article>This is employee view!:)</article

employeesController.js:

(function()
{
    var employeesController=function($scope, foo, bar) {//THIS CODE SNIPPET IS NOT CALLED 
                 alert('a1');
                 debugger;
                 $scope.sortBy='name';
                 $scope.reverse=false;

                 $scope.employees= [
  {joined:'2010-12-02', name:'Jon', city:'Reading', orderTotal:49.9956},  
  {joined:'1995-01-25', name:'Ben', city:'Las Vegas', orderTotal:519.99}, 
  {joined:'1994-06-15', name:'Joseph', city:'New York', orderTotal:344.99},
  {joined:'1998-03-18', name:'Adam', city:'Seattle', orderTotal:1021.5}
                 ];

                 $scope.doSort=function(propName){
                     $scope.sortBy = propName;
                     $scope.reverse=!$scope.reverse;
                 };
             };

    employeesController.$inject=['$scope'];
    angular.module('employeesApp',[]).controller('employeesController', 
                    employeesController);
}());

app.js:

(function() {   
    debugger;        //this code snippet works    
    var app=angular.module('employeesApp',['ngRoute']);  //this code snippet works  

    app.config(function($routeProvider){ //THIS CODE SNIPPET IS NOT CALLED
            alert('in');
            debugger;
            $routeProvider
            .when('/', {
            templateUrl: 'app/views/employees.html', 
            controller: 'employeesController'
        })
        .otherwise( { redirectTo: '/' });                    
        });
}());

I double checked all directives and code, however employee.html is not injected.
Does anybody know what I am doing wrong? I am using AngularJS 1.5.8.js.

Solution

  • The only problem i see is you are redefining employeesApp in your controller

    angular.module('employeesApp', []).controller('employeesController', employeesController);

    Omit the [] part

        angular.module('employeesApp').controller('employeesController', employeesController);

    You only define your modules once. Using angular.module('modulename', arrayofdependencies or empty array)

    Everywhere else you just get the module and add parts, i.e. Controllers, directives etc, using getter syntax. Do not use array here. angular.module('modulename').controller