I'm creating a structure for a hybrid app built with ionic.
We use gulp to concat and minify the files.
So far i append every controller, service and directive to my main module defined in app.js.
Each of these components is defined in its own file which are then concatenated with gulp with app.js first and everything else last.
This is the way ionic does it for their 10k loc IonicModule.
Is there any reason why i should use the angular module system for more than the main apps module (e.g. app.directives, app.controllers etc.) besides the better structure (each component in one file) which i already have with ionics approach?
I could think of two things:
Testability: as far as i know i don't have to declare a module as angular.module , i should be able to mock controller modules (e.g. myApp.controller(x...) as well
Performance: there shouldn't be a performance gain as far as i know, am i wrong about that?
Related
I have this app module
angular
.module('history.components.genericAddress', ['history.filters']);
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController)
and another one
angular
.module('APP')
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController);
in two diff files and folders, because there are two diff applications.
I have two services that I use in both modules. I want to put in separate file both services and not anymore inside of each module body. Because each module depends on diff app I don't know how what to put in the top of the new file with both services.
One has module('history.components.genericAddress') and another .module('APP').
I ask this question because I want to make a ver 1.5 angular component and to put that component in many apps. Those 2 services are important for the component.
Please someone give me an idea how to do this because I don't know how to make this service file that will work in any app without changing anything.
So my question is only about how module('what to put here') and not how to make the code for services.
Try this.
angular
.module('Service_module')
.service('service1', function(){});
use in any module like.
1. angular
.module('FirstAPP',['Service_module'])
2. angular
.module('SecondAPP',['Service_module'])
I'm trying to clean up my Angular app a little bit and when I came to my app.js.coffee file I ran into some things I have little knowledge of because I copy/pasted it from another source and it seemed to work.
To my knowledge every controller, service, filter etc. needs a ,
angular.module('nameOfModule')
But 2 (or more) controllers can't have the same module name because then Angular outputs an error,
Error: [ng:areq] Argument 'nameOfModule' is not a function, got undefined
But it seems the module name that you give a controller such as nameOfModule can be used on multiple services,
addMovieService.js
angular.module('addMovieseat')
.factory('movieAdd',
movieSearchService.js
angular.module('addMovieseat')
.factory('MovieSearch',
So I'm starting to wonder what the module names are for.
Add dependency for your angular module and if not then put it blank like this
angular.module('nameOfModule',[])
Error is occured because you don't add dependency for your module.
But 2 (or more) controllers can't have the same module name
This assumption is incorrect! Modules almost always have more than one controllers. In fact it is the highest level in an angular app and the module, along with all other entities (controllers, services, factories) comprise of a self sustaining AngularJS app.
For using another app inside another app, you just include the module as a dependancy like this:
angular.module('secondApp', ['firstApp'])
I would like to have more theoretical understanding how angular modules work.
When I would create one module 'clientApp' and I 'register' controller, services, factories, scope etc..., inject other services, factories, scope into the controllers. What objects are known to the 'clientApp' module?
Angular Modules
An efficient, production-ready controllers by encapsulating our functionality in a single core unit called a module.
In Angular, a module is the main way to define an AngularJS app. The module of an app is where
we’ll contain all of our application code. An app can contain several modules, each one containing
code that pertains to specific functionality.
Using modules gives us a lot of advantages, such as:
• Keeping our global namespace clean
• Making tests easier to write and keeping them clean so as to more easily target isolated
functionality
• Making it easy to share code between applications
• Allowing our app to load different parts of the code in any order
The Angular module API allows us to declare a module using the angular.module() API method.
When declaring a module, we need to pass two parameters to the method. The first is the name of
the module we are creating. The second is the list of dependencies, otherwise known as injectables.
angular.module('myApp', []);
When writing large applications, we’ll create several different modules to contain our logic. Creating a module for each piece of functionality gives us the advantage of isolation in which to write and test large features.
Properties
Angular modules have properties that we can use to inspect the module.
name (string)
The name property on the modules gives us the name of the module as a string.
requires (array of strings)
The requires property contains a list of modules (as strings) that the injector loads before the
module itself is loaded.
Better Read
ng-book -
The Complete Book on AngularJS
Ari Lerner
Download ng-book
Thanks to the great article from Dan Wahlin, I managed to implement lazy loading of Angular's controllers and services. However, there does not seem to be a clean way to lazy load independent modules.
To better explain my question, assume that I have an app would be structure as below without RequireJS:
// Create independent module 'dataServices' module with 'Pictures' object
angular.module("dataServices", []).factory("Pictures", function (...) {...});
// Create 'webapp' ng-app, with dependency to 'dataServices', defining controllers
angular.module("webapp", ['dataServices'])
.controller("View1Controller", function (...) {...})
.controller("View2Controller", function (...) {...});
Here is the sample app with RequireJS in Plunker:
http://plnkr.co/aiarzVpMJchYPjFRrkwn
The core of the problem is that Angular does not allow adding dependency to ng-app post instantiation. As result, my solution is to use angular.injector to retrieve the instance of Picture object to be used in my View2Controller. See js/scripts/controllers/ctrl2.js file.
This creates 2 problems for me:
The injected services runs outside of angular and therefore all async call must end with $scope.$apply()
Messy code where some object can be injected using standard angular syntax while others require the explicit use of injector.
Have any of you figured out how to lazy load independent module using RequireJS and somehow hook this module in angular so normal angular dependency injection syntax can be used?
Note:
The question is on lazy loading of independent module. One simple solution to this specific example is to create "Pictures" object using cached $providers during ng-app.config but that is not what I am looking for. I am looking for solution that works with 3rd party module such as angular-resource.
I finalized my own implementation called angularAMD and here is the sample site that uses it:
http://marcoslin.github.io/angularAMD/
It handles config functions and out of order module definitions.
Hopefully this can help other looking for something to help them with RequireJS and AngularJS integration.
Take a look at my project in GitHub: angular-require-lazy
This project is intended to demonstrate an idea and motivate discussions. But is does what you want (check expenses-view.js, it loads ng-grid lazily).
I am very interested in comments, ideas etc.
(EDIT) The ng-grid Angular module is lazy loaded as follows:
expenses-view.js is loaded lazily, when the /expenses route is activated
expenses-view.js specifies ng-grid as a dependency, so RequireJs loads ng-grid first
ng-grid is the one that calls angular.module(...)
In order to accomplish this, I replaced (proxied actually) the real angular.module method with my own, that supports laziness. See bootstrap.js and route-config.js (the functions initLazyModules() and callRunBlocks()).
This implementation has its drawbacks that you should be aware of:
Config functions are not implemented (yet). I do not know if it is possible to lazily provide config-time dependencies.
Order matters in definitions. If service A depends on B but A is defined after B in your module, DI wil fail. This is because the lazyAngular proxy executes definitions immediately, unlike real Angular that makes sure dependencies are resolved before executing the definitions.
It looks like the Node.js module ocLazyLoad defines a way of doing this lazy-loading, though I'm not sure how it fares, performance-wise, compared to the methods in the other answers or hard-coding the dependencies. Any info on this would be appreciated. One interesting thing is that the other answers need RequireJS to operate, while ocLazyLoad doesn't.
It looks like ocLazyLoad defines another provider that injects the dependency after the containing module has already been instantiated. It seems to do this by essentially replicating some low-level Angular behavior, like module loading and providing, hence why it looks so complicated. It looks like it adds just about every core Angular module as a dependency: $compileProvider, $q, $injector, ng, and so many more.
I am using Angular JS. I wish to put unrelated code (ie, which is not a factory, service, controler, etc) in additional, separate modules, in a similar way one would with AMD or CommonJS.
At the time of writing, a search for 'Angular.JS make new module' using Google does not return any documentation on making Angular.JS modules.
I have a found a post on the Angular.JS Google Group that seems to indicate that instead of loading dependencies dynamically like other module systems, in Angular.JS dependencies must be inserted as additional script tags.
Is there any documentation on making Angular modules (which is not limited to controllers, services, or other angular concepts)?
Is the statement about script tags true? Do I need to manually add script tags for every module I may use?
Looking further into the various Angular boilerplate apps, apps manually load every part of their apps via script tags. Unlike other systems, Angular 'modules' don't take care of actually loading dependencies, they just inject them once already loaded.