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.
Related
So I'm new to Angular and trying to figure out how multiple routes can lead to the same view/templateUrl and controller. Here is what I've written:
angular
.module('mwsApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
])
.config(function ($routeProvider, $locationProvider) {
// debugger
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'MainCtrl as vm',
})
.when('/rika', {
templateUrl: 'index.html',
controller: 'MainCtrl as vm',
})
// .otherwise({
// redirectTo: '/'
// });
$locationProvider.html5Mode(true).hashPrefix("!");
});
Issue: Currently, if I go to "localhost:9000/" it shows me the correct version, but if I go to "localhost:9000/rika" it gives me "Cannot get /rika".
Debugging: I've narrowed down the problem to html5Mode. I'm trying to get rid of the #! that Angular adds automatically onto the URL, but when I do that, the error pops up.
Appreciate anyone's input!
You cant get rid of # in local development so you need to comment this line
$locationProvider.html5Mode(true).hashPrefix("!");
But when you're on some server on production then uncomment and use it to remove the #
otherwise you'll keep getting not get error on reloads in local development
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']);
Getting the following error in my browser:
Uncaught Error: [$injector:modulerr] Failed to instantiate module sayHiApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMockE2E due to:
Error: [$injector:nomod] Module 'ngMockE2E' 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.15/$injector/nomod?p0=ngMockE2E
at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
at http://127.0.0.1:9000/bower_components/angular/angular.js:1611:17
at ensure (http://127.0.0.1:9000/bower_components/angular/angular.js:1535:38)
at module (http://127.0.0.1:9000/bower_components/angular/angular.js:1609:14)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3717:22
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3718:40
at Array.forEach (native)
http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=ngMockE2E&p1=Error…ngular%2Fangular.js%3A3718%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
at http://127.0.0.1:9000/bower_components/angular/angular.js:3745:15
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3718:40
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at createInjector (http://127.0.0.1:9000/bower_components/angular/angular.js:3651:11)
http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=sayHiApp&p1=Error%…F%2F127.0.0.1%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A3651%3A11) angular.js:78
My app.js looks like this:
'use strict';
angular
.module('sayHiApp', [
'ngCookies',
'ngMockE2E',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.run(function($httpBackend) {
var name = '';
$httpBackend.whenPOST('/name').respond(function(method, url, data) {
name = angular.fromJson(data);
return [200, name, {}];
});
$httpBackend.whenGET('/name').respond(name);
});
Am I missing something?
The angular.mocks.js file consists of a number of modules helpful in mocking and testing. The most used ones are ngMock, ngMockE2E which provide the mocks for some of the most used components such as $timeout, $rootScope, $controller, $httpBackend ($httpBackend is part of ngMockE2E).
In order to use any of these modules as dependecy you need to load angular.mocks.js. Just add this script in your html file to remove the [$injector:modulerr] which is an error caused when the module added as dependency is not found or its file has not been loaded
I only add to use $httpBackend, so only 'ngMocksE2E' module was necessary, so I did:
import angular from 'angular';
// it exports moduleName that is 'ngMockE2E'
import ngMockE2EModuleName from 'angular-mocks/ngMocksE2E.js';
export default angular.module('app', [ngMockE2EModuleName]);
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.24/$injector/modulerr?p0=curveApp&p1=Error%…rjs.org%2F1.2.24%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A...<omitted>...0)
Im getting the above error in my Laravel/Angular application. I went to the URL and I'm still not sure what the error is coming from.
I have a file app.js in project/public/js with this code:
var curveApp = angular.module('curveApp', [
'ngRoute',
'curveControllers'
]);
And then a file config.js in project/public/js with this code:
curveApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/register', {
templateUrl: 'partials/register.html',
controller: 'RegisterCtrl'
});
}
]);
Sorry for the beginner questions -- I'd google to find answers but I'm not quite sure what to be looking for.
I'm trying to create HTML templates in project/public/js/partials and have them switch based on the URI without the page refreshing.
This errors show that, when some of your modules doesn't exist in page and not included, make sure what ngRoute and curveControllers are defined and attached to your DOM.
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>