Question

我开始使用angularjs创建单个页面应用程序，并希望添加动态模板（视图和控制器）。我在网上看到我应该使用requirejs这样做，所以我做了。我按照本教程@ https://github.com/marcoslin/angularAMD尝试按照步骤进行操作。

当我想打开页面时，我在控制台上出现了这两个错误：

错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.25/ $ injector / modulerr？p0 = WebApp＆amp; p1 =％5B％24injector％3Anomod％5D％20http％3A％2F％2Ferrors.angularjs.org％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.module％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％2F应用％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＆amp; p1 =％5B％24injector％3Amodulerr％5D％20http％3A％2F％2Ferrors.angularjs.org％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％250AZc％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％252Fang ular.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％0AE％2F％3C％40http％3A％2F％2F本地主机％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>

./应用程序/ 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.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/X.Y.Z/angular-route.js

也会更改你的角度版本，所以你不要使用min。 min.js用于制作，并为您提供糟糕的错误，例如您所拥有的错误。

Angularjs和Requirejs：错误：[$ injector：modulerr]

1 个答案: