why when the view is rendered the following error was thrown
Uncaught Error: [$injector:modulerr] Failed to instantiate module
registrationModule due to: Error: [$injector:unpr] Unknown provider:
$routeProvider
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24routeProvider
at http://localhost:2044/Scripts/angular.js:68:12
at http://localhost:2044/Scripts/angular.js:4397:19
at getService (http://localhost:2044/Scripts/angular.js:4550:39)
at injectionArgs (http://localhost:2044/Scripts/angular.js:4574:58)
at Object.invoke (http://localhost:2044/Scripts/angular.js:4596:18)
at runInvokeQueue (http://localhost:2044/Scripts/angular.js:4497:35)
at http://localhost:2044/Scripts/angular.js:4506:11
at forEach (http://localhost:2044/Scripts/angular.js:321:20)
at loadModules (http://localhost:2044/Scripts/angular.js:4487:5)
at createInjector (http://localhost:2044/Scripts/angular.js:4409:19)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=registrationModule&…jector%20(http%3A%2F%2Flocalhost%3A2044%2FScripts%2Fangular.js%3A4409%3A19)
here is my route configuration
var registrationModule = angular.module("registrationModule", [])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Courses', { templateUrl: '/templates/courses.html', controller: 'CoursesController' });
$routeProvider.when('/Registration/Instructors', { templateUrl: '/templates/instructors.html', controller: 'InstructorsController' });
$locationProvider.html5Mode(true);
});
i'm using Angular JS in MVC5
You need include 'ngRoute'.
var registrationModule = angular.module("registrationModule", ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Courses', { templateUrl: '/templates/courses.html', controller: 'CoursesController' });
$routeProvider.when('/Registration/Instructors', { templateUrl: '/templates/instructors.html', controller: 'InstructorsController' });
$locationProvider.html5Mode(true);
});
Related
What is the problem with the following code?
(function() {
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
})();
I am getting the following error: Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.3/$injector/nomod?p0=myapp
You have not defined your module
angular.module('myapp',[])
and then
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
Am newbie to AngularJS and trying to learn stuffs. I am trying to create a gallery with angular-bootstrap-lightbox and I've included all the necessary dependencies required for the project. Dependencies included are:
<link href="css/angular-bootstrap-lightbox.min.css" rel="stylesheet" />
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-1.3.2.min.js"></script>
<script src="js/angular-bootstrap-lightbox.min.js"></script>
<script src="js/script.js"></script>
Below is my script.js file
angular.module('home', ["ngRoute", "bootstrapLightbox"]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/home', { templateUrl: 'partials/home.html' }).
when('/about', { templateUrl: 'partials/about.html' }).
when('/gallery', { templateUrl: 'partials/gallery.html', controller: "galleryController" }).
otherwise({ redirectTo: '/home', templateUrl: 'partials/home.html' });
$locationProvider.html5Mode(true);
}).controller("homeController", function ($scope, $http, $route) {
//home controller stuffs
}).controller('indexController', function ($scope, $location) {
$scope.isActive = function (route) {
return route === $location.path();
}
}).controller('galleryController', function ($scope, LightBox) {
$scope.images = [
{
'url': 'images/g1.jpg',
'caption': 'Optional caption',
'thumbUrl': 'images/g1.jpg' // used only for this example
},
{
'url': 'images/g1.jpg',
'thumbUrl': 'images/g1.jpg'
},
{
'url': 'images/g1.jpg',
'thumbUrl': 'images/g1.jpg'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
});
But it always throws unknown provider error whenever I visit gallery page and this error will be pointing to Lightbox parameter mentioned along with $scope in galleryController. Not sure what is the dependency here. But it does not recognize LightBox. I've followed complete steps mentioned there but couldn't quite achieve this right. Any help appreciated.
Update
Below is the error am getting.
angular.js:13424 Error: [$injector:unpr] Unknown provider: LightBoxProvider <- LightBox <- galleryController
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=LightBoxProvider%20%3C-%20LightBox%20%3C-%20galleryController
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:68:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4418:19
at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4423:45
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
at injectionArgs (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4595:58)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4637:18)
at $controller (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:10042:28)
at A.link (http://localhost:63211/js/angular-route.min.js:18:216)
at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:9623:9) <ng-view class="ng-scope">(anonymous function) # angular.js:13424
http://localhost:63211/gallery Failed to load resource: the server responded with a status of 404 (Not Found)
You need to change the dependency injected into galleryController from LightBox to Lightbox. (B is not capitalized in Lightbox.) That solves the problem.
I am using the angular seed project and try to use ui-router for user login based routing.
I get following error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
at new $UrlMatcherFactory
...
My code in app.js is:
'use strict';
// Declare app level module which depends on views, and components
angular
.module('MyApp', [
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state("root", {
url: "",
template: "<section ui-view></section>",
controller: function($state, user) {
if ($state.is("root")) $state.go(user.loggedIn ? "main" : "login");
}
})
.state("login", {
templateUrl: "login/login.html",
controller: "LoginCtrl"
})
.state("main", {
templateUrl: "main/main.html",
controller: "MainCtrl"
});
}])
.controller("MainCtrl", function($scope, user, $state) {
$scope.user = user;
$scope.logout = function() {
user.loggedIn = false;
$state.go("root");
}
})
.controller("LoginCtrl", function($scope, user, $state) {
$scope.login = function() {
user.loggedIn = true;
$state.go("root");
}
});
I didn't find anything with Google and hope someone can help me here.
Best regards
Probably a solution here ?
See this link : https://github.com/ded/script.js/issues/86
in my angular application i want to make redirect with $location.path('/');
but i'm getting this error
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.login due to:
TypeError: Cannot read property 'html5Mode' of undefined
here is my code
angular.module('myApp.login', ['ngRoute', 'angular-md5'])
.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/login', {
templateUrl: 'login/login.html',
controller: 'loginCtrl'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
}])
You missed to add dependency in the DI array before using it in factory function of a config block.
Code
.config(['$routeProvider', '$locationProvider', //<-- added dependency before using it in function
function($routeProvider, $locationProvider) {
This page: https://docs.angularjs.org/guide/providers has a table at the bottom which states that both constants and providers are available in config phase.
When I try to use some constant in my config I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
TypeError: undefined is not a function
The constant is set up as follows:
'use strict';
angular.module('services.config', [])
.constant('configuration', {
key: 'value';
});
then the configuration is:
angular
.module('testApp', ['services.config', 'ngRoute'])
.config(function ($routeProvider, configuration) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// do something with configuration.key - causes error
});
Does anyone know what I'm doing wrong?
Thanks in advance.
var app = angular.module('TestApp', []);
app.constant('configuration', {
key: 'value'
});
app.config(function (configuration) {
console.log(configuration.key); //value
});
app.constant('configuration', {
key: 'value'
});
here is the jsFiddle: http://jsfiddle.net/gopinathshiva/0701k7ke/8/