0

我正在尝试在这里构建一个简单的 AngularApp。我正在尝试添加 routeProvider 并使用相同的配置。但是该页面从未按预期工作。当我尝试在 firefox 中使用 fireBug 时，我发现配置中存在的函数从未被调用过。因此，其中的代码保持不变。（我能够通过断点确认）。

我相信我在这里遗漏了一些微不足道的东西。请帮我弄清楚。

索引.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');   

});

导航栏.js

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

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

编辑：我在源代码中有两个 ng-app。我删除了导航栏，现在一切正常。有人可以向我解释为什么会出现这种行为吗？两个模块相互独立。

4

3 回答 3

0

你不注入 ng route 模块。它应该是

var sampleApp = angular.module('kscapp',['ngRoute']);
于 2014-12-27T07:23:21.843 回答
0

您正在为 Angular.min.js 和 Angular-route.min.js 使用不同的版本。将您的角度路线从1.2.9更新到1.3.8

还将“ngRoute”注入到 kscapp 模块。

于 2014-12-27T08:57:19.250 回答
0

您只能在应用程序中使用一次“ ng-app ”。

考虑将您的 ng-app="kscapp" 移动到 html 标记，并将 kscapp 更新为：

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

有关 ngApp 的更多信息，请阅读ngApp API。

于 2014-12-27T09:17:01.137 回答