Angular.js angular some thoughs and learnings about module management. some ideas about usefulness of amd and alternatives up to async loading of content and execution Speakers: Johannes Weber David Amend

1. A Story about AngularJS
modularization development
Munich Meetup #4

2. Johannes Weber
me@jowe.cc
@jowe
Developer at
David Amend
David.Amend@it-amend.de
Frontend Architect at

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>

5. What’s about loading more these 5 scripts?
...how could I handle this?

6. You could use AMD!
- scoped thirdparty
- correct order of “mc” + “angular.module”
- framework independant
- async file loading of all dependencies
define([“lodash”, “angular”, “mycomponents”], function(_, angular, mc) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
return angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, function (myService) {
//...
}])
});

7. AMD: what’s that?
“mycomponents” is duplicated! Why?
define([“lodash”, “angular”, “mycomponents”], function(_, angular, mc) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
return angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, function (myService) {
//...
}])
});

8. AMD, cool! But what’s this?
“myservice” is duplicated! Why?
● AMD + Angular Dependency
define([“angular”, “myservice”], function(angular, mc) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
return angular.module('myApp', ['myservice'])
.controller('MyCtrl1', [‘myService’, function (myService) {
//...
}])
});
DRY!

9. angulars DI?
define([“angular”, “mycomponents”], function(angular, mc) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
return angular.module('myApp', ['myservice'])
.controller('MyCtrl1', [‘myService’, function (myService) {
//...
}])
});
AMD
angular
1.
2. 3.

10. angulars DI?
define([“angular”, “mycomponents”], function(angular, mc) {
return angular.module('myApp', ['myservice'])
.controller('MyCtrl1', [‘myService’, function (myService) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
}])
});
AMD
angular
1.
2. 3.

11. $script([
'bower_components/angular/angular.js',
'bower_components/lodash/lodash.js',
'dist/app.js'
'dist/mycomponents.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
global libs for complete app
define([“mycomponents”], function(mc) {
angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, function (myService) {
mc.setModel(friends: [{name : “Peter”, age : 35}]);
//...
}]) });
3.

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

14. define([“mycomponents”], function(mc) {
angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, function (myService) {
var _ = myNamespace.vendorLibs.lodash;
//...
}]) });
How to deal with vendors?
polluting → namespacing

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 ?

17. 1. module registration
2. module getter
angular.module('mycomponents', [])
angular.module('mycomponents')

18. angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
angular.module(myapp).service( … )
→ Does this work ?

19. ...
angular.module('mycomponents', [])
angular.module(myapp).controller(function(dataService){ … )
angular.module('myapp', ['mycomponents'])
angular.module(mycomponent).service(“dataService” )

20. angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
angular.module(myapp).controller( … )
angular.module(mycomponents).service( … )
angular.module(myapp).service( … )
applicationContext.js → module registration
[src/**/*.js, !applicationContext.js] → module getters
...

21. You can use a gulp task for that
gulp.concat([
"applicationContext.js",
"src/**/*.js"
]);

22. …but AMD
- handle correct loading order
- anonymouse function
- additional effort
- async: no support for all frameworks
→ solving dependency management ?
→ solving namespacing ?
→ solving async ?

23. Are you using A of AMD, only for DEV ?
Loading 100 single files in the browser ?

24. Do you distinguish between DEV and PROD?

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

26. vendorLibs.min.js
JS Dependency Levels
Production Production
Splitting your source into junks would be nicer!
app.js
JS Dependency Levels
appTemplates.min.js
myapp.min.js

27. $script([
'vendorLibs.min.js',
'vendorLibs2.min.js',
'myapp.min.js'
'mysubapp.min.js'
'mycommonComponents.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
Actually you want to dev/deliver junks
How to ?

28. angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
$script([
'myapp.min.js',
'mysubapp.min.js',
'mycommonComponents.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
applicationContext inside
angular.module(myapp).controller( … )
Async
Loader

29. angular-loader module
<script type=”text/javascript”>/*angular-module-loader code here*/<script>
$script([
'myapp.min.js',
'mysubapp.min.js',
'mycommonComponents.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
angular.module(myapp).controller( … )

30. How about commonjs and others ?
How about CSS/HTML/Images
(webpack) ?

31. How to lazy load junks of code?
- just less/no SPA ?
$script([
'mysubapp.min.js',
'mycommonComponents.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
$script([
'myapp.min.js',
'mycommonComponents.min.js'
], function() {
angular.bootstrap(document, ['myApp']);
});
app/index.html
app/subapp/index.html
How to handle
dependencies from
app to app ?

32. somehow with ui router … AMD?
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})

33. AngularAMD
https://github.com/marcoslin/angularAMD
app.config(function ($routeProvider) {
$routeProvider.when(
"/home",
angularAMD.route({
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerUrl: 'scripts/controller'
})
);
});
On Demand Loading

34. Angular.overmind
“Easy module isolation and lazy loading for Angular apps”
var overmind = angular.module('overmind');
overmind.apps = {
'/profile': {
ngModule: 'profile',
file: 'apps/profile/profile'
},
// ...

36. Angular.js 2.0

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
???

39. → which is preferred long time strategy ?

40. The end