In an attempt to initialize my application, I'm trying to init the module the run() method as follow, but it does not compile.
the error is:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.3.5/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route
Error: error:unpr
Unknown Provider
Unknown provider: $routeProvider <- $route
and here's the code in app.js :
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]).run(['$route', '$rootScope', init]);
function init($route, $rootScope){
var i = 1;
}
})();
However with no dependencies, it runs through fine:
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets' // Kendo UI and jQWidgets libs (loaded in index.html)
]).run(init);
function init(){
var i = 1;
}
})();
$routeProvider is not part of ui.router module. and ui.router does not use ngRoute as well so you cannot access $route service inside the run block because it does not exist. Try including ngRoute if you need to use it (But you already have a ui.router so i am not sure).
angular.module('rage', [
'ngRoute' //<-- Here
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]
Or just remove $route from the dependency list.
Related
I tried two of the solutions here to no avail.
This is my Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module flavorApplication due to:
Error: [$injector:unpr] Unknown provider: underscore
Here is my code for the module:
var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function() {
return $window._;
}]);
Here is my App Config:
(function(){
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
]);
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
'underscore', function ($stateProvider, $urlRouterProvider, $locationProvider, underscore){
Here I'm trying to inject it into a Controller (probably where I'm going wrong)
(function () {
'use strict';
angular
.module('flavorApplication')
.controller('UsedSearchesController', UsedSearchesController);
UsedSearchesController.$inject = ['$stateParams', '$state', 'DataService', '_'];
function UsedSearchesController($stateParams, $state, DataService, _) {
var vm = this;
vm.currentSearches = $stateParams.search.split("|")
activate(vm);
////////////////
function activate(vm, _) {
vm.removeSearch = function (searchTerm) {
$stateParams.search = _.filter(vm.currentSearches,
function(search){return search !== searchterm}).join("|")
$state.go('home');
}
}
}
})();
You missed $window dependency to inject in your factory
underscore.factory('_', ['$window', function($window) {
Other thing you can't get factory/service singleton object to be avail at config phase of angular, you can't get that object there.
//remove 'underscore' dependency from config phase like below.
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider){
Additionally, you don't need to add _ as a parameter in activate function,
function activate(vm) { //<-- remove _ from here
Don't forget to inject underscore module to flavorApplication
module so that would make available _ object throughout application
modules & components.
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
'underscore' //<-- added underscore module here
]);
I have a problem with upload module in Angular. I install module from https://github.com/nervgh/angular-file-upload
I use Angular 1.5.0
In index.html i have:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="scripts/app.js"></script>
My app.js
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'datatables',
'ngResource',
'ngRoute',
'angularFileUpload',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider...
This is my main.js
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','$upload','$location', 'myService', function ($rootScope, $scope,$upload,$location, myService) {
}]);
In console : Error: [$injector:unpr] Unknown provider: $uploadProvider <- $upload <- MainCtrl
$upload variable is undefined
Please help me.
Just replace $uploader to FileUploader. there is some problem with fileuploader module, and updated FileUploader module using FileUploader service.
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','FileUploader','$location', 'myService', function ($rootScope, $scope,FileUploader,$location, myService) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
//Any other code or processing
}]);
Wrong injector used please check above
I created this controller
app.controller('headerCtrl', [
'$scope', '$log', '$uibModal', function($scope, $log, $uibModal){...}])
which gives the following error anytime i run it
Unknown provider: $uibModalProvider <- $uibModal <- headerCtrl
According to angular, this may be due to a typo with the dependency name or an undefined dependency which is not the case here since ui.bootstrap is defined and spelled correctly
Here is my module
var app = angular.module('app', [
'ngMap',
'ui.router',
'ui.bootstrap',
'ngSanitize',
'ngAnimate'
]);
However, when i remove '$uibModal' before the function like this
app.controller('headerCtrl', [
'$scope', '$log', function($scope, $log, $uibModal){...}])
and run
console.log($uibModal)
console returns undefined. I updated ui-bootstrap with bower but that didn't work. I haven't been able to create a modal because of this. How do I get $uibModal to be injected successfully by angular
The app contains very little at the moment, so this is a basic error. I'm using ui-router. This is what I've got in the various files:
app.module.js:
'use strict';
angular
.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
function app(){}
app.routes.js:
'use strict';
angular
.module('app')
.config(routes);
routes.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
function routes($stateProvider, $urlRouterProvider, $locationProvider) {
// Remove # from url
$locationProvider.html5Mode(true);
// Set 404
$urlRouterProvider.otherwise('/404');
// Configure app states
$stateProvider
.state('app', {
abstract: true,
url: '',
templateUrl: 'modules/app/app.html',
controller: 'AppController'
})
}
app.controller.js:
'use strict';
angular
.module('app')
.controller('AppController', AppController);
AppController.$inject = ['$rootScope', '$scope'];
function AppController($rootScope, $scope) {
}
I'm getting the above error in the console on page load - what am I missing?
You are calling $inject on a variable called app, which does not exist in global scope:
angular.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
Now if you would assign your module definition to a variable called app it works:
var app = angular.module('app', app);
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
Next the signature for module definition:
angular.module(name, [requires], [configFn]);
Your again using a variable called app (which doesn't exist) where your requires/injectables array should be. So you could do this:
var injections = [
'ui.router',
'ngCookies',
'ngSanitize',
];
var app = angular.module('app', injections);
Or even better: (keeps the global scope clear)
var app = angular.module('app', [
'ui.router',
'ngCookies',
'ngSanitize',
]);
Now you can strip out:
app.$inject = [
'ui.router',
'ngCookies',
'ngSanitize',
];
But it's best practice to keep your entire global scope as clean as possible. So you don't assign your module to variable:
angular.module('app', []);
And when you need it for configuration or attaching controllers or directives, etc, you call:
angular.module('app').config();
angular.module('app').controller();
angular.module('app').directive();
Or you can chain them together:
angular.module('app')
.config()
.controller()
.directive();
Another tip, when doing your configuration or creating a controller, you don't have to do seperate injection, you can simply do:
angular.module('app').config([
'$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
.....
}
]);
The bracket notation is needed so when you minify your scripts, it will not screw up your injections, if you don't minify you can do without:
angular.module('app').config(
function ($stateProvider, $urlRouterProvider, $locationProvider) {
.....
}
);
I know your problem is solved already, just thought i should clear things up a little. Good luck!
first remove the comma after 'ngSanitize' in app.module.js:
angular
.module('app', [
'ui.router',
'ngCookies',
'ngSanitize'
];
The module didn't like being instantiated like that, so I changed it to this and it works fine:
'use strict';
angular
.module('app', [
'ui.router',
'ngCookies',
'ngSanitize'
];
I can't figure out what I'm doing wrong here.
//app.js
'use strict';
var app = angular.module('maq', [
'ui.router',
'maq.home.controller'
]).run([
'$rootScope',
'$state',
'$stateParams', function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
.config([
'$stateProvider',
'$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'maq.home.controller'
})
}]);
//controller
'use strict';
app
.controller('maq.home.controller', [function(){
}]);
//error
Uncaught Error: [$injector:modulerr] Failed to instantiate module maq due to:
Error: [$injector:modulerr] Failed to instantiate module maq.home.controller due to:
Error: [$injector:nomod] Module 'maq.home.controller' 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.
You actually do not have a module called maq.home.controller Instead your registration is in such a way that it is the controller name.
If you want to separate your controller to another module (as what you are trying to do)
try:-
angular.module('maq.controller', []); //<-- Module creation
//...
angular.module('maq.controller')
.controller('HomeController', [function() { //<-- Controller registration
}]);
and in your app:-
var app = angular.module('maq', [
'ui.router',
'maq.controller' //<-- Controller mmodule
]);
Or just remove the dependency on the module that does not exist:-
angular.module('maq', [
'ui.router',
//'maq.home.controller' <-- Remove this
])
You are trying to depend on another module named maq.home.controller when it is not a module, it is a controller. You do not need to list controllers as dependencies in your module declaration. So just take that dependency out like so:
var app = angular.module('maq', [
'ui.router'
])