angular bootstrap lightbox throws unknown provider error - angularjs

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.

Related

$injector:modulerr Error

So I'm attempting to learn Angular using a MEAN stack and I'm having an issue getting a simple app that I'm playing around with working again.
The specific error i'm getting right now is angular.js:38 Uncaught Error: [$injector:modulerr] and after hours of researching, troubleshooting, and banging my head I can't seem to get my app working again. It worked at one point with a very basic app.js but I've since changed it use an anonymous function and adjusted my controller.js and factory.js.
Here's the code for my app.js, factory.js, and controller.js
If anyone would be willing to assist me in locating what the issue is I'd greatly appreciate it!
app.js
(function(){
var iquueApp = angular.module('iquueApp', ['ngRoute', 'ngResource', 'iquueApp.iquueCtrl', 'iquueApp.iquueFactory'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/partials/property-dashboard.html',
controller: 'iquueCtrl'
}).when('/admin', {
templateUrl: '/partials/admin-dashboard.html',
controller: 'iquueCtrl'
}).when('/admin/property-setup', {
templateUrl: '/partials/admin-prop-setup.html',
controller: 'iquueCtrl'
}).when('/login', {
templateUrl: '/auth/login/login.html',
controller: 'iquueCtrl'
})
.when('/register', {
templateUrl: '/auth/register/register.view.html',
}).otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
})();
factory.js
angular.module('iquueApp.iquueFactory',[])
.factory('iquueFactory', function($http) {
var urlBase = '/api/hubs';
var _iquueService = {};
_iquueService.getHub = function() {
return $http.get(urlBase);
};
_iquueService.saveHub = function(secretKey) {
return $http.post(urlBase, secretKey);
};
_iquueService.updateHub = function(secretKey) {
return $http.put(urlBase, secretKey);
};
_iquueService.deleteHub = function(id) {
return $http.delete(urlBase + '/' + id);
};
return _iquueService;
});
controller.js
/Angular Controllers
angular.module('iquueApp.iquueCtrl',[])
.controller('iquueCtrl', function($rootScope, $scope, iquueFactory) {
$scope.hubs = [];
$scope.isEditable = [];
// get all hubs on Load
iquueFactory.getHub().then(function(data) {
$scope.hubs = data.data;
});
});
Thanks for the comments guys. This error was due to not loading angular-resource.js correctly. I resolved it shortly after posting this question.
what is the exact error? try to post the exact error as seen in the console. This will tell you what module or controller is causing the error..
like this one... here MyApp is where the error is...
Failed to instantiate module MyApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.11/$injector/unpr?p0=e
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:36:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:37:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:301)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:425
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:202)
at Ob (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:435

why angular gives the injector module error?

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);
});

Angular lazy loading controller not found exception

