我是 AngularJS 的新手，在将 Controller 注入(inject) Angular 应用程序时遇到了问题。我正在尝试构建一个单页应用程序，用户可以在其中浏览特定应用程序表单的页面。虽然 Controller 的代码在同一个 JS 文件中，但它工作正常。但是将 Controller 移动到单独的文件(在本例中为“js/controllers/pagecontroller.js”)会引发以下错误。
错误:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.5/$injector/nomod?p0=uwApp.controllers
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=uwApp&p1=Error%3A%2…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A21%3A19)
index.html:
<!DOCTYPE html>
<html ng-app="uwApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<!-- Donut chart api -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/app.js"></script>
<script src="js/controllers/maincontroller.js"></script>
<script src="js/controllers/pagecontroller.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-controller="mainController">
<div ng-view></div>
</body>
</html>
应用程序.js
'use strict';
var uwApp = angular.module('uwApp', ['uwApp.controllers','ngRoute'])
.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the page
.when('/acknandagreement', {
templateUrl : 'pages/loan/acknandagreement.html',
controller : 'pageCtrl9'
})
// route for the page
.when('/assetsandliabilities', {
templateUrl : 'pages/loan/assetsandliabilities.html',
controller : 'pageCtrl6'
})
// route for the page
.when('/borrowerinfo', {
templateUrl : 'pages/loan/borrowerinfo.html',
controller : 'pageCtrl3'
})
// route for the page
.when('/employmentinfo', {
templateUrl : 'pages/loan/employmentinfo.html',
controller : 'pageCtrl4'
})
// route for the page
.when('/infoandgovpurpose', {
templateUrl : 'pages/loan/infoandgovpurpose.html',
controller : 'pageCtrl10'
})
// route for the page
.when('/monthlyincomeandche', {
templateUrl : 'pages/loan/monthlyincomeandche.html',
controller : 'pageCtrl5'
})
// route for the page
.when('/morttypeandterm', {
templateUrl : 'pages/loan/morttypeandterm.html',
controller : 'pageCtrl1'
})
// route for the page
.when('/propertyinfoandpurpose', {
templateUrl : 'pages/loan/propertyinfoandpurpose.html',
controller : 'pageCtrl2'
})
// route for the page
.when('/residualapplication', {
templateUrl : 'pages/loan/residualapplication.html',
controller : 'pageCtrl11'
})
// route for the page
.when('/txndetails', {
templateUrl : 'pages/loan/txndetails.html',
controller : 'pageCtrl7'
})
// route for the page
.when('/declarations', {
templateUrl : 'pages/loan/declarations.html',
controller : 'pageCtrl8'
})
;
});
页面 Controller .js:
'use strict';
angular.module('uwApp.controllers')
.controller('pageCtrl1', function($scope) {
$scope.page = 'morttypeandterm';
})
.controller('pageCtrl2', function($scope) {
$scope.page = 'propertyinfoandpurpose';
})
.controller('pageCtrl3', function($scope) {
$scope.page = 'borrowerinfo';
})
.controller('pageCtrl4', function($scope) {
$scope.page = 'employmentinfo';
})
.controller('pageCtrl5', function($scope) {
$scope.page = 'monthlyincomeandche';
})
.controller('pageCtrl6', function($scope) {
$scope.page = 'assetsandliabilities';
})
.controller('pageCtrl7', function($scope) {
$scope.page = 'txndetails';
})
.controller('pageCtrl8', function($scope) {
$scope.page = 'declarations';
})
.controller('pageCtrl9', function($scope) {
$scope.page = 'acknandagreement';
})
.controller('pageCtrl10', function($scope) {
$scope.page = 'infoandgovpurpose';
})
.controller('pageCtrl11', function($scope) {
$scope.page = 'residualapplication';
});
主 Controller .js
'use strict';
angular.module('uwApp.controllers', [])
.controller('mainController', function($scope) {
});
我不知道为什么它不起作用。请提出建议。
最佳答案
在pageController.js中这样写
angular.module('uwApp.controllers', [])
.controller('mainController', function($scope) {
$scope.page = 'main controller';
})
一些解释:
请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。使用 angular.module('myModule') 检索现有模块。
查找更多 angular docs module
jonpapa 有一个有趣的 Angular 样式指南 johnpapa/angular-styleguide
关于javascript - 注入(inject) Controller 时出现 Angular 模块注入(inject)错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37903566/