Develop Reference

uncaught error in Angular when using $locationProvider

I am trying to get the path. So I have:
use strict';
angular.module('wixApp', [
'ngRoute',
'wix'
])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true).requireBase(false);
$routeProvider
.when('/', {
templateUrl: 'views/app.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
However, when I run this, I get uncaught error: $[injector:modulrr]
This only happens when I add $locationProvider in .config
here is the error in console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=wixApp&p1=TypeErro…2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.min.js%3A19%3A83)
Object

The error says that the module could not be instantiated which is mostly caused by some invalid module dependencies. Did you forget to add the angular-route javascript file to your build process (or as script tag in the index.html)?
For a correct setup please refer to the docs here: https://code.angularjs.org/1.4.12/docs/api/ngRoute
If you are using the non-minified version of angular during development, you will also get some better readable error messages.

Using ngRoute with AngularJS Errors

I'm creating an app using Meteor as my framework and AngularJS on the front end. I've been stuck on attempting to figure out how to route my website. What I was planning of doing is breaking up my HTML into separate files so its easier to make changes in the future and its also organized.
This is my JS file :
var myApp = angular.module('CalorieCounter',['angular-meteor']);
angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
});
});
The error I'm receiving is the following :
angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr]
Failed to instantiate module CalorieCounter due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
Not sure why exactly I'm receiving this error...I literally followed a tutorial that I found online. Please advise. Anyone. Been stuck on this for the past 4 hours :(
UPDATE #1
After, following what everyone suggested, now I'm getting the following error:
angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr]
Failed to instantiate module CalorieCounter 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
I don't understand why I'm getting this error, when I just checked up with the AngularJS Docs : https://docs.angularjs.org/api/ngRoute
UPDATE #2
I figured out what was wrong and do not have the error reported in Update #1. What I'm confused about now is the following :
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
})
.when('/register', {
templateUrl : 'public/register.html'
});
});
When I try to go to : localhost:3000/register it just refreshes the home page and stays there. Another question, in my HTML files, how do I redirect my button to the specified HTML file? Is that just regular HTML convention or is there a specific way of doing it in terms of AngularJS?

you're creating 2 angular modules. It's confusing because the CalorieCounter module is called 'myApp', and the 'myApp' module is not assigned to any var. To use the CalorieCounter module within the myApp module, add it as a dependency:
var calorieCounterApp = angular.module('CalorieCounter',['angular-meteor']);
var myApp = angular.module('myApp', ['ngRoute', 'calorieCounterApp']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
});
});

The thing is that you're declaring ngRoute on the module myApp, but the module you're referring to through the myApp variable is CalorieCounter
If you change it to this it should work:
var myApp = angular.module('CalorieCounter',['angular-meteor', 'ngRoute']);

I don't know about ngRoute but you can use angularui:angular-ui-router (github) package to route your website like this (Code from the example in documentation),
var myApp = angular.module('myApp', [
'angular-meteor',
'ui.router'
]);
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
});

Change to this:
var myApp = angular.module('CalorieCounter',['angular-meteor','ngRoute']);

angular module not available even though it's defined

When I try to run the code below I get two errors that say
Error: [$injector:nomod] Module 'rooms' 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.
Error: [$injector:modulerr] Failed to instantiate
module app due to: [$injector:nomod] Module 'app' 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.
I can see that I haven't misspelled the the name of the module anywhere and I have included the dependencies for the necessary modules and I have structured the modules in the necessary order so that none of the modules are undefined for each other(as in rooms.controllers module exists before it's injected and rooms module exists before it's injected into the app module
(function(){
'use strict';
//create the module that is going to contain the controllers for the rooms module
angular.module('rooms.controllers', [])
.controller('RoomCtrl', RoomCtrl);
function RoomCtrl(){
var vm = this;
vm.rooms = [];
};
})();
(function(){
'use strict';
//create the rooms module and inject rooms.controllers module and ngRoute module
angular
.module('rooms', ['rooms.controllers', 'ngRoute']);
});
(function(){
'use strict';
//get the rooms module and config it's routes, because we're getting it we don't need []
angular
.module('rooms')
.config(function($routeProvider){
$routeProvider
.when('/rooms',{
templateUrl:'public/modules/rooms/templates/roomlist.html',
controller: 'RoomCtrl',
controllerAs: 'room'
})
})
})();
(function(){
'use strict';
//bootstrap the whole thing together
angular.module('app', ['rooms']);
})();

This code block is not executed.
(function(){
'use strict';
//create the rooms module and inject rooms.controllers module and ngRoute module
angular.module('rooms', ['rooms.controllers', 'ngRoute']);
})(); // <-- here

Uncaught Error: [$injector:modulerr] Failed to instantiate module polmgr due to

Error in Chrome Developers Tool
Uncaught Error: [$injector:modulerr] Failed to instantiate module polmgr due to:
Error: [$injector:modulerr] Failed to instantiate module polmgr.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module $http due to:
Error: [$injector:nomod] Module '$http' 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 error is coming when i add $http to my module in ionicframework.
I am noob.
I have added the $http in controllers.js file and if i remove everything works fine. but i need to make a http get call.
Find the controllers.js code below :-
angular.module('polmgr.controllers', ['$http'])
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});
Correct Code:-
angular.module('polmgr.controllers', [])
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});

From the looks of things you are trying to inject the $http service incorrectly.
It is part of the core ng module that angular.js/angular.min.js provides.
So you don't need to add it as a module dependency like this:
var ctrlModule = angular.module('polmgr.controllers', [..., '$http', ...])
Instead, just inject it into your controller functions like you would do for $scope:
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});

Failed to instantiate module, AngularJS

Im trying to use angular-file-upload, https://github.com/danialfarid/angular-file-upload.
When I try to Instantiate the module, angularFileModule, I get the following error:
Error: [$injector:modulerr] Failed to instantiate module cryptlib due to: [$injector:modulerr] Failed to instantiate module angularFileUpload due to: [$injector:nomod] Module 'angularFileUpload' 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.
I'm trying to Instantiate it in my app.js file:
var gameApp = angular.module("cryptlib", [
'ngRoute',
'ngSanitize',
'cryptlib_controllers',
'cryptlib_directives',
'cryptlib_services',
'angularFileUpload'
]);
angular.module('cryptlib_controllers', []);
angular.module('cryptlib_directives', []);
angular.module('cryptlib_services', []);
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageController'
})
.when('/game', {
templateUrl : 'partials/uploadBook.html',
controller : 'uploadBookController'
});
});
I have no Idea why this wont work. Can anyone help me?