我正在开始一个新的Angular项目,并试图将我的所有代码模块化–我已经厌倦了拥有庞大的app.js文件,并且因为我正在为公司开发平台,所以我的代码要整洁和模块化很容易,这一点很重要测试,清洁度以及向Angular 2过渡的便捷性。
目前,我有三个角度文件来设置所有内容:
Angular.module.js
angular
.module('app', [
/* Shared Modules */
'app.config',
'app.states'
/* Feature Areas */
])
Angular.config.js
angular
.module('app', [
/* Angular Modules */
'ngResource',
'ngSanitize',
/* 3rd-party Modules */
'ui.router'
]);
Angular.states.js
angular
.module('app')
.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider){
// Unknown URLs go to 404
$urlRouterProvider.otherwise('/404');
// No route goes to index
$urlRouterProvider.when('', '/');
// State provider for routing
$stateProvider
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home/_home.html'
}
}
});
}]);
这是我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
<link rel="stylesheet" href="/content/stylesheets/screen.css">
<!-- Angular Dependencies -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-sanitize.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-resource.min.js"></script>
<!-- Angular Modules -->
<script src="/app/app.config.js"></script>
<script src="/app/app.states.js"></script>
<script src="/app/app.module.js"></script>
</head>
<body ng-app="app">
<div id="wrapper">
<div ui-view></div>
</div>
</body>
</html>
我不断遇到此错误:
未捕获的错误:[$ injector:modulerr]
我究竟做错了什么?我很难理解如何使各种Angular文件相互交互。我遗漏了状态控制器,因为我现在只是在测试视图。
通过写:
angular.module('app', [
/* Shared Modules */
'app.config',
'app.states'
/* Feature Areas */
])
您创建一个名为的模块app
,该模块需要2个模块:app.config
和app.states
。如果其中之一丢失或无效,则app
模块无法启动。
在你config.js
,你写angular.module('app', [...])
。这将创建一个名为app
“ [...]”之间具有依赖性的模块。但是,您已经在中创建了一个名为“ app”的模块module.js
。
将模块名称更改config.js
为angular.module('app.config', [...])
。
在states.js
文件中,还有另一件事:angular.module('app')
为您提供在module.js
文件中创建的模块。您可以在其上调用config方法,这不是问题。但是,您需要在app
模块中定义的依存关系app.states
。您可以删除此依赖项,或替换angular.module('app')
为angular.module('app.states', []).config(...)
希望对您有帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句