Develop Reference

Error while adding dependency for angular-materialize

I want to use materialize for my angular project from https://github.com/krescruz/angular-materialize but I get the error
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module F1FeederApp due to: Error: [$injector:modulerr]
Failed to instantiate module ui.materialize due to: Error:
[$injector:nomod] Module 'ui.materialize' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
In my app.js:
angular.module('F1FeederApp', [
'ui.materialize',
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
What am I doing wrong? According to the link above these declarations should have been enough..

Try running this in root of your project if you are using bower.
bower install angular-materialize --save
and add the source file angular-materialize/src/angular-materialize.js into your index.html
OR
If you are not using bower or node download this file in your project and add it in your index.html
Hope this helps

Failing to instantiate ngRoute for a View

I am using below piece of code in my JS file:
var mainAngular = angular.module('baniyaApp', ['ngRoute','ui.bootstrap']);
////======================== CONFIG =================================
mainAngular.config(function($routeProvider, $locationProvider) {
alert('ng route');
$routeProvider
.when('/', {
templateUrl: "HomeLandPage.html"
});
});
////=================================================================
"HomeLandPage.html" exists at the same location, so no issue with the path. The main page that contains ng-view in it.I have taken care of using angular.js file from http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js link.
I am getting the below error on the console. Please confirm that the JavaScript file is correct.
Uncaught Error: [$injector:modulerr] Failed to instantiate module baniyaApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

You need to include angular-routes.js after including angular.js in your app directory and html

Module 'flow' not available in angularjs app

in my app.js I have included the dependency for flow
var myApp = angular.module('myApp',['ui.router', 'ngResource', 'flow']);
I have included the javascript in my index file to load as follows
<script type="text/javascript" src="//cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>
I am getting the error Module 'flow' is not available!
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module flow due to:
Error: [$injector:nomod] Module 'flow' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.23/$injector/nomod?p0=flow

This is probably because if you want to use the ['flow'] module in angularJs you have to include both:flow.js and ng-flow.
If you are using bower and it is configured to place the libraries on the js/vendor you would have to do something like this.
bower install "ng-flow#~2" --save
{{ HTML::script('js/vendor/flow.js/dist/flow.min.js') }}
{{ HTML::script('js/vendor/ng-flow/dist/ng-flow.min.js') }}
If you are not, just look for a ng-flow CDN.
Best regards!

you need to include http: before your cdn:
change your script to this and it should work:
<script type="text/javascript" src="http://cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>

Grunt build failing after adding angular-leaflet-directive

I've just added angular-leaflet-directive to my project and when I come to build it with Grunt, it's now failing. The dependency was added using bower. This project was built using the Yeoman angular-generator.
Here I'm including the leaflet-directive in my app.js
angular
.module('statsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'leaflet-directive'
])
And then for now, I simply have <leaflet></leaflet> in my view just to get things started.
When the Grunt build fails, I get this error message
Error: [$injector:modulerr] Failed to instantiate module statsApp due to:
Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to:
Error: [$injector:nomod] Module 'leaflet-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

This SO post solved my problem. It's not specific to the module I'm adding, but specific to Karma tests failing because they didn't know about the leaflet-directive module.
AngularJS Error: Module ngAnimate is not available

Failed to instantiate module error in Angular js

I encountered the following error with a root cause of Module 'ngRoute' is not available
Uncaught Error: [$injector:modulerr] Failed to instantiate module
Amail due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due
to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument."
Javascript code :
var amailServices = angular.module('Amail',['ngRoute']);
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl : 'list.html'}).
when('/view/:id',{
controller : DetailsController,
templateUrl:'detail.html'}).
otherwise({
redirectTo:'/'
});
}
amailServices.config(emailRouteConfig);
How to fix this

You need to include angular-route.js in your HTML:
<script src="angular-route.js">
http://docs.angularjs.org/api/ngRoute

Or the minified version of the file...
<script src="angular-route.min.js"></script>
More information about this here:
"This error occurs when a module fails to load due to some exception. The error message above should provide additional context."
"In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute."
Listed under section Error: $injector:modulerr Module Error in the Angularjs docs.

For me the solution was fixing a syntax error:
removing a unwanted semi colon in the angular.module function

I got this error due to not pointing the script to the correct path. So make absolutely sure that you are pointing to the correct path in you html file.

For me the error occurred due to my browser using a cached version of the js file containing the module. Clearing the cache and reloading the page solved the problem.

Such error happens when,
1. You misspell module name which you injected.
2. If you missed to include js file of that module.
Sometimes people write js file name instead of the module name which we are injecting.
In these cases what happens is angular tries to look for the module provided in the square bracket []. If it doesn't find the module, it throws error.