- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我开始使用 angularjs 创建单页面应用程序,并想要添加动态模板( View 和 Controller )。我在网上读到我应该使用 requirejs 来执行此操作,所以我就这么做了。我按照这个教程@ https://github.com/marcoslin/angularAMD并尝试按照步骤操作。
当我想打开页面时,我的控制台上出现了这两个错误:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&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%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
还有这个
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&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%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%0Ae%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
...
最佳答案
您正在使用routeprovider,但没有添加它。
Angular 由丢失的模块组成,因此您应该将其包含在模块中,例如
angular.module('app', ['ngRoute']);
并将其链接到您的 html 中
<script src="angular-route.js">
谷歌 CDN例如//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
还要更改您的 Angular 版本,这样您就不会使用 min。 min.js 用于生产,会给你带来像那里那样的糟糕错误。
关于javascript - Angularjs 和 Requirejs : Error: [$injector:modulerr],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34776466/
$injector.instantiate有什么区别, $injector.get和 $injector.invoke在 AngularJS 中? 最佳答案 鉴于以下服务: app.service('
我尝试使用两种方式显式创建依赖关系。两者几乎相同,但我有点困惑使用反射注入(inject)器比普通注入(inject)器有什么优势,推荐使用哪种方式? 使用注入(inject)器 import { I
我对 Angular js 很陌生,以下是我的代码 (function(angular){ var testAngular = angular.mo
在英雄之旅教程的第 5 节中,main.dart 包含以下行: final InjectorFactory injector = self.injector$Injector; 这是错字吗?它在 VS
你好我是 Angular JS 的初学者,当我开始创建模块和 Controller 时,我无法打印我的消息,下面是我的代码 var myModule = angular.module("myFirst
我只是想在 Angular Dart 中尝试路由。我在关注这个https://webdev.dartlang.org/angular/guide/router/1指导,但我收到错误。 这一行给出错误
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ,确保 Controller 文件
我正在尝试学习 Angular,但无法正确加载它。我看了一下关于 SO 的类似问题,但找不到我要找的东西。 有人知道为什么会出现这个错误吗?在我看来,我是否正确地调用了我的新应用程序/模块?我的剧本错
我使用环回作为后端,使用 postgresql 作为数据库。所以我尝试使用 lb-service/js。 如果我尝试在 login.js 中包含 lbServices (angular.module(
我正在尝试将表情符号应用程序注入(inject)我的项目。 我添加了emoji.min.js并像这样引用它 现在我也将它注入(inject)到我的项目中,如下所示: angular.module('
当我尝试将 $cookie 包含到我的 Controller 中时出现此错误。 任何人都可以向我解释我做错了什么? 我在 index.html 中有 angular-cookie.js 我在 conf
我正在使用 anguarjs 开发一个应用程序,并出现如下错误: 无法实例化模块 myApp,原因是:错误:[$injector:modulerr] http://errors.angularjs.o
var demoapp = angular.module('demoapp', []); demoapp.controller('SimpleC
我正在尝试通过网络摄像头简单地读取二维码,但我在控制台打开 Angular 帮助页面时遇到此错误,但说使用 ngRoute Error: [$injector:modulerr] http://err
我正在尝试对此进行编码,只是使用路由从第一个页面跳转到另一个页面,但为什么它不起作用,我搜索并使用了很多技巧但仍然失败,请问有人吗? index.html Angular Js
我收到此错误: ncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$inje
我正在尝试创建一个带有 Angular 路由的 SPA(单页应用程序),但是当我将 ndRoute 添加到我的模块时,它给了我这个错误 Uncaught Error: [$injector:modul
this is the error i m getting.这个问题被问了很多次。但是下面的代码在在线编译器中运行良好,但在我的本地系统中运行不佳,即使系统已连接到互联网,它也显示未定义 Angula
我正在尝试学习 Angular 并尝试在基于 Web 的教程之外编写我的第一个 Controller 。我一直在 JS 控制台的标题中收到错误消息,无法弄清楚发生了什么。该链接将我带到一个引用需要包含
我在尝试编写代码时遇到此错误。我已经完成了其他 Stackflow 问题,但找不到答案。是什么导致了这个错误? var app = angular.module("app", ['ui.router'
我是一名优秀的程序员,十分优秀!