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
Related
I'm traying to use Angular ui Notifications. When I tray to install it browser tells me "Error: "[$injector:unpr]". The problem is that for me the dependencies are ok. The code:
var app = angular.module('app', ['ngRoute', 'ngTable', 'ui-notification']);
app.controller('clientesController', ['$scope', 'NgTableParams', 'ui-notification', 'clientesService',
function ($scope, NgTableParams, Notification, clientesService) {
EDIT:
The way I'm pulling in my js files:
<!--Angular Files-->
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/lib/ng-table.js"></script>
<script src="app/lib/angular-ui-notification.min.js"></script>
<!-- App files-->
<script src="app/app.js"></script>
<script src="app/controllers/clientes/clientesController.js"></script>
<script src="app/services/clientes/clientesService.js"></script>
Thanks for your help!
https://github.com/alexcrack/angular-ui-notification#service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
Change then name of the injected service to the correct name:
app.controller('clientesController', ['$scope', 'NgTableParams', 'Notification'...
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.
I'm using ng-table in an AngularJs project. In my html i'm calling ng-table script file before my controller but (Because of size, i guess) controller is loading before ng-table and giving $injector:modulerr error.
How can i make sure ng-table will load first or bootstrap the app again after all dependencies are loaded?
My html:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="serveriphere/Assests/Scripts/angular-route.js"></script>
<script src="serveriphere/Assests/Scripts/ng-table.js"></script>
<script src="serveriphere/Controllers/TopStreaksController.js"></script>
And in my controller:
var widgetApp = angular.module('widgetApp', ['ngRoute','ngTable']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
widgetApp.controller('topStreaksCtrl', function ($scope, $http,$filter, ngTableParams) {
stack trace (link)
controller line 133:
angular.bootstrap(document, ['widgetApp']);
Bootstrap the application once the page has finished loading.
angular.element(document).ready(function() {
angular.bootstrap(document, ['widgetApp']);
});
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 am injecting the entityManagerFactory into Angular but I am getting an error. This is being done in the datacontext module just like John Papa's example. The error is unknown provider. I am including the entityManagerFactory.js file in the index.html file but no success. Any ideas?
function () {
'use strict';
var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['common', 'entityManagerFactory', 'breeze', 'logger', datacontext]);
function datacontext(common) {
var $q = common.$q;
var service = {
getPeople: getPeople,
getMessageCount: getMessageCount
};
}
}
I had the same error, the solution was simple and documented in John Papas blog.
In your index.html file, make sure that you have references to all of the required source files, and that they are loaded in the correct order.
<link href="content/breeze.directives.css" rel="stylesheet" />
<script src="scripts/breeze.debug.js"></script>
<script src="scripts/breeze.angular.js"></script>
<script src="scripts/breeze.directives.js"></script>
<script src="scripts/breeze.saveErrorExtensions.js"></script>
<script src="scripts/breeze.to$q.shim.js"></script> <!-- Needed only if you are using to$q -->
<script src="app/app.js"></script>
...
...
<script src="app/services/entityManagerFactory.js"></script>
Make sure that app.js is loaded before entityManagerFactory.js
Don't forget to include references to your breeze modules in app.js as well.
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'breeze.angular', // configures breeze for an angular app
'breeze.directives', // contains the breeze validation directive (zValidate)
'ui.bootstrap' // ui-bootstrap (ex: carousel, pagination, dialog)
]);
If you started a new project using HotTowel.Angular.Breeze version 2.2.0, the issue you're facing may actually be a problem with the BreezeProvider, which entityManagerFactory injects.
If this is the case, you should be seeing the error:
Unknown provider: breezeProvider <- breeze <- entityManagerFactory <- datacontext
To correct this problem, make sure you have added both 'breeze.angular.js' and 'breeze.directives.js' to the index.html and added the 'breeze.angular' and 'breeze.directives' to app.js.
This will allow angular to inject the breezeProvider into entityManagerFactory, which should then be able to successfully be injected into your datacontext.
Additionally, You may find that you are missing the breeze.directives.js from the script folder and instead only have breeze.directives.validation.js. This appears to be an issue with the HotTowel.Angular.Breeze v2.2.0 Nuget package. You can fix this by installing Breeze.Angular.Directives v1.3.6 using Nuget.
PM> install-package breeze.angular.directives
Additional information and detailed instructions on this issue can be found on John Papa's blog at http://www.johnpapa.net/new-breeze-angular-service/