这是app.js代码。 我已经使用ngRoute定义了两个控制器和一个简单的路由机制。 我不能为我的生活理解为什么我一直在ngRoute上得到注射器模块错误。 我正在使用Node服务器提供此代码。 请注意，到目前为止，home.html和forecast.html文件已完全为空。
请帮忙 ！
谢谢
var myApp = angular.module("myApp",['ngRoute','ngResource ']);
myApp.controller('homeController',['$scope',
function($scope) {
}]);
myApp.controller('forecastController',['$scope',
function($scope) {
}]);
myApp.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl:'home.html',
controller:'homeController'
}).
when('/forecast', {
templateUrl: 'forecast.html',
controller: 'forecastController'
});
});
EMPTY
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<title>Learning Angular JS</title>
<!-- Latest compiled and minified CSS -->
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular.min.js"></script>
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular-messages.min.js"></script>
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.5/angular-route.js"></script>
<script src ="app.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"> Weather </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href = "#forecast"></a> Forecast </li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
这是错误链接。
angular.js：4068未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.3.0-rc.5/ $ injector / modulerr？p0 = weatherApp＆p1 = ... 20（https％3A％2F％2Fcode .angularjs.org％2F1.3.0-rc.5％2Fangular.min.js％3A18％3A3）
Here's the app.js code. I have defined two controllers and a simple routing mechanism using ngRoute. I cannot for the life of me understand why i keep getting the injector module error on ngRoute. I am serving this code using a Node server. Note, the home.html and forecast.html files are completely empty so far.
Please help !
Thanks
var myApp = angular.module("myApp",['ngRoute','ngResource ']);
myApp.controller('homeController',['$scope',
function($scope) {
}]);
myApp.controller('forecastController',['$scope',
function($scope) {
}]);
myApp.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl:'home.html',
controller:'homeController'
}).
when('/forecast', {
templateUrl: 'forecast.html',
controller: 'forecastController'
});
});
EMPTY
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<title>Learning Angular JS</title>
<!-- Latest compiled and minified CSS -->
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular.min.js"></script>
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular-messages.min.js"></script>
<script src = "https://code.angularjs.org/1.3.0-rc.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.5/angular-route.js"></script>
<script src ="app.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"> Weather </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href = "#forecast"></a> Forecast </li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Here is the error link.
angular.js:4068Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-rc.5/$injector/modulerr?p0=weatherApp&p1=…20(https%3A%2F%2Fcode.angularjs.org%2F1.3.0-rc.5%2Fangular.min.js%3A18%3A3)
最满意答案
问题出在ngResource因为在关闭引用之前，依赖关系数组中的名称中有额外的空间。
请注意，如果使用角度开发版本，则会在控制台中获得更详细的错误输出和堆栈跟踪，而不是指向角度错误站点的链接
var myApp = angular.module("myApp",['ngRoute','ngResource ']);
//remove this ^^
还有一些需要注意的事项是，如果在angular之前包含jQuery，那么angular.element （jQlite）将在内部使用完整的jQuery API，但如果之后包含它则不会。
还建议从脚本中删除协议，以避免浏览器在http上加载时阻止内容出现问题
至于bootstrap.js，最好将其删除并使用angular-ui-bootstrap代替。 这也将删除bootstrap.js的jQuery依赖项
The problem is with ngResource because there is extra space in the name in your dependency array before closing quote.
Note that if you use angular development version you get a more verbose error output and stack trace in console instead of links to angular error site
var myApp = angular.module("myApp",['ngRoute','ngResource ']);
//remove this ^^
Several other things to note is if you include jQuery before angular then angular.element (jQlite) will use full jQuery API internally but not if you include it after.
Also suggest removing protocol from scripts to avoid blocked content problems when browsers go to load them on http
As for bootstrap.js it is best to remove it and use angular-ui-bootstrap instead. This will also remove jQuery dependency of bootstrap.js
更多推荐
发布评论