AngularJS routeprovider.config not called

问题

I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).

I believe that I'm missing something trivial here. Please help me figure it out.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
      <title></title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="js/navbar.js"></script>
      <script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
    <div ng-app="navbar">
        <nav-bar></nav-bar>
    </div>
    <div ng-app="kscapp">
        <ul>
            <li><a href="#home"> Home </a></li>
            <li><a href="#contact"> Contact </a></li>
        </ul>
        <div ng-view></div>
    </div>
</body>
</html>

kscapp.js

//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);

//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/home', {
    templateUrl: 'templates/home.html',
    controller: 'HomeCtrl'
      }).
      when('/Contact', {
    templateUrl: 'templates/contact.html',
    controller: 'ContactCtrl'
      }).
      otherwise({
    redirectTo: '/home'
      });
}]);


sampleApp.controller('HomeCtrl', function($scope) {

console.log('inside Hc');   
});


sampleApp.controller('ContactCtrl', function($scope) {

console.log('inside Cc');   

});

navbar.js

var navBarModule = angular.module('navbar', []);

navBarModule.directive('navBar', function() {
    return {
        scope: {},
        templateUrl: 'templates/navbar.html'
    };
});

EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.

回答1:

You don't inject the ng route module.It should be

var sampleApp = angular.module('kscapp',['ngRoute']);

回答2:

You are using different versions for Angular.min.js and Angular-route.min.js. update your angular-route from 1.2.9 to 1.3.8

Also inject 'ngRoute' to kscapp module.

回答3:

You can only use 'ng-app' once in your application.

Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:

var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);

For more on ngApp, read ngApp API.

来源：https://stackoverflow.com/questions/27665098/angularjs-routeprovider-config-not-called

标签

angularjs

config

route-provider