Angularjs和Requirejs：錯誤：[$ injector：modulerr]

Question

我開始使用angularjs創建一個單頁應用程序，並想添加動態模板（視圖和控制器）。 我在網上讀到我應該使用requirejs做到這一點，所以我做到了。 我遵循了本教程@ https://github.com/marcoslin/angularAMD並嘗試遵循這些步驟。

當我想打開頁面時，在控制台上會出現這兩個錯誤：

錯誤：[$ injector：modulerr] http://errors.angularjs.org/1.2.25/ $ injector / modulerr？p0 = WebApp＆p1 =％5B％24injector％3Anomod％5D％20http％3A％2F％2Ferrors.angularjs。有機％2F1.2.25％2F％24injector％2Fnomod％3Fp0％3DWebApp％0AD％2F％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A6％3A450％0AZc％2FB。模塊％3C％2F％3C％2FB％5BE％5D％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A20％3A1％0AZc％2Fb.module％3C％2F％ 3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A20％3A1％0AE％2F％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min。 JS％3A33％3A267％0AR％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A7％3A288％0AE％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular。 min.js％3A33％3A207％0Agc％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A36％3A309％0Afc％2FC％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％ 2Flibs％2Fangular.min.js％3A18％3A170％0Afc％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A18％3A387％0AXc％40http％3A％2F ％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A17％3A415％0A％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A214％3A469％0AA％40http％3A ％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A145％3A67％0A

還有這個

錯誤：[$ injector：modulerr] http://errors.angularjs.org/1.2.25/ $ injector / modulerr？p0 = WebApp＆p1 =％5B％24injector％3Amodulerr％5D％20http％3A％2F％2Ferrors.angularjs。有機％2F1.2.25％2F％24injector％2Fmodulerr％3Fp0％3Dwebapp％26P1％3D％255B％2524injector％253Anomod％255D％2520http％253A％252F％252Ferrors.angularjs.org％252F1.2.25％252F％2524injector％252Fnomod％ 253Fp0％253Dwebapp％250AD％252F％253C％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A6％253A450％2​​50AZc％252Fb.module％253C％252F％253C％252Fb％255Be％ 255D％253C％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A20％253A1％250AZc％252Fb.module％253C％252F％253C％2540http％253A％252F％252Flocalhost％252Fpollit％ 252Fapp％252Flibs％252Fangular.min.js％253A20％253A1％250Ae％252F％253C％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A33％253A267％250Ar％2540http％253A％ 252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A7％253A288％250Ae％2540http％253A％252F％252Flocalhost％252Fpollit％ 252Fapp％252Flibs％252Fangular.min.js％253A33％253A207％250Ae％252F％253C％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A33％253A284％250Ar％2540http％253A％ 252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A7％253A288％250Ae％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A33％253A207％250Agc％2540http％ 253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A36％253A309％250Afc％252Fc％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A18％253A170％ 250Afc％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A18％253A387％250Ac.prototype.bootstrap％252F％253C％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％ 252FangularAMD.min.js％253A7％253A3485％250Aa％2540http％253A％252F％252Flocalhost％252Fpollit％252Fapp％252Flibs％252Fangular.min.js％253A145％253A67％250A％0AD％2F％3C％40http％3A％2F％ 2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A6％3A450％0 AE％2F％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A34 3A97％％％0AR％40http 3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min。 JS％3A7％3A288％0AE％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A33％3A207％0AE％2F％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％ 2Flibs％2Fangular.min.js％3A33％3A284％0AR％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A7％3A288％0AE％40http％3A％2F％2Flocalhost％2Fpollit％ 2Fapp％2Flibs％2Fangular.min.js％3A33％3A207％0Agc％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A36％3A309％0Afc％2FC％40http％3A％2F％ 2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A18％3A170％0Afc％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％3A18％3A387％0Ac.prototype.bootstrap％ 2F％3C％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2FangularAMD.min.js％3A7％3A3485％0AA％40http％3A％2F％2Flocalhost％2Fpollit％2Fapp％2Flibs％2Fangular.min.js％ 3A145％3A67％0A

我認為它們都是類似的錯誤。 我猜錯誤是來自app.js文件，這是我的代碼：

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", ['webapp']);

app.config(function ($routeProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'app/src/home/index.html',
            controller: 'index',
            controllerUrl: 'app/src/home/'
        })
    );
});

return angularAMD.bootstrap(app);
});

和main.js

require.config({
baseUrl: "app",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular.min',
    'angularAMD' : 'libs/angularAMD.min',
    'ngload' : 'libs/ngload.min'
},

shim: {
    'angularAMD' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

現在我的模板文件index.js：

define(['app'], function (app) {
app.factory('MainController', function (...) {

});
});

的index.html

<div class="appheader">
<div class="container" style="text-align:right">
    <a><span class="glyphicon glyphicon-refresh"></span></a>
    <a><span class="glyphicon glyphicon-align-justify"></span></a>
</div>

如您所見，我在app / src / home / index。（html / js）中有這兩個文件。其他文件位於app /中，而./是index.html的路徑（主頁）

我真的希望對我的項目有所幫助，並在此先感謝。 :)

編輯 編輯 編輯 編輯

我們開始： ./index.html

<!DOCTYPE html>
<html ng-app="WebApp">
<head>
    <title>Index Index Index :)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> -->
    <meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="app/css/bootstrap.min.css" />
    <link rel="stylesheet" href="app/css/yadbocss.css" />
    <script data-main="app/main" src="app/libs/require.min.js"></script>
</head>
<body ng-controller="mainController">
    <div class="row">
        <div class="col-md-12">
            <div id="main">
                <div ng-view>
                </div>
            </div>
        </div>
    </div>
</body>

./app/main.js

require.config({
baseUrl: "app/",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular',
    'angularAMD' : 'libs/angularAMD',
    'ngload' : 'libs/ngload',
    'ngRoute' : 'libs/ngRoute'
},

shim: {
    'angularAMD' : ['angular', 'ngRoute'],
    'ngRoute' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

./app/app.js

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'src/home/index.html',
            controller: 'index',
            controllerUrl: 'src/home/index'
        })
    );
    $locationProvider.html5Mode(true);
});

return angularAMD.bootstrap(app);
});

錯誤報告

1

Error: [$injector:modulerr] Failed to instantiate module WebApp due     to:
[$injector:nomod] Module 'WebApp' is not available! You either     misspelled the module name or forgot to load it. If registering a module     ensure that you specify the dependencies as the second argument.
...

2

Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
minErr/<@http://localhost/pollit/app/libs/angular.js:68:12
...

Answer 1

您正在使用routeprovider而不添加它。

Angular由丟失的模塊組成，因此您應該像在模塊中那樣包含它

angular.module('app', ['ngRoute']);

並將其鏈接到您的html中

<script src="angular-route.js">

Google CDN，例如//ajax.googleapis.com/ajax/libs/angularjs/XYZ/angular-route.js

還要更改您的angular版本，所以您不要使用min。 min.js用於生產，它會給您帶來糟糕的錯誤，就像您在那里遇到的那樣。