I am having trouble injecting dependancies inside a closure, which wraps around angular. How do I include dependencies inside angular when it is wrapped inside a closure. Angular is being bootstrapped in index.html.
An example accomplishing this in a plunker would help. Here is my code.
Let me know if there are any ambiguities.
(function(angular){
angular.module('myApp', ['restangular', 'ngCookies', 'ngSanitize', 'ngRoute',
'decipher.tags', 'ui.bootstrap', 'ui.bootstrap.typeahead',
'angularMoment', 'textAngular', 'ui.event', 'ui.mask', 'ui.validate',
'toaster', 'ngImgCrop']).
config(function ($httpProvider, $routeProvider,RestangularProvider,
versionedUrl, decipherTagsOptions, mobileAppUrl,
mobileAppDownloadLink,mobileAllowedViews) })();})(angular);
Pass them the way you are passing angular:
(function(angular, dep1, dep2, dep3){
angular.module('myApp', ['restangular', 'ngCookies', 'ngSanitize', 'ngRoute',
'decipher.tags', 'ui.bootstrap', 'ui.bootstrap.typeahead',
'angularMoment', 'textAngular', 'ui.event', 'ui.mask', 'ui.validate',
'toaster', 'ngImgCrop']).
config(function ($httpProvider, $routeProvider,RestangularProvider,
versionedUrl, decipherTagsOptions, mobileAppUrl,
mobileAppDownloadLink,mobileAllowedViews) })();})(angular, dep1, dep2, dep3);
Related
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
This is my Module:
(function () {
"use strict"
angular.module('App', ['ngWebSocket', 'ngRoute', 'ui.router', 'ui.bootstrap']);
}());
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'
];
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.