Definition:
Module: app, app.core (common services), app.widgets(common directives)
Components: Actual Controllers, Services, Directives definition
I have been working with separation of concerns and modularization of code with AngularJS and I came accross a weird thing which I am not sure why it was present.
I have defined all the cross cutting components of AngularJS App which can be reused by any modules under app.core
I have added other feature wise modules like app.dashboard and app.admin and both of these modules correspond to Dashboard View and Admin View.
All these modules fall under app module
app
-app.core
-app.widgets
-app.dashboard
-app.admin
Dashboard and Admin view use the services and directives defined in app.core and app.widgets module.
Hence I go ahead and pour those modules in when I define my app.dashboard and app.admin as shown below
(function () {
'use strict';
angular.module('app.dashboard', [
'app.core',
'app.widgets'
]);
})();
The thing is code works properly when I write it like above or even if I DO NOT ADD core and widgets
(function () {
'use strict';
angular.module('app.admin', []);
})();
Above code also works fine
What is the main difference between these 2?
Related
I am building an angular app with multiple modules. Each module is a view component (rather than having one giant module with all the view components) as recommended by John Papa's Angular style guide. However, whereas previously I could just do...
angular.module('app').config( <config for all client routes and their controllers> )
I've realized that I can't do this since controllers are on separate modules now. So, I've split off the $routeProvider login into their respective files:
angular.module('app.<modulename>').config( <config for app.modulename routes and its controllers> );
However, when I navigate to any route not defined on my app module, I see an empty page, so it seems the $routeProvider for other modules doesn't seem to be working. How do I make multiple modules share the ng-view?
In order for your modules to be configured, you need to include them in the main application module via the dependency array. For example, say you have the following modules...
angular.module('app.module1', ['ngRoute'])
.config(function($routeProvider) { ... })
angular.module('app.module2', ['ngRoute'])
.config(function($routeProvider) { ... })
You configure and include them via
angular.module('app', ['app.module1', 'app.module2'])
I read this article about best practices for AngularJS project structure:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Under the title "App Folder" he explains shortly the difference between the files app.module.js and app.route.js but I didn't understand.
Can anyone give me an example with a short pseudo code for both of the files?
Any help will be profoundly appreciated!
Under this structure, app.module.js would be used to create the main module for your application (eg. App), configure services that you are using throughout your application, or for running arbitrary code once the module has loaded all of its dependencies and configured any services it may wish to configure.
app.route.js would be for specifically configuring one service: the router that you are using to handle state in your application. It could create its own module or re-use the one from app.module.js, but if it were to use a custom module, it would have to depend on your choice of router directly. In addition, you would have to add it as a dependency for the main app.module.js eg.
angular.module('App', ['App.Routes']);
angular.module('App.Routes', ['RouterModule']);
Example using just one module named App, which also depends on some other arbitrary module SomeModule and the routing module RouterModule:
app.module.js
angular.module('App', ['SomeModule', 'RouterModule'])
.config(function (SomeServiceProvider, SomeOtherServiceProvider) {
// Configure SomeServiceProvider/SomeOtherServiceProvider.
})
.run(function () {
console.log('Done loading dependencies and configuring module!');
});
app.route.js
angular.module('App')
.config(function (YourRouterProvider) {
// Configure YourRouterProvider to define the states for the application.
});
Angular Modules:
https://docs.angularjs.org/api/ng/function/angular.module
Routing in Angular using ngRouter:
https://docs.angularjs.org/api/ngRoute
I have defined my angular modules as below:
var myApp = angular.module('myApp', [
'ngRoute',
'facebook',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]);
angular.module('myApp.services', []);
angular.module('myApp.directives', []);
angular.module('myApp.controllers', []);
Now, the config for my main app module i.e. "myApp" is as below:
myApp.config([
'$routeProvider',
'FacebookProvider',
function ($routeProvider, FacebookProvider) {
FacebookProvider.init('***********');
}]);
This moudle i.e. "myApp" will be able to use "FacebookProvider", because it is defined as dependency above for "myApp" moudle, which is perfectly fine.
Now lets move to Controller which is wrapped under module "myApp.controllers":
/* Controllers */
angular.module('myApp.controllers').controller('loginCtrl', [
'$scope',
'$timeout',
'Facebook',
function ($scope, $timeout, Facebook) {
.......
.......
}]);
Primary Question: How i am bale to use "Facebook" when i haven't defined this as dependency for my "myApp.controllers" module?
Secondary Question: Which is the best approach for writing controllers, services, directives etc. I mean to say to wrap them in different modules or to wrap them in main primary single app module. If we are creating different modules for each feature of our application, then how the dependency system work for our feature modules as we define dependency only in our main module like "myApp"?
Thanks in advance for the replies!!!
Thanks,
Manish Kumar
[Learning Angular]
Ad 1st question: You defined both 'myApp.controllers' and 'facebook' as dependencies in your 'myApp' module. You can use any module of that list in any other of your modules. You could even have a 'myApp.core' module, which would then define the core dependencies of your application and you could still use all of them in every other module listed in the main app's list of modules.
Ad 2nd question: For a small app, you dont need to use many modules. Just modularize reusable stuff maybe. For larger apps it is a good idea to separate parts of app by functionality to modules. Dont separate by type like myApp.controllers etc. For example, you can have a reusable module for authentication, that you then put in all your future apps. Or for logging, etc. Or for your admin area.
A good reference point for best practices is John Pappa's style guide.
https://github.com/johnpapa/angularjs-styleguide#application-structure
I have a angular application and a few modules. The modules are organized as follows:
I have two modules: helpers and maps. In the helpers module I've defined an angular filter helpers.filter(...)
The helpers module is defined as follows: var helpers = new angular.module('helpers', ['ngResource', 'ui.router']);
The other module, maps is defined as follows: var maps = new angular.module('maps', ['ngResource', 'ngSanitze']
And then there is the app module, defined like: var app = new angular.module('app', ['helpers','maps'])
How come that the filter I defined on the helpers module is available in the maps?
I assume it is because app is like a parent and the children inherit everything that is available on the parent.
Take a look at this answer.
It's not just filters, but services, controllers, directives etc.
This is because there is (normally) one $injector per app, so all modules and submodules in the app have access to the same "injectables".
I am new to AngularJS (reading docs for a week or so) so bear with me :) I am trying to expose some 3rd party library (JayData) functionality to AngularJS controllers via the DI/service infrastructure.
Creating a service is a straightforward thing, as long as you can manage to create your own module for this, and set ng-app to that module.
var mod = angular.module('myModule', [], function ($provide) {
$provide.factory('$data', ['$scope', function (sc) {
return $data;
}]);
});
<html ng-app='myModule'></html>
In my case developers will create their own app/startup module, or will use the "default ng app" without specifying an kind of module names like <html ng-app="".
How can I register a service that is globally accessible like the built-in services like $scope or $http?
You can add components to the ng module, which is the default module, with angular.module("ng").service(...). As mentioned in the comments, this is a bad idea for several reasons, most prominently that the Angular team might provide a service with the same name later.
For reference, the preferred way is to define your own module such as myAwesomeDataModule and add it as a dependency in other modules: angular.module("myModule", ["myAwesomeDataModule"]).