I have been trying to use angular intro js in my mockup angular js project the modal that asks whether the user needs to go through the tutorial is visible, However when I click the ok button that invokes the callMe method , an error is printed in the console stating,
message:"Intro.js is not available. Make sure it is properly loaded."
name:"Introjs not available."
Could anyone suggest where I am going wrong?
Make sure you have refered the angular-intro library and also injected as a dependency.
Reference:
<script src="intro.min.js"></script>
<script src="angular-intro.js"></script>
<script src="app.js"></script>
Module:
var app = angular.module('myApp', ['angular-intro']);
DEMO
Just to add to Sajeetharan's comment: It turns out that the order of dependency MATTERS. You must include the intro.js first, then angular-intro.js, then the main app.js.
Otherwise, you might get
Intro.js is not available. Make sure it is properly loaded." name:"Introjs not available.
Related
I have been trying to use the angular-timer, in my angularjs app, but I keep getting this error "TypeError: moment.locale is not a function".
I added my scripts like so. please can someone help me out?
<script src="assets/_plugins/classroom/angular-timer/angular-timer.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment.min.js"></script>
<script src="assets/_plugins/classroom/angular-timer/humanize-duration.js"></script>
<script src="assets/_plugins/classroom/moment/min/locales.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment-with-locales.js"></script>
Looks like your order might be wrong. I would guess that angular-timer depends on moment, locals and moment-with-locals, so it should be last in the loading order.
Update:
Alternatively, as plugin implementation can be problematic. I created a working demo of a custom timer/countdown for a user's question here, perhaps it can be adapted for your solution or at least lead you in the right direction.
You set an end time and supply a function to run when that end time is met.
I have made a basic carousel and and would like to use ng-animate to animate when entering and leaving each index in an array. The templates in Carousel.Data will soon contain html data. I would like to also know what would be the best way of passing html in an array so the user can click next and be presented with the next html template.
I have ng-animate loaded in the DOM with angular version 1.21 but I get an error when I try to inject the dependancy
var App = angular.module('App', ['ngAnimate']);
Here is what I have so far:-
http://codepen.io/anon/pen/wajRog
any help would be much appreciated
It's difficult to tell in CodePen but be sure that angular.min.js is loaded before angular-animate.js. Make sure the order is as follows:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-animate.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-touch.js
You can rearrange the resources in code pen by clicking the hamburger icon near each resources and clicking/dragging to the top. If i got to https://docs.angularjs.org/api/ngAnimate for example and open the plunker for anchoring. If you move angular-animate cdn script tag above angular.min.js, it will give an injection error.
Let me know if that works.
I try to use two dependencies:
"snap.svg": "~0.2.0", # snapsvg.io
"angular-snap": "~1.4.1", # jtrussell.github.io/angular-snap.js/
How I guess, it seems angular-snap uses a global Snap object as snap.svg and overrides the Snap object of Snap.svg.
In this order the Snap.svg functionalty goes away. If I revert the order of import, some Snap.js functionalty is missed.
Watch this plunkr http://plnkr.co/edit/rE4pNDqQnBh2e5wtqGUO?p=preview and swap the includes.
How can I use both libs?
Thx ahead!
I think your best bet is going to be using a module loader like RequireJS to pull both Snap.js and Snap.svg into you application in a controlled way, it looks like both support AMD module loaders.
Unfortunately this will mean you won't be able to rely on the snap-content directive from Angular Snap anymore. You'll need to create a new Snap.js snapper instance yourself and make use of snapRemote#register.
Here's some pseudo code:
require(['jakiestfu/Snap.js/snap'], function(SnapJS) {
snapRemote.register(new SnapJS(snapOptions));
});
require(['adobe-webplatform/Snap.svg/snap.svg'], function(SnapSVG) {
// Do stuff with SnapSVG...
});
Also, you'll want to assign a "snap-content" class name to the element you initialize your snapper with (this is also usually handled by the snap-content directive).
Edit:
I'm not recommending this approach but it should work as well if you don't mind some hacks:
In your head:
<script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg.js" type="text/javascript"</script>
<script>
// Save Snap.svg before it gets clobbered!
window.SnapSVG = Snap;
</script>
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
After that you could go on using the svg Snap as SnapSVG or whatever you want to call it. The module loader approach is arguably better in almost any way you want to look at it... unless you need to ship tomorrow :).
Edit 2:
I just released v1.5.0 of Angular Snap which makes the Snap.js constructor an injected dependency rather than something we just look for on the window. You could now provide your own constructor, maybe saving it before it gets clobbered:
myApp.config(function(SnapConstructorProvider) {
SnapConstructorProvider.use(window.Snap);
});
Using this you'll still be able to take advantage of the snap-content directive even if you pull in the Snap.js script with a module loader.
I am new to AngularJS and working my way through some documents and tutorials to learn. My question is in reference to Egghead's video series, this video in particular, demonstrating how to put together a basic search filter. I wanted to use this in a real app I'm building for a friend with a small candle-making business but when I modified it to be her candles rather than the Avengers cast (as demo'd in the video) I got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify ...
I copied a redacted (only 3 cast members in the array) version of EXACTLY what is in the video demo into a jsfiddle and discovered it still yields the same error. (For reference, the Egghead demo is here: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). I've read at least a half dozen similar questions on this site so far and tried every solution offered, but none of them get rid of this error or cause the Avengers search -- which works fine in the video demo -- to actually function properly.
HTML:
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$" />
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
var Avengers = {};
Avengers.cast = [
{
name: "Robert Downey Jr.",
character: "Tony Stark / Iron Man"
},
{
name: "Chris Evans",
character: "Steve Rogers / Captain America"
},
{
name: "Mark Buffalo",
character: "Bruce Banner / The Hulk"
}
];
return Avengers;
})
function AvengersCtrl($scope, Avengers) {
$scope.avengers = Avengers;
}
Simply put, can someone offer a solution that will work and get rid of this error, as well as explain in simple English (not Ph.D. level "Angular Obscurese") what causes it (in a nutshell) and what needs to be done to avoid it?
Edit: Apologies, but the jsfiddle link referenced above from the tutorial is no longer active. I have removed the broken link. The tutorial mentioned is still available for viewing.
Try using No Wrap - In Head or No wrap - in body in your fiddle:
Working fiddle: http://jsfiddle.net/Q5hd6/
Explanation:
Angular begins compiling the DOM when the DOM is fully loaded. You register your code to run onLoad (onload option in fiddle) => it's too late to register your myApp module because angular begins compiling the DOM and angular sees that there is no module named myApp and throws an exception.
By using No Wrap - In Head, your code looks like this:
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script type='text/javascript'>
//Your script.
</script>
</head>
Your script has a chance to run before angular begins compiling the DOM and myApp module is already created when angular starts compiling the DOM.
You have to play with JSFiddle loading option :
set it to "No wrap - in body" instead of "onload"
Working fiddle : http://jsfiddle.net/zQv9n/1/
For people having the same error with a similar code:
$(function(){
var app = angular.module("myApp", []);
app.controller('myController', function(){
});
});
Removing the $(function(){ ... }); solved the error.
For people who find this old posting on the web by searching for the error message, there is another possible cause of the problem.
You could just have a typo in your call to the script, even if you have already done the things described in the other excellent answer. So check to make sure you can used the right spelling in your script tags.
it turns out that I got this error because my requested module is not bundled in the minification prosses due to path misspelling
so make sure that your module exists in minified js file (do search for a word within it to be sure)
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
I know its know a 9 year old question, I was having this same error, I tried to put a js file containing AngularJS code in a directory where I also had the following files
I tried several things with no success until I just made a simple test to move outside that directory, isolating the file and that worked, I still don't know the reason. Hope this helps to someone
I'm having some weird issue with extjs. I have a form and a grid, each works great separately but when I put the grid inside the form, everything starts to fall to pieces.
My point by doig so would be to be able to submit ids from rows of the grid and at the same time, stuff from the form.
To do so, I put the standardSubmit to false and added a javascript method to the onSubmit attriobute of my form.
However, when I submit the form this way, I get a weird error :
Uncaught SynthaxError: Unexpected token <
But the form values are submitted and visible in the request's header. Of course, when I put the standard submit to true, the error goes away but the values from the grid are not submitted anymore...
This SyntaxError usually relates to a loaded JavaScript resource. These are common mistakes that can trigger this error message:
<script type="text/javascript">
<script type="text/javascript">
[...]
</script>
</script>
<script type="text/javascript">
var s = I forgot the opening quotes so this <html> tag will break the script';
</script>
<script type="text/javascript"
var s = 'Here we forgot to close the opening <script> tag! Boom!';
</script>
It could also be triggered by the server setting the content type to 'application/javascript' for a non-JS resource (which then again includes this tags).
I also remember reading that this happened to someone using a minified version of a JavaScript library, but no details on the exact reason were given (other than that the problem was solved by using the non-minified version.
You can also wrap your JS resources in a CDATA tag for debugging purposes which should get rid of the SyntaxError and probably bring up a standard JS error message for the invalid script.
<script><![CDATA[
/* Code here */
]]></script>
Once you identify the resource that triggers the exception it should be possible to spot the problem by doing a through study of the source with your CSI sunglasses on.
Note: my assumption is that it can*not* be triggered by data that is sent to the server, but only data that is returned from the server. This is because the error refers to the parsing process on the client. But I'm not 100% sure on this one.
If this doesn't help you should really post the involved code and/or explain what you do exactly when you 'added a javascript method to the onSubmit attribute of [your] form'.