Angularjs ngRoute不工作且接收模块错误
我的路线有问题。一切看起来都拼写正确,我相信我的语法是正确的。页面没有路由,我收到了injector:Moduler错误 Index.html:Angularjs ngRoute不工作且接收模块错误,angularjs,Angularjs,我的路线有问题。一切看起来都拼写正确,我相信我的语法是正确的。页面没有路由,我收到了injector:Moduler错误 Index.html: <body ng-app='creativeBillingApp' > <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.min.js"&g
<body ng-app='creativeBillingApp' >
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
**<script src="bower_components/angular-route/angular-route.js"></script>**
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!DOCTYPE HTML>
<html ng-app='creativeBillingApp' class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/www/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/www/css/themify-icons.css"/>
<link rel="stylesheet" href="bower_components/www/css/animate.min.css"/>
<link rel="stylesheet" href="bower_components/www/css/skins/palette.css"/>
<link rel="stylesheet" href="bower_components/www/css/fonts/font.css"/>
<link rel="stylesheet" href="bower_components/www/css/main.css"/>
<script src="bower_components/www/plugins/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!-- main content -->
<div class="mainContainer" ng-view></div>
<!-- /main content -->
</section>
</div>
</script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/routes.js"></script>
<script src="scripts/offscreen.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/filters/reverse.js"></script>
<script src="scripts/controllers/account.js"></script>
<script src="scripts/controllers/user.js"></script>
<!-- endbuild -->
</body>
</html>
app.js
'use strict';
angular.module('creativeBillingApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
]);
完整index.html:
<body ng-app='creativeBillingApp' >
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
**<script src="bower_components/angular-route/angular-route.js"></script>**
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!DOCTYPE HTML>
<html ng-app='creativeBillingApp' class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/www/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/www/css/themify-icons.css"/>
<link rel="stylesheet" href="bower_components/www/css/animate.min.css"/>
<link rel="stylesheet" href="bower_components/www/css/skins/palette.css"/>
<link rel="stylesheet" href="bower_components/www/css/fonts/font.css"/>
<link rel="stylesheet" href="bower_components/www/css/main.css"/>
<script src="bower_components/www/plugins/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!-- main content -->
<div class="mainContainer" ng-view></div>
<!-- /main content -->
</section>
</div>
</script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/routes.js"></script>
<script src="scripts/offscreen.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/filters/reverse.js"></script>
<script src="scripts/controllers/account.js"></script>
<script src="scripts/controllers/user.js"></script>
<!-- endbuild -->
</body>
</html>
您的应用程序名
creativeBillingApp
应注册一次
从routes.php
中删除以下行并选中
var app = angular.module('creativeBillingApp', ['ngRoute']);
因为,app
是一个全局变量
,您可以在routes.js中直接使用它
注意:routes.js
应该在app.js
正在工作的演示:您创建应用程序模块两次,因为您在使用ngRoute
时没有遇到问题。你有其他问题。为了确定导致错误的原因,请参考angular的非精简版本,将页面加载到浏览器中,并在控制台中发布您在那里看到的错误。您需要参考angular route.js
。您正在引用的路由库有所不同。或者您可以开始使用它而不是ngRoute
。您发布了两个不同版本的index.html
。你用哪一种?哪个给出了这个错误?最难的是在黑暗的房间里找到一只黑猫,尤其是没有猫的情况下。对不起,我尝试使用angular.ui.route,认为可能是angular route造成了问题。我现在就把它换成面包。第二个index.html是获取上述错误的正确索引。或者用var app=
angular.module('creativeBillingApp')`@akonsu,是的,这意味着获取注册的模块。@Lizajean如果提供错误的文本会更容易。请使用angular.js(非压缩版本)它给了错误更多的信息…请尝试在这里发布错误。你错过了在你的控制器范围内添加一个方法…意味着,在模板中调用它,但在控制器中没有。请发布完整的html页面。。