The more your AngularJS App is growing the more important is modularization. It starts with the naming convention, file structure, AMD, goes through the build process, loading and packaging strategies and ends in the browser.
We are going to give proposed solutions in practice as a ground for discussion.
Further, you are welcome to present your ideas in slides or code, which demonstrate how to manage modularization in Angular.js projects.
Speaker Bio:
Johannes Weber has spent more than 10 years in front- and backend development. He works for Mayflower GmbH where he focuses on the migration of SPA and MPA.
David Amend ist seit Jahren im Banken-Umfeld mit Schwerpunkt auf der Frontend-Entwicklung mithilfe von Java und JavaScript in Projekten tätig.
3. How to handle cross file
dependency management in my angular app ?
4. You could use Script Tags!
- You care manually about the ordering
- No magic - you add each file dependency by your own
- download happens synchronous
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/AppConfig.js"></script>
<script type="text/javascript" src="/js/auth/AuthService.js"></script>
<script type="text/javascript" src="/js/auth/RegisterResource.js"></script>
<script type="text/javascript" src="/js/auth/RegisterService.js"></script>
12. angular
→ used in any file !
load order must be handled?
→ anything loaded before angular.bootstrap
→ no code outside of angular.module
$script([
'vendorLibs.min.js',
'myapp.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
13. How to deal with vendors?
angular + lodash
- polluting global namespace?
lodash → not used anywhere
15. How to deal with vendors?
Use existing modules: angular-lodash
https://github.com/rockabox/ng-lodash
var app = angular.module('yourAwesomeApp', ['ngLodash']);
define([“mycomponents”], function(mc) {
angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, ‘lodash’, function (myService, _) {
_.random(10);
//...
}]) });
16. revise angular.module order issue
angular.module('mycomponents',[])
angular.module(myapp, ['mycomponents']).service( … )
→ How to guarantee order ?
25. Do you distinguish between
dev and prod with AMD ?
app.js
JS Dependency Levels
app.js
JS Dependency Levels
Development Production
build, minified, concatinated
37. What are Modules in AngularJS 2.0
import {Inject} from 'di/annotations';
import {Grinder} from './grinder';
import {Pump} from './pump';
import {Heater} from './heater';
@Inject(Grinder, Pump, Heater)
export class CoffeeMaker {
constructor(grinder, pump, heater) {
}
brew() {
console.log('Brewing a coffee...');
}}
38. Angular 2.0
→ combining angulars DI with ES6 loaders
→ combining ES6 loader with angular
???
42. Outlook: AngularJS 2.0
- removal of angular.module
- Loading through ES6 modules
- Dependency Injection, Inversion of Control,
annotations
43. What are Modules in AngularJS 2.0
More Info in @vojtajina annotated Slides
https://dl.dropboxusercontent.com/u/36607830/talks/ng-conf-di-v2-annotated.pdf