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'])
Related
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?
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
With the new angular-route version, you need to require('angular-route') in your dependencies but I can't seem to get this working. In the angular-route npm page, it says to do angular.module('myApp', [require('angular-route')]);
This is my code:
angular.module('app.routes', [require('angular-route')])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html'
});
$locationProvider.html5Mode(true);
});
When I run my server, I get the error: require is not defined.
Can anyone help me here.
You need to use browserify if you want to use require in frontend.
Browserify is a node module that takes your main JavaScript file, read all its required dependencies (and dependencies of dependencies), and spits out a single JavaScript file, ready to be included in your HTML. This file contains JavaScript code that is actually compatible with browsers, in other words, it browserfies your Node modules.
Also you can see the following link how he structure the angular js with browserify
http://omarfouad.com/blog/2015/03/21/advanced-angularjs-structure-with-gulp-node-and-browserify/
Other wise you need to use the following code snippet.
angular.module('app.routes', ['ngRoute']);
You should use the dependency injection as normally:
angular.module('app.routes', ['angular-route']);
Remember that you need to load the angular-route module before you load your app.js.
require is from requirejs
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 m trying to understand the sample AngularJS app shipped with Packpub's book. the app.js file is defined under client/src/app folder and it's module definition looks like
angular.module('app', [
'ngRoute',
'projectsinfo',
'dashboard',
'projects',
'admin',
'services.breadcrumbs',
'services.i18nNotifications',
'services.httpRequestTracker',
'security',
'directives.crud',
'templates.app',
'templates.common']);
My question is how AngularJs will find these modules and uses in app?
All those modules need to be loaded in your browser as well. AngularJS does not provide a module loader such as RequireJS.
You can either add <script> tags in the index file or concatenate all your sources into one big file. Some of the modules can be from AngularJS (such as the ngRoute). These will always be available in Angular, you do not need to load the sources in separately.