I'm using ng-boilerplate (v0.3.2-release), and I'm trying to add ngAnimate but it doesn't work! I'm missing something silly I'm sure.
I have a link to the correct CDN:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
Checking in the brower Sources shows the file is loaded correctly.
But when I try to add to my module ngAnimate:
angular.module( 'ngBoilerplate.UserDetails', [
'ui.router',
'plusOne',
'ngAnimate'
])
Grunt fails and says that karma:unit:run failed.
I've used bower to install ng-animate in the vendor dir (like in this question), but that didn't worked either.
Added on behalf of OP.
In the file build.config.js I'v added to vendor_files the path to ng-animate.js, problem solved :)
Related
I was following a tutorial for creating a MEAN stack project with Google Maps integration. I finished the project without any problems, thus, I stopped working on it. When I came back to check on it, it just doesn't work anymore. I didn't change anything with the code. I even pulled a previously working commit from my repository but the error
[$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387)
is still there. I really don;t have an idea what went wrong because this was previously working fine. I hope someone could help.
EDIT. Here's a part of the 'gservice' service of my project.
// Creates the gservice factory.
// This will be the primary means by which we interact with Google Maps
angular.module('gservice', [])
.factory('gservice', function($rootScope, $http) {
The problem is here: components.html
<!-- Client Scripts -->
<script src="../app/client/routes/script.js"></script>
<script src="../app/client/service/gservice.js"></script>
<script src="../app/client/service/aservice.js"></script>
Your scotchApp module is defined in script.js as:
var scotchApp = angular.module('scotchApp', ['ngRoute',
'ngCookies',
'controllerStoreDetail', 'controllerStoreCategory',
'controllerStoreQuery', 'controllerUserDetail',
'controllerUserAuthentication', 'geolocation',
'gservice', 'aservice',
'datatables'
]);
It has a dependency on gservice, aservice etc. But those files are loaded after script.js. So while loading your module (script.js), angular is not able to find definition for those services. You need to make sure that all dependencies are loaded before script.js.
#devqon had asked this question:
Is your js file which declares the gservice module included before the
js file which declares the scotchApp module?
To which you answered:
#devqon Yes it is. I really find this case weird as it was really working perfectly for weeks until now.
Which doesn't seem to be the case.
Rectify the sequence in which you are loading JS files and the error will be gone.
I fixed the problem. The cause was a missing 'v=3' in the src of the script for loading the Google Maps API. I still don't why that's the case as the project was previously working properly.
I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me.
I am following the README file on the angular-velocity github page. But when I run my application, I am getting an error that I am missing the module.
Here is what my module declaration looks like:
var appModule = angular.module('app.module', ['module-one', 'module-two', 'angular-velocity']);
...
The error I get now is:
Module 'angular-velocity' is not available! You either misspelled the module name or forgot to load it.
Further reading I see this:
When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.
Ok, so I installed (via npm) the velocity library. How do I include that in my list of dependancies?
Also this:
angular-velocity assumes that the Angular core and the additional ngAnimate module is loaded
So does that mean I need something like this?
var appModule = angular.module('app.module', ['module-one', 'module-two', 'ngAnimate', 'angular-velocity']);
But in the example, all that is listed is angular-velocity.
Nowhere in my project do I see individual script tags. I am assuming the project just reads the dependancies and grabs them from the package.json file? (Completely guessing).
This does not happen:
<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/velocity/velocity.ui.min.js"></script
<script src="bower_components/angular-velocity/angular-velocity.min.js"></script>
Thank you for any suggestions!
You can include velocity using CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
or using bower
bower install velocity
and add its references in the header from default folder bower_components.
If instead you use npm you can use:
npm install velocity-animate
and add its references in the header from default folder node_modules.
I am trying to use angular-chart.js in my application, though i'm getting the following error:
Error: [$injector:nomod] Module 'chart.js' is not available
I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.
Here are the versions of the libraries i've installed:
Here is my directory structure:
app/
----libs/
------Chart.js/
----------src/
------------chart.js
------angular-chart.js/
--------dist/
----------angular-chart.js
----------angular-chart.css
--index.html
Here is the link to the libraries installed with bower in my index.html:
<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">
I am trying to inject chart.js module into my controller like so:
angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }
Any suggestions? Thanks!
The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.
Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.
Can you provide a complete repro step using this template?
I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.
Next, you state
I am trying to inject chart.js module into my controller
The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.
The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.
I'm new on AngularJS and I have problems each time I follow a tutorial and add an external module. And I have some questions about how not to get injection errors.
Q1. How I can solve the injector/module problem? I have used bower to install 'ngSanitize', included in the HTML like:
<body ...>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/ngSanitize/index.js" type="text/javascript"></script>
</body>
Q2. If the order of adding the modules affects the results, is there a plugin for NetBeans, or an online application to check modules dependencies so they can be added in order?
Q3. Finally, what are the correct steps to inject external modules to an AngularJS single page application without injector/modulerr?
Original:
angular.module('app', [
'ngRoute',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
Objective situation that throws injection error for 'ngSanitize':
angular.module('app', [
'ngRoute',
'ngSanitize',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
The displayed error that crashes the application loading
I got the same error using angularjs.org/1.4.8.
The main problem I think is from using that specific ngSanitize.
You should install it using: bower install angular-sanitize and not bower install ngSanitize.
Despite being related to the same thing, ngSanitize is, according to it's repo description:
angular-sanitize module without including angular.js for Backbone and
other frameworks
As you can see they belong to different repos:
angular-sanitize: https://github.com/angular/bower-angular-sanitize
ngSanitize: https://github.com/gdi2290/ngSanitize
Script loading in HTML is important. I always start by inserting jQuery, then angular, then angular specific modules like (angular-animate, angular-sanitize, etc) and then my custom angular modules scripts.
Regarding Q3, I don't think you messed up with module injection. It just showed that error because of using ngSanitize instead of angular-sanitize.
I am making use of yeoman angular fullstack generator
i want to install admin-lte-angular theme in my app
i have installed it using bower
but i don't know how install it in angular app
please help to install it
Add the css and the javascript libs to the index.html:
<link href="bower_components/admin-lte-angular/admin-lte-angular.css">
// angular.js must be loaded first!
<script src="bower_components/admin-lte-angular/admin-lte-angular.js"></script>
Add 'admin-lte-angular' to the module dependencies:
angular.module('dashboardApp', [ 'admin-lte-angular' ])
If you are using this https://github.com/sarahhenderson/admin-lte-angular
Note that the author stated it is a working in progress. So I don't think it is a stable code to use.