Javascript 注入控制器时角度模块注入错误_Javascript_Angularjs

Javascript 注入控制器时角度模块注入错误

javascript angularjs

Javascript 注入控制器时角度模块注入错误,javascript,angularjs,Javascript,Angularjs,我是AngularJS新手，在将控制器注入angular应用程序时遇到了一个问题。我正在尝试构建一个单页应用程序，用户可以在其中浏览特定应用程序表单的页面。虽然控制器的代码在同一个JS文件中，但工作正常。但是将控制器移动到单独的文件（如本例中的“js/controllers/pagecontroller.js”）会引发下面的错误错误： Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.5/$injector/no

我是AngularJS新手，在将控制器注入angular应用程序时遇到了一个问题。我正在尝试构建一个单页应用程序，用户可以在其中浏览特定应用程序表单的页面。虽然控制器的代码在同一个JS文件中，但工作正常。但是将控制器移动到单独的文件（如本例中的“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>

pagecontroller.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';
});

maincontroller.js

'use strict';
angular.module('uwApp.controllers', [])
 .controller('mainController', function($scope) {

});

我不知道为什么它不起作用。请建议。

更新
我根据提供的代码对plnkr进行了研究。我改变了几件事：
1）由于您的基本路线将运行
mainController
，因此您不应将其放置在
ng控制器上 2）当您引用模块时，如在角度.module（'uwApp.controllers'）中，必须首先定义该模块。定义模块的方法是用括号表示其依赖项，如angular.module（'uwApp.controllers'，[]）有了这些东西，你就不需要按照我下面说的去做了不需要通过单独的模块注入控制器您可以更改pagecontroller.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'; }); 到然后app.js：到在pageController.js中这样写 angular.module('uwApp.controllers', []) .controller('mainController', function($scope) { $scope.page = 'main controller'; }) 一些解释：请注意，使用angular.module（'myModule'，[]）将创建模块myModule并覆盖任何名为myModule的现有模块。使用angular.module（'myModule'）检索现有模块找到更多 jonpapa的angular有一个有趣的风格指南尝试用angular.module（'uwApp.controllers'）替换angular.module（'uwApp.controllers'，[]），您可以删除var uwApp= 不需要正确定义uwApp.controllers。按照@valarmorghulis的建议去做，用maincontroller的片段编辑问题。@Chows263请看我在回答中提供的示例，因为我确信它会解决您的问题。@Chows263多人正确回答了您的问题。请接受一个，这样问题就结束了。人们花时间试图帮助你，你至少可以适当地接受他们的答案。周的写作方式也是一种有效的方式。@valarmorghulis你是对的，我用实际需要的更改更新了它。我不认为ng route被错误地提了。正如我所说，HTML中没有任何更改，只是控制器的分离造成了这个问题。在您建议的更改之后，我现在得到了以下错误：参数“mainController”不是函数，没有定义您是否编写了这个控制器.controller（'mainController'，function（$scope）{$scope.page='main controller'；}）请将其添加到一个单独的模块中。让我们来看看。 angular.module('uwApp') var uwApp = angular.module('uwApp', ['uwApp.controllers','ngRoute']) var uwApp = angular.module('uwApp', ['ngRoute']) angular.module('uwApp.controllers', []) .controller('mainController', function($scope) { $scope.page = 'main controller'; })