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)
Related
I'm new to Angularjs. The following is working:
var kk = angular.module('app').factory('VendorService', Service);
The following is not working:
var kk = angular.module('app', ['ngResource']).factory('VendorService', Service);
Can anyone help me? thanks a ton!
Injecting external dependencies is required on main Angular module declaration.
angular.module('yourApp', ['ngRoute']);
When declaring a new controler/resource/factory or other, you don't have to inject external dependencies.
angular.module('yourApp').factory('Service', Service);
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']);
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 want to use a provider to set some configuration settings at starting up my AngularJs app, but I would like to have the app and the provider in 2 seperate files.
This is how I have it now:
var myApp = angular.module('myApp', []);
myApp.config(function(myServiceProvider) {
....etc.
The provider is defined like this:
angular.module('myApp').provider('myService', function () {
...etc.
If I load the app first the provider is not there yet, and if I load the provider first the app is not there yet.
What would be the best way to solve this?
Your module definition includes module dependencies - not services or providers.
It should be:
var myApp = angular.module('myApp', []);
The config block is always executed after your providers are initialized. There is no circular dependency issue.
File 1: Define module
angular.module('myApp', []);
File 2: Define providers
angular.module('myApp').provider('myService',function() {...});
File 3: Define config block
angular.module('myApp').config(function(myServiceProvider) { ... });
HTML:
<script src="/angular.js"></script>
<script src="/file1.js"></script>
<script src="/file2.js"></script>
<script src="/file3.js"></script>
Order of the files is important.
in your first file:
var myApp = angular.module('myApp', []);
myApp.config(function(myServiceProvider) {
....etc.
and in your second file:
myApp.provider('myService', function () {
...etc.
The variable myApp is a global variable and you can access to this everywhere in your website.
You can take a look at the Yeoman project, it's a generator which create your angularjs app structure and add lot of cool features.
I'm learning AngularJS following an organization inspired by ng-boilerplate. I create different Angular modules for the different parts of my site.
However, I want to create all common elements (services and directives) under the main module, while having them all be in separate source files.
This code works, but is the module in sessionService.js referencing the same module than app.js, or is it creating a new one with the same name?
app.js
var app = angular.module('myApp', [...])
.config(...)
.controller(...);
sessionService.js
angular.module('myApp', [])
.service('SessionService', function() { ... });
If you call angular.module('myApp', []) multiple times on the same page, you will likely run into errors or conflicts. I never tried that.
However, if you already run angular.module('myApp', []) once. Then you can run angular.module('myApp') (note: without []) to retrieve (refer to) the myApp module you defined earlier.
in controller.js file :
var app = angular.module('myApp',['newService']);
in service.js :
angular.module('newService',[])
.service('someService',function(){
return {
// return something
return null
}
}
});
Do not forget to include both the js files in your HTML:
<script src="controllers/controller.js" type="text/javascript"></script>
<script src="services/service.js" type="text/javascript"></script>
Naming & namespacing is important in any project. Try:
app.js:
var app = angular.module('myApp', ['sessionService', ...])...;
sessionService.js:
angular.module('sessionService', [])
.service('SessionService', ...);
Notice that the module name is in lower camel case while the service object itself is upper camel case. This will help you avoid namespace clashing. Hope that helps.