I have tried to lazy load a controller in angularjs app, but got stuck with some problems i.e. view loads after the controller but in console throws exception controller not found.
Here i have attched the sample code.
index.html:
Click here
<div data-ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ocLazyLoad.min.js"></script>
<script src="js/app.js"></script>
<script src="js/cofig.js"></script>
</body>
</html>
app.js:
var testapp = angular.module('test',['ngRoute','oc.lazyLoad']);
config.js:
testapp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazy: ['$ocLazyLoad',function($ocLazyLoad) {
$ocLazyLoad.load([{
name: 'test',
files: ['js/testController.js']
}]);
}]
}
})
}]);
console.log error:-
enter code here`Error: [ng:areq] http://errors.angularjs.org/1.3.7/ng/areq?p0=testController&p1=not%20aNaNunction%2C%20got%20undefined
This issue is because of you are loading the controllers lazily. When you load the controller lazily, this will not be available to the main module. So you have to register those controllers.
By attaching the controller provider and provide to the main module, we can use it later to register controller.
In app config,
SampleApp.registerController = $controllerProvider.register;
SampleApp.$register = $provide;
To register controller:
var SampleApp = angular.module('SampleApp');
SampleApp.$register.factory('landingService', ['$http', '$rootScope', function ($http, $rootScope) {
debugger
return {
GetQuestions: function () {
return $http({
url: ""
});
}
}
}]);
SampleApp.registerController('landingController',
['$scope', '$http', 'landingService', function (scope, http, landingService) {
scope.GetQuestions = function () {
landingService.GetQuestions().success(function (data) {
}).
error(function (data) {
});
}
}]);
The following tutorial will help you to implement the Angular Lazy Loading using RequireJS with OcLazyLoad.
Angular Lazy Load implementation
You should add the lazyLoad service to your config injection:
testapp.config(['$routeProvider', '$ocLazyLoad', function($routeProvider, $ocLazyLoad){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazy: ['$ocLazyLoad',function($ocLazyLoad) {
$ocLazyLoad.load([{
name: 'test',
files: ['js/testController.js']
}]);
.......
[UPDATED]
I guess you defined your test controller in the js file and want to lazy load the controller. But your code is not correct. Try this:
testapp.config(['$routeProvider', '$ocLazyLoad', function($routeProvider, $ocLazyLoad){
$routeProvider.when('/test1',{
templateUrl: 'partials/test.html',
controller: 'testController',
resolve: {
lazyTestCtrl: ['$ocLazyLoad',function($ocLazyLoad) {
return $ocLazyLoad.load('js/testController.js');
}]
}
You can get the doc from official site.

Controller not defined in a Typescript application after upgrading to 1.3

I have the following code in my application:
angular.module('home', [])
.controller('homeHomeController', HomeHomeController)
.controller('homeContentController', HomeContentController);
and
class HomeHomeController {
static $inject = [
'$http',
'examService',
'stateService',
'userService'
];
constructor(
private $http: ng.IHttpService,
private $es: IExamService,
private $ss: IStateService,
private $us: IUserService
) {
var self = this;
}
}
I just upgraded to AngularJS 1.3 and now I am getting this error:
Error: [ng:areq] Argument 'HomeHomeController' is not a function, got undefined
http://errors.angularjs.org/1.3.0/ng/areq?p0=HomeHomeController&p1=not%20aNaNunction%2C%20got%20undefined
at http://127.0.0.1:17315/Scripts/angular.js:80:12
at assertArg (http://127.0.0.1:17315/Scripts/angular.js:1610:11)
at assertArgFn (http://127.0.0.1:17315/Scripts/angular.js:1620:3)
at http://127.0.0.1:17315/Scripts/angular.js:8319:9
at http://127.0.0.1:17315/Scripts/angular.js:7496:34
at forEach (http://127.0.0.1:17315/Scripts/angular.js:343:20)
at nodeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:7483:11)
at compositeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6991:13)
at publicLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6870:30)
at compile (http://127.0.0.1:17315/Scripts/angular-ui-router.js:3335:9)
Here is the way I am doing the router config:
app.config([
'$httpProvider',
'$locationProvider',
'$sceProvider',
'$stateProvider',
appConfig
]);
function appConfig(
$httpProvider,
$locationProvider,
$sceProvider,
$stateProvider: ng.ui.IStateProvider
) {
$locationProvider.html5Mode(true);
..
var home = {
name: 'home',
url: '/Home',
views: {
'root': {
templateUrl: '/Content/app/home/partials/home.html',
},
'content': {
templateUrl: '/Content/app/home/partials/overview.html',
},
}
};
..
$stateProvider
..
.state(home)
;
Here is the order of my script loads:
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-ui-router.js"></script>
...
<script src="/Content/app/home/controllers/HomeController.js"></script>
<script src="/Content/app/home/home.js"></script>
<script src="/Content/app/app.js"></script>
<script src="/Content/app/appConfig.js"></script>
<script src="/Content/app/appRun.js"></script>
Can anyone tell me if there is aproblem with the way that I am defining my controller using Typescript?
Despite of the fact, that you describe that only change is angular JS upgrade, I would like to give you a hint, how this error could be reproduced. I followed your description above and created this broken plunker with this state definition:
var home = {
name: 'home',
url: '/Home',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'HomeHomeController',
},
'content': {
templateUrl: 'tpl.overview.html',
controller: 'homeContentController',
}
}
};
And because the angular's controller definition (following the question) is:
var app = angular.module('home', ['ui.router', 'services'])
.controller('homeHomeController', HomeHomeController)
.controller('homeContentController', HomeContentController);
this gets the error:
Error: [ng:areq] Argument 'HomeHomeController' is not a function, got undefined
http://errors.angularjs.org/1.3.0/ng/areq?p0=HomeHomeController&p1=not%20aNaNunction%2C%20got%20undefined
...
So, what is wrong? controller: 'HomeHomeController',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'HomeHomeController',
If we fix it to controller: 'homeHomeController' (camel case name), everything is working
Here is updated plunker with working version
var home = {
name: 'home',
url: '/Home',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'homeHomeController',
},
'content': {
templateUrl: 'tpl.overview.html',
controller: 'homeContentController',
}
}
};
It isn't possible to tell from your question, but the most likely reason for this error is ordering.
Perhaps when you upgraded the version of Angular, you moved a script tag or the new version of Angular has a subtly different execution time (i.e. it used to wait for onload and now it doesn't).
Make sure your controller is declared before you call angular.module('home', [])....
If the two code blocks you included are in different files, make sure the file containing HomeHomeController is included before the the file that has the call to angular.module('home', [])...

Angular js Provider returns unknownProvider, when it is declared on basic angular example

File inclusion in the index.html is
<script src="js/app.js"></script>
<script src="js/providers/jokeService.js"></script>
<script src="js/controllers/mainController.js"></script>
app.js is the main declaration of the module, and the route declaration with accompanying controller and template:
angular.module('jsekoApp', [ 'ui', 'ngRoute' ])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
})
});
jokeService.js is factory Provider
angular.module('jsekoApp')
.factory('JokeService', function($resource) {
return $resource('data.json');
});
and the mainController.js is a controller, with the jokeService injected into it:
angular.module('jsekoApp')
.controller('MainController', function MainController($scope, JokeService) {
console.log(JokeService);
JokeService.get(function(data){
$scope.jokes = data;
});
$scope.jokeTypeList = function(){...};
});
My understanding is that all 3 (app.js, controller, and factoryProvider) should be declared in the html.
Why am I getting the unknown Provider error:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- JokeService
http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20JokeService
Also, anyway to get the stack to show where the error is coming from? it just shows the errors in the angular.js file, but which 'JokeService' are they referring to? This might have helped me debug this on my own.
AngularJS is complaining about the missing $resource service. You forgot to include the angular-resource.js file, and to make your main module depend on the ngResource module, as explained in the documentation.

Resources