I'm trying to include a github module angular-drag-drop. I'm new to angular and I fail. The readme shows an example of using webpack or browserify, but I'm not using those. I've also filed an issue, but I wanted to ask it here as well.
odds.js:
(function(){
var app = angular.module('pokerApp', ['angular-drag-drop']);
})();
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="lib/angular-drag-drop.min.js"></script>
<script src="odds.js"></script>
</head>
<body>
<div ng-app = "pokerApp" ng-init = "cards = ['As','Ks','Qs','Js','Ts','9s','8s','7s','6s','5s','4s','3s','2s',
'Ah','Kh','Qh','Jh','Th','9h','8h','7h','6h','5h','4h','3h','2h',
'Ad','Kd','Qd','Jd','Td','9d','8d','7d','6d','5d','4d','3d','2d',
'Ac','Kc','Qc','Jc','Tc','9c','8c','7c','6c','5c','4c','3c','2c']">
<!--<div drag-container>KKKKKKKKKKKK</div>-->
<!--
<div drag-container="model"
on-drag-start="ctl.handleDragStart($event, data)"
on-drag-end="ctl.handleDragEnd($event, data)"
></div>-->
</div>
</body>
</html>
The file angular-drag-drop.min.js was copied from the github repo. The error I get is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module pokerApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-drag-drop due to:
Error: [$injector:nomod] Module 'angular-drag-drop' 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.
I also tried with 'AngularDragDrop' instead of 'angular-drag-drop' but I get the same error.
It need require.js to load modules, also I looked at API, I think the module name should be
learts.dragDrop
instead of
angular-drag-drop
odds.js:
(function(){
var app = angular.module('pokerApp', ['learts.dragDrop']);
})();
The developer has posted the answer in the issue. I needed to import "filearts.dragDrop" and not import require.js. It works now.
Related
I am trying to use $resouce for REST API call, but i am getting below error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:modulerr] Failed to instantiate module $resource due to:
Error: [$injector:nomod] Module '$resource' 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.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=%24resource
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13438:12
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15404:17
at ensure (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15328:38)
at module (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15402:14)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17894:22
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17895:40
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
below is my index.html where i have included angular.js and angular-resouce.js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
...
...
below is the content from my app.js
angular.module('starter', [ 'ionic', 'ionic.service.core', 'starter.controllers', 'starter.services','ngResource'])
.run(function($ionicPlatform) {
Content from service.js
angular.module('starter.services', ['$resource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
Am i missing anything ?
Inject ngResource in module starter.services, not $resource.
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
ngResource is the module that provides the $resource service.
So
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) { }
should work
I want to inject a dependency into my my main module,
module app {
angular.module("movie",
["common.services"]);
}
This creates the error:
Error: $injector:modulerr Module Error
If I comment out the dependecy the app loads fine.
module app {
angular.module("movie",
[/*"common.services"*/]);
}
And this is the "common.service" I'm injecting:
module app.common {
angular.module("common.services",
["ngResources"]);
}
Looking at the docs page it states:
This error occurs when a module fails to load due to some exception
So it looks like the common.services module isn't loading.
In my index I have this:
<!--Libraries-->
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="app.js"></script>
<!--Controllers-->
<script src="app/movieCtrl.js"></script>
<script src="app/movieSearchCtrl.js"></script>
<script src="app/movieListCtrl.js"></script>
<!--Services-->
<script src="app/services/common.services.js"></script>
So the common.services file is being loaded after the app.js. So where's the error comming from?
Well, i'm not familiar with typescript but shouldn't your service be
module common.services {
angular.module("common.services",
["ngResources"]);
}
rather than module app.common ?
In html I am loading the oclazyload before my app.js -
<!-- inject:js -->
<script src="/packages/libs/jquery/dist/jquery.js"></script>
<script src="/packages/libs/angular/angular.js"></script>
<script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
<script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endinject -->
<script src="app/app.js" ></script>
<script src="app/common/app.config.js" charset="utf-8"></script>
My app.js -
(function () {
angular.module('app', ['ui.router', 'oc.lazyload']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
But for some reason it doesn't load the oc.lazyload module at all . what might be the problem ? Am I missing something ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' 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.
There is a typo. The module name is camel case. Change
'oc.lazyload'
to
'oc.lazyLoad' //'L' capitalized
The dependency for oc lazyload should be added as oc.lazyLoad instead of oc.lazyload
app.js
(function () {
angular.module('app', ['ui.router', 'oc.lazyLoad']);
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
})();
Reference
I also had this error, even though I did not have any typos and I followed the configuration directions at https://oclazyload.readme.io/docs. I was using Angular within Ruby on Rails, and my error was fixed by adding the line below to my app/assets/javascripts/application.js file:
//= require oclazyload
I have the following problem.
Here's my angular app defenition:
angular.module('app', [
'ui.router',
'ui.utils',
'ngCookies',
'oc.lazyLoad'
]);
Here's part of my main html file:
<!-- ANGULAR -->
<script src="assets/plugins/angular/angular.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-router/angular-ui-router.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-util/ui-utils.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-sanitize/angular-sanitize.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-oc-lazyload/ocLazyLoad.min.js" type="text/javascript"></script>
<!--ngCookies-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.js" type="text/javascript"></script>
So I supposed I've done all I need to do to use $cookieStore. And yet, when I run my app, I see a blank browser window, and in console:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ngCookies due to:
[$injector:nomod] Module 'ngCookies' 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.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ngCookies
minErr/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:63:12
module/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1774:1
ensure#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1698:38
module#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1772:1
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4115:22
forEach#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:323:11
loadModules#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4099:5
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angu
Can anyone tell me what did I forget to do?
Things you could try:
Add http:// to the src
Try downloading with bower then add it like the rests
I did the following in the code:
angular-core.js:
var jdi = angular.module('jdi', ['ngStorage']);
login.html:
<!-- Angular -->
<script src="/assets/vendor/angular/angular.min.js"></script>
<script src="/assets/vendor/angular/angular-route.min.js"></script>
<script src="/assets/vendor/angular/angular-cookies.js"></script>
<script src="/assets/vendor/angular/angular-loader.js"></script>
it gives me the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=jdi&p1=Error%3A%20…2Flocalhost%3A3000%2Fassets%2Fvendor%2Fangular%2Fangular.min.js%3A17%3A381)
I'm new to angular, can anyone tell me what im doing wrong here?
Angular could not inject a module you required. Here, the only module from your code sample is ngStorage, and from login.html it seems that you did not load ngStorage javascript; if it is ngStorage from https://github.com/gsklee/ngStorage, you should have something like
<script src="/assets/vendor/ngstorage/ngStorage.min.js"/>