This is driving me up the wall! I am trying to use angular-animate.js but some reason the line $$selectors property of $$animateProvider (line 451) is undefined. Can someone explain how this property gets populated?
This situation is causing the lookup function at line 617 to throw "TypeError: Cannot read property '' of undefined"
My js includes look like this:
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
CSS includes like this:
<link rel="stylesheet" href="app/css/bootstrap.css" />
<link rel="stylesheet" href="lib/animate-css/animate.css"/>
and my app.js like this:
var app = angular.module('app', [
// Angular modules (dependencies)
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
'ngAnimate', // animations
'ui.bootstrap' // ui-bootstrap (ex: carousel, pagination, dialog)
]);
The frustrating thing was that this was working but I've somehow broken it. I've tried cleaning and downloading all the libraries again. Any help greatfully received!
I am using Gulp and Bower to download/import. All the files are present and being loaded by the browser:
TypeError: Cannot read property '' of undefined
at lookup (angular-animate.js:617)
at animationRunner (angular-animate.js:681)
at performAnimation (angular-animate.js:1284)
at angular-animate.js:959
at angular-animate.js:539
at Scope.$get.Scope.$digest (angular.js:15606)
at Scope.$get.Scope.$apply (angular.js:15824)
at done (angular.js:10263)
at completeRequest (angular.js:10435)
at XMLHttpRequest.requestLoaded (angular.js:10376)
This is due to a version conflict with angular 1.4 and angular-material master, which depends on 1.3.
Probably updating your angular version ""angular": ">=1.4."," in bower.json should solve this problem.
Related
I want to use Angular Datetimepicker without bower and npm.
I include datetimepicker.js into my index.html
<link href="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css" type="text/css" rel="stylesheet" >
<script src="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js"></script>
My app.js
var app = angular.module('myApp', [
'ui.router',
.....
'datetimepicker', // I try ui.bootstrap.datetimepicker and other names
]);
Also I have view and controller but now they are empty.
I get error:
Uncaught Error: [$injector:modulerr]
How to inject this library?
Addition 1:
And get error:
Uncaught Error: [$injector:modulerr]
Given this plunkr linked in the GitHub repo I think you need to add both
angular.module('myApp', [...'ui.bootstrap', 'ui.bootstrap.datetimepicker']);
I was just going through the code of a online reppositoty using angular.js and came across the following example:
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="js/ol.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="css/ol.css" />
<link rel="stylesheet" href="css/angular-openlayers-directive.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
</script>
</head>
<body>
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
<ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place.">
</ol-marker>
</openlayers>
<h1>Adding a layer with markers with no javascript example</h1>
</body>
</html>
Now there is the below part:
var app = angular.module('demoapp', ['openlayers-directive']);
I am not quite sure about, the above line, I read about dependency injection HERE. But i am not quite sure what is the purpose of the above line ? what is it really doing ?
I have gone though a few online examples that have code like the below:
// Define a new module for our app. The array holds the names of dependencies if any.
var app = angular.module("instantSearch", []);
(See the comment) , Ok but i still don't get what ['openlayers-directive'] , is doing ?
It declares a module named 'demoapp' that is dependant on a module named 'openlayers-directive'. This, basically, means that all the angular components (directives, services, filters, controllers, constants, etc.) defined in the module 'openlayers-directive' will be usable in your angular application.
Read the documentation.
openlayers-directive is an angular module. When you are creating your demo app module, you are including a reference to the openlayers module.
So if you wanted to use other modules in your demo app module you would also include them here, where you are declaring your module for the first time.
For example:
var app = angular.module('demoapp', ['openlayers-directive', 'anotherModule', 'yetAnotherModule']);
In your code you can then pass in any services from these modules by simply including them as parameters.
So if you have a demoController you could pass in a service from one of the included modules and use it.
For example
angular.module('demoApp').controller('demoContoller', function($scope, anotherModuleService)
{
$scope.someFunctionFiredFromController = function()
{
//I have access to this service because the module it
//belongs to was referenced by the demoApp module, and the
//service was injected into the controller
anotherModuleService.doSomethingRelevant();
}
});
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've an running an web application with angular.js (1.2.9)
i want to extend it with some animation stuff.
For this i i referenced the ng-animate js-file:
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular-animate.js"></script>
<script src="~/Scripts/ng/restangular.js"></script>
and I extended my module creation with ng-animate
var crApp = angular.module('crApp', ['ng-animate','restangular', 'ui.bootstrap', 'ui.router'])
but from then on i got a "uncaught object" error without changing anything else.
For me this looks like the ng-animate module could not be resolved.
What am I doing wrong?
Try
var crApp = angular.module('crApp', ['ngAnimate','restangular', 'ui.bootstrap', 'ui.router'])
Edit: The problem for the author was that he spelled 'ngAnimate' incorrectly, and thus the module could not be loaded.
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/