I am new to angular and was trying to get a modal window and following http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
But when I load the page, I get following error -
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=drag-and-drop&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fnomod%3Fp0%3Ddrag-and-drop%0AR%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A6%3A417%0AOd%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A412%0Aa%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A53%0AOd%2F%3C%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A1%0Ag%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A35%3A46%0Ar%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A7%3A300%0Ag%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A34%3A399%0Aab%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A38%3A135%0Auc%2Fd%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A17%3A381%0Auc%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A18%3A179%0AJd%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A17%3A1%0A%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A250%3A429%0Am.Callbacks%2Fj%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A27239%0Am.Callbacks%2Fk.fireWith%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A28057%0A.ready%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A29889%0AJ%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A30255%0A
Now I did some research and found it may be due to injection as proper modules cannot be found
Here is my controller initialization -
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $modal) {...});
Now I tried all these options but they keep on giving different errors
var App = angular.module('drag-and-drop', ['ngAnimate']);
App.controller('oneCtrl', function($scope, $modal) {...});
Then defining like this -
App.controller('oneCtrl', ['$scope', '$modal', function($scope, $modal) {
My scripts that I have included are -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="{!$Resource.AngularDragDrop}" ></script>
Any help will be very pleasing for me
THanks,
Ray
You are trying to use $modal object which belongs to angular-ui-bootstrap library, if you really wanted to use the modal popup, I'd suggest you to add angular-ui-bootstrap library in your project.
After adding library reference you need to add ui.bootstrap module reference in your app dependency.
var App = angular.module('drag-and-drop', ['ngDragDrop', 'ui.bootstrap']);
Or if you don't want that modal over there you could remove $modal from controller dependency.
As your given link has a code which inject modals dependency and there is modals custom service defined in that code. You need to add that service in your app.
Related
Currently trying to check very simple angular variables and functions. I cannot get even the simplest to work. This is my first time using it, and I need to use the older version as my lecturer requires it.
In the app.js I have many controllers but im only starting with one controller, with one variable assigned to a string:
var app = angular.module('myApp', ['ngRoute']);
blah blah blah etc etc
app.controller('HomeController', function ($scope) {
$scope.name = 'Batman';
}
In the runner.html file I have the following:
<script src="lib/jasmine-2.2.0/jasmine.js"></script>
<script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
<script src="lib/jasmine-2.2.0/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src='https://code.angularjs.org/1.4.8/angular-mocks.js'></script>
<!-- include source files here... -->
<script src="../js/main.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
In the test.js i have the following:
describe('myApp', function () {
var scope, controller;
beforeEach(angular.mock.module('myApp'));
beforeEach(angular.mock.inject(function($controller,$rootScope){
scope = $rootScope.$new();
$controller('HomeController', {$scope: scope});
}));
it('sets the name', function () {
expect(scope.name).toBe('Batman');
});
});
I then get the following error when I run the test:
Error: [$injector:modulerr]
EDIT
It appears to be the angular routing causing the problem. When I removed the route module 'ngRoute' it appears to function correctly. Is there is method to using jasmine with routing?
The problem with this was you were not having angular-route library included despite having it as a module dependency (angular.module('myApp', ['ngRoute'])).
I added as the following along with other libraries:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
And it's working!
Here's working plunker
Portion of my index.html showing i have included angular and angular ui bootstrap both. And they are loading fine , have confirmed that
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
I am injecting 'ui.bootstrap' module in my admin module which is injecting just fine
var admin = angular.module('admin', ['ngResource', 'ui.router','ui.bootstrap' ])
.controller('UserController', UserController)
This is my controller class where i am injecting $uibModal and getting exception. Could not figure out the reason why...
export default class UserController {
// #ngInject
constructor(UserService, $uibModal) {
So turned out that i was on angular 1.2 angular ui-bootstrap supports
I'm injecting stripe angular into a module to create stripe tokens, but i seem to be having some dependecy injection issues:
i've got both the Stripe.js and the angular-stripe directive loading in index.html
<!-- Stripe includes-->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>
<!-- Ends Stripe includes -->
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="factory/appointments.js"></script>
<!-- <script src="directives/datepicker.js"></script>
--><script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
and I'm injecting correctly based on the docs:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Stripe.setPublishableKey('my-key-here');
}]);
what am i doing wrong?
here is my error
Error: [$injector:unpr] Unknown provider: stripeProvider <- stripe <- formController
http://errors.angularjs.org/1.3.14/$injector/unpr?p0=stripeProvider%20%3C-<div ui-view="" class="ng-scope">tripe%20%3C-%formController
You list stripe as a dependency, but never pass it into your function:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Just add a stripe parameter:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment, stripe) {
By angular-stripe directive, do you mean https://github.com/gtramontina/stripe-angular ?
If so, you are misunderstanding its usage(yes its doc is poor). You should add stripe as a module dependency instead of a service to inject. Change the code in your app.js to something like this:
angular.module('formApp', ['stripe']);
And remove the stripe in your injection annotaion, then you are good to go.
You may also need to add Stripe.setPublishableKey('your-publishable-key'); into a suitable place, possibly a run block or a config block.
The docs are just fine.
First make sure that you are loading the required files:
<script src="https://js.stripe.com/v2/"></script>
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular-stripe/release/angular-stripe.js"></script>
Then add the angular-stripe module to your app:
angular.module('app', [ 'angular-stripe']...
In your config block load the stripeProvider and initialize it with your Stripe API key.
angular.module('app').config(function(stripeProvider) {
stripeProvider.setPublishableKey('yourapikey');
....
Finally you can use this in your controller:
angular.module('app').controller('CheckoutCtrl', function(stripe) {
stripe.card.createToken(card) ...
Ensure you do all these steps. My guess from your error message is that you did not load the angular-stripe' module in your app which would then cause any call tostripeProvider` to fail with that error.
I have a project which I would like to add a modal to. Great, so I read up and it sounds like the way to go is by using $dialog. I've got angular already, I've got bootstrap and bootstrap-ui.
Reading a post from 2013, they say "Hey, go get The Angular-UI Module, that's where $dialog is!"
Okay, I went to the angular-ui site, and unless I'm really stupid (and maybe I am) there is no such thing as The Angular-UI Module. Nor can I figure out easily which file on that site (since there are a WHOLE bunch) would contain the magical $dialog.
Help?!
This is being included:
<script src="lib/AngularJS/angular.js"></script>
<script src="lib/AngularJS/angular-route.js"></script>
<script src="lib/AngularJS/angular-sanitize.js"></script>
<script src="lib/jQuery/jquery-2.1.1.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-file-upload/dist/angular-file-upload-all.js"></script>
var myApp = angular.module("myApp",
['ngRoute',
'angularFileUpload',
'ui.bootstrap.tpls',
'ui.bootstrap.rating',
'ui.bootstrap',
'ngMap',
'ngSanitize']
);
myApp.controller('myController',
['$scope','$rootScope', '$dialog',
function ($scope, $rootScope, $dialog) {
If I remove $dialog from the controller, everything is fine. As soon as I put it in there, I get the unknown provider error.
What you most likely want is $modal
myApp.controller('myController',
['$scope','$rootScope', '$modal',
function ($scope, $rootScope, $modal) {
Read more about it here: http://angular-ui.github.io/bootstrap/#/modal
If I remember correctly, is used to be called $dialog and was since changed.
I'm trying to do some unit tests with Jasmine in my Angular application, but I'm facing some errors.
Error
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
Spec
describe("testing the controller", function () {
var $controllerConstructor;
var scope;
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
}));
it("should validate a contact", function () {
var ctrl = $controllerConstructor('crmContatosCtrl', { $scope: scope });
});
});
App.js
angular
.module('app', ['ngRoute', 'LocalStorageModule'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
// My routeProvider here
}]);
I'm not using neither Yeoman nor Karma yet, because this is my fisrt application using Angular.
Included Files
<script src="../../Scripts/jasmine/jasmine.js"></script>
<script src="../../Scripts/jasmine/jasmine-html.js"></script>
<script src="../../Scripts/jasmine/boot.js"></script>
<script src="../../Scripts/angular/angular.js"></script>
<script src="../../Scripts/angular/angular-mocks.js"></script>
<script src="../../Scripts/angular/angular-route.js"></script>
<script src="../../Scripts/angular/angular-local-storage.js"></script>
<script src="../../Scripts/ngStorage.js"></script>
<script src="../../Scripts/ng-infinite-scroll.js"></script>
<script src="../../Scripts/angular/common.js"></script>
<link href="../../Scripts/jasmine/jasmine.css" rel="stylesheet" />
<script src="../core/app.js"></script>
<script src="../crm/contatos.js"></script>
<script src="contatosSpec.js"></script>
I think you may simply have a problem with your configuration for the dependencies for the tests. Without Karma I don't know how you do the tests but I guess you have somewhere a configuration file for Jasmine where you specify the files to be included. You have to include all files and you have to include first all the libraries. Be careful with the order and try to respect the same as you have in your html file that you use to run the application.
If the order is wrong the JS will try to execute before the libraries it needs are included. In your case maybe even the whole angular stack.
Update
Do not forget that Jasmine works using it's own html file and will not include the libraries you usually use if you do not tell it. And also don't forget to include Angular Mock library , essential for your tests
Update 2
Ok I think I found why you have a problem
There is something wrong in this code
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
In angular when you call a module using module('smthg',[]) you are creating it, not calling it. You should use this form instead, there is no need to reimport the services that you already included in your main module.
beforeEach(module('app'));
check the Creating versus Retrieval section of the angular documentation https://docs.angularjs.org/guide/module