How can i inject 'ngSanitize' and 'ngRoute' both to module?
Now it looks like:
var app = angular.module('board', ['ngSanitize']);
the second argument of the module function is an array of dependencies, so you can do it like:
var app = angular.module('board', ['ngSanitize', 'ngRoute']);
Related
I used angular-translate and angular-local-storage with MEANjs, all is add to module dependencies,
in app config.js:
var service = {
applicationEnvironment: window.env,
applicationModuleName: applicationModuleName,
applicationModuleVendorDependencies: ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ngFileUpload', 'ui-notification',
'LocalStorageModule', 'pascalprecht.translate', 'angularMoment', 'ngFileSaver', 'ngSanitize', 'uiCropper', 'hc.marked'],
registerModule: registerModule
};
and in init.js:
angular
.module(app.applicationModuleName)
.config(localStorageModuleConfig)
.config(transConfig);
localStorageModuleConfig.$inject = ['localStorageServiceProvider'];
function localStorageModuleConfig(localStorageServiceProvider) {
console.log('localStorageModuleConfig');
localStorageServiceProvider
.setPrefix('meanTorrent')
.setStorageType('localStorage')
.setDefaultToCookie(true)
.setNotify(true, true);
}
transConfig.$inject = ['$translateProvider', 'localStorageService'];
function transConfig($translateProvider, localStorageService) {
$translateProvider.useSanitizeValueStrategy(null);
var user_lang = navigator.language || navigator.userLanguage;
user_lang = user_lang.substr(0, 2) || 'en';
var storage_lang = localStorageService.get('storage_user_lang');
user_lang = storage_lang || user_lang;
$translateProvider.preferredLanguage(user_lang);
}
I already include all .js files in html, when runing, I got error Unknown provider: localStorageService，I know in config part, must used provider, but if i used localStorageServiceProvider in transConfig, it can not to .get('storage_user_lang')
any way to used service in config? or how to use provider to call self service`s method?
You can't inject service to configuration block (only providers and constants),
I used window.localStorage to solve this issue localStorage.
In my app, instead of keeping separate modules, I am using a generic module name as myApp.controllers in this module i am injecting to application. later I am adding a new controller to the existing myApp.controllers but it's not working.
what is wrong here?
here is my code :
angular.module('myApp.controllers', []);
var appModules = ['myApp.controllers']
var app = angular.module('myApp', [appModules]);
angular.module('myApp.controllers').controller('mainController', ['$scope', function($scope){
$scope.name = "World";
}])
Live Demo
You should either have:
var app = angular.module('myApp', appModules);
or
var app = angular.module('myApp', ['myApp.controllers']);
The second parameter is supposed to be an array of strings (or array of variables containing strings), you are passing it a double array when you do [appModules] as appModules is an array in itself.
EDIT: updated plunkr: http://plnkr.co/edit/hQOzV9oPCsEwqU2dUW4c?p=preview
UPDATE:
for the second issue:
you are defining the module twice.
angular.module('myApp.controllers', [])
.controller('subController', ['$scope', function($scope){
$scope.son = "Adil";
}]);
should be
angular.module('myApp.controllers')
.controller('subController', ['$scope', function($scope){
$scope.son = "Adil";
}]);
see updated plunkr http://plnkr.co/edit/xcWdAJuoN3zYKm29nIgY?p=preview
This would work. You will need to inject module name in myapp instead of var appModules.
var appModules = angular.module('myApp.controllers', []);
var app = angular.module('myApp', [ 'myApp.controllers' ]);
angular.module('myApp.controllers').controller('mainController', ['$scope', function($scope){
$scope.name = "World";
}])
Your fixed Plunker
First mistake (then you changed the Plunker):
Changed
var app = angular.module('myApp', [appModules]);
to
var app = angular.module('myApp', appModules);
Second mistake:
This is an setter: angular.module('myApp.controllers', [])
This is an getter: angular.module('myApp.controllers')
You used the setter twice.
One small comment not regarding the issue. Either I don't get what you mean with 'myApp.controllers' or you didn't get the concept of angular right.
What you are holding in your modules variable are in fact modules, not controllers.
So if you like to hold your controllers in an array (for whatever reason - I wouldn't recommend this) you can do this like that:
Plunker
i have recently started a project and using webpack as build tool.
angular.module('app')
.controller('appController', require('./src/appController'));
and my appcontroller.js looks like
'use strict';
var appController = function($scope){
$scope.name = 'hello';
};
appController.$inject(['$scope']);
module.exports = appController;
bundel is being formed at desired location, problem is when i use the function.$inject for dependency injection, as i want my code to get uglify, i gets browser error when i runs my app
appController.$inject is not a function
This is first time i'm experiencing the error as i'm using webpack?
$inject is not a function, it's property. It should be:
appController.$inject = ['$scope'];
I'm pretty new to Angular, could some one please help me in resolving my basic query?
I have the below code:
var a = angular.module('myApp', [
'ui.router',
'moduleName1',
'moduleName2'
]).config(...........)
Is it possible to separate the dependency array into an isolated file and refer it like below:
angular.module('myApp', [
../fileName.js
])
You can do this way:
include your js file before angular module declared
<script src="myFile.js"></script>
Your myFile.js content is
var myArray = ['ui.router', 'moduleName1', 'moduleName2'];
and you angular app declaration is:
angular.module('myApp',
myArray)
I have a an angular app and in it I can see this coffee in the app.coffee file....
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
angular.module('app.services', ['ngResource'])
angular.module('app.controllers',[])
angular.module('app.directives', [])
angular.module('app.filters', [])
angular.module('app.templates', [])
angular.module('app.models', [])
I don't really understand why I have to inject ngResource into the app.services module direct AND into the app module. Surely I can just wire up All dependencies into the app module and then it will allow global access to the rest of the modules?
When you write
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
this means these are the dependencies of your app.
When you write
angular.module('app.services', ['ngResource'])
this means app.services has a dependency ngResource. About your question as to why you need to write it again. It is fairly simple, app.services uses ngResource. If you don't want the whole app to have ngResouce dependency, you can ignore it in the first line, but it has to be there for app.services
You can read more about it here