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']);

Is there a way to insert Javascript code exclusive for "grunt build"?

I'm building an application with AngularJS and Grunt, and i have a particular line of code that i would like to use only in the "dist" version of my app, is there a way to tell grunt to delete that line of code unless i run 'grunt build'?
angular
.module('myModule', [
'ngResource',
'ngRoute',
'ngSanitize'
])
.config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
$locationProvider.hashPrefix('!');
/** Insert code if 'grunt build' **/
$locationProvider.html5Mode(true);
/** End of code inserted for build **/
}]);

You could use a task like grunt-string-replace (https://www.npmjs.org/package/grunt-string-replace) and then simply leave a comment in then replace that comment with what you want on build.
options: {
replacements: [{
pattern: '// insert code here',
replacement: '$locationProvider.html5Mode(true);'
}]
}

Which bower package do I need in order to work with locationProvider in angularJS

I am trying to remove the hash tag from the url in angularJS. From the research I found that I need to use $locationProvider but I can not figure out which dependency is required to get this working!
This is my angular code
angular.module('airlineApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
]).config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/testing', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
That does not work, I'm assuming it's because I don't have locationProvider.
I am using the angular engine in bower to help with dependency instalments. So for locationProvider I tried
bower install --save locationProvider
That doesn't exist, I also search in the bower Search Bower Packages section and can't find anything useful.
I'm just starting with angular so it might be that the problem is elsewhere. Do you know what's going on?
Thanks

$locationProvider must work from box
try use another for for injector
angular.module('airlineApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
]).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/testing', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
if possible - give a value that got your module by name $locationProvider or show exxample at jsbin

1) Are you getting an specific error message on console?
2) Be sure to include the .js files, like
<script src="bower_components/locationProvider"></script>

AngularJS: 'Unknown provider' error for $sce in version 1.2.3

I'm using AngularJS 1.2.3 which is supposed to enable the SCE service by default. However, I'm getting the following error:
http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=SaveApp&p1=Error: [$injector:unpr]
http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24sce
at Error (native)
This is my code:
var AwesomeApp = angular.module('AwesomeApp', ['ngCookies', 'ngSanitize', 'ngRoute', 'ui.bootstrap', 'ui.router'], function($httpProvider, $dialogProvider) {
And a little further down:
AwesomeApp.config(['$routeProvider', '$compileProvider', '$sce', function($routeProvider, $compileProvider, $sce) {
$routeProvider.
when('/', {templateUrl: $sce.getTrustedResourceUrl(chrome.extension.getURL('app.html')), controller: 'searchResultsController'}).
otherwise({redirectTo: '/'});
Any ideas why there's an Unknown Provider error?

$sce is a service (not a provider)
You cannot inject services into config blocks only providers.
What you can do is to inject $sceDelegateProvider and create a whitelist:
.config(function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist(['self','http://*.url.com/**']);
})
from $sceDelegateProvider docs:
The $sceDelegateProvider provider allows developers to configure the $sceDelegate service. This allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing Angular templates are safe.