注入控制器時出現角度模塊注入錯誤

Question

我是AngularJS的新手，並且在將控制器注入角度應用程序時遇到問題。 我正在嘗試構建一個頁面應用程序，用戶可以在其中瀏覽特定應用程序表單的頁面。 雖然控制器的代碼在同一個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>

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

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) {

});

我不知道為什么它不起作用。 請提出建議。

Answer 1

更新

我通過提供的代碼在plnkr上做了一個工作示例。 我改變了幾件事：

1）由於您的基本路由將運行mainController您也不應將其放在ng-controller 。

2）引用模塊時，如在angular.module('uwApp.controllers') ，必須首先定義該模塊。 定義模塊的方法是對其依賴項使用方括號，例如angular.module('uwApp.controllers', []) 。

解決了這些問題后，您無需執行我在下面所說的事情。

無需通過單獨的模塊注入控制器。

您可以更改pagecontroller.js ：

angular.module('uwApp.controllers')

至...

angular.module('uwApp')

然后是app.js ：

var uwApp = angular.module('uwApp', ['uwApp.controllers','ngRoute'])

至...

var uwApp = angular.module('uwApp', ['ngRoute'])

Answer 2

在pageController.js寫

angular.module('uwApp.controllers', [])
 .controller('mainController', function($scope) {
    $scope.page = 'main controller';
})

一些解釋：

請注意，使用angular.module('myModule', [])將創建模塊myModule並覆蓋任何名為myModule的現有模塊。 使用angular.module('myModule')檢索現有模塊。

查找更多angular docs模塊

jonpapa johnpapa / angular-styleguide提供了有關角的有趣樣式指南

注入控制器時出現角度模塊注入錯誤

問題描述

2 個解決方案

解決方案1
1 2016-06-19 03:19:34

解決方案2
1 已采納 2016-06-19 03:40:05

一些解釋：

注入控制器時出現角度模塊注入錯誤

問題描述

2 個解決方案

解決方案1 1 2016-06-19 03:19:34

解決方案2 1 已采納 2016-06-19 03:40:05

一些解釋：

解決方案1
1 2016-06-19 03:19:34

解決方案2
1 已采納 2016-06-19 03:40:05