AngularJS routeprovider.config未调用 [英] AngularJS routeprovider.config not called
问题描述
我正在尝试在此处构建一个简单的AngularApp.我正在尝试添加routeProvider并使用config进行相同的操作.但是页面无法正常工作.当我尝试在firefox中使用fireBug时，我发现配置中存在的函数从未被调用过.因此，其中的代码保持不变. (我能够通过断点确认这一点.)
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
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
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
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
我在源代码中有两个ng-app.我删除了navBar，现在一切正常.有人可以向我解释为什么会出现这种现象吗?这两个模块彼此独立.
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.
推荐答案
您只能在应用程序中使用一次" ng-app ".
You can only use 'ng-app' once in your application.
考虑将ng-app ="kscapp"移至html标签，并将kscapp更新为:
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
有关ngApp的更多信息，请阅读 ngApp API .
For more on ngApp, read ngApp API.
这篇关于AngularJS routeprovider.config未调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
