AngularJS routeprovider.config не вызывается

Я пытаюсь создать простое AngularApp Здесь. Я пытаюсь добавить routeProvider и использовать конфиг для того же. Но страница никогда не работала, как ожидалось. Когда я попытался использовать fireBug в firefox, я обнаружил, что функция, присутствующая в конфиге, никогда не вызывалась. Таким образом, код внутри него остается нетронутым. (Я смог подтвердить это с помощью контрольных точек).

Я верю, что мне здесь не хватает чего-то тривиального. Пожалуйста, помогите мне разобраться.

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'
    };
});

РЕДАКТИРОВАТЬ: у меня было два нг-приложение в источнике. Я удалил navBar, и теперь все начинает работать нормально. Может кто-нибудь объяснить мне, почему это поведение замечено? Оба модуля независимы друг от друга.

Источник

3 ответа

Вы не вводите модуль маршрута ng. Это должно быть

var sampleApp = angular.module('kscapp',['ngRoute']);
Источник

Вы можете использовать "ng-app" только один раз в своем приложении.

Concider переместит ваше ng-app="kscapp" в тег html и обновит kscapp до:

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

Чтобы узнать больше о ngApp, прочитайте ngApp API.

Источник

Вы используете разные версии для Angular.min.js и Angular-route.min.js. обновите свой угловой маршрут с 1.2.9 до 1.3.8

Также введите 'ngRoute' в модуль kscapp.

Источник
Другие вопросы по тегам