Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
A Story about AngularJS
modularization development
Munich Meetup #4
Johannes Weber
me@jowe.cc
@jowe
Developer at
David Amend
David.Amend@it-amend.de
Frontend Architect at
How to handle cross file
dependency management in my angular app ?
You could use Script Tags!
- You care manually about the ordering
- No magic - you add each file dependency by your own
- ...
What’s about loading more these 5 scripts?
...how could I handle this?
You could use AMD!
- scoped thirdparty
- correct order of “mc” + “angular.module”
- framework independant
- async file loa...
AMD: what’s that?
“mycomponents” is duplicated! Why?
define([“lodash”, “angular”, “mycomponents”], function(_, angular, mc...
AMD, cool! But what’s this?
“myservice” is duplicated! Why?
● AMD + Angular Dependency
define([“angular”, “myservice”], fu...
angulars DI?
define([“angular”, “mycomponents”], function(angular, mc) {
mc.setModel(friends: [{name : “Peter”, age : 35}]...
angulars DI?
define([“angular”, “mycomponents”], function(angular, mc) {
return angular.module('myApp', ['myservice'])
.co...
$script([
'bower_components/angular/angular.js',
'bower_components/lodash/lodash.js',
'dist/app.js'
'dist/mycomponents.js'...
angular
→ used in any file !
load order must be handled?
→ anything loaded before angular.bootstrap
→ no code outside of a...
How to deal with vendors?
angular + lodash
- polluting global namespace?
lodash → not used anywhere
define([“mycomponents”], function(mc) {
angular.module('myApp', ['mycomponents'])
.controller('MyCtrl1', [‘myService’, fun...
How to deal with vendors?
Use existing modules: angular-lodash
https://github.com/rockabox/ng-lodash
var app = angular.mod...
revise angular.module order issue
angular.module('mycomponents',[])
angular.module(myapp, ['mycomponents']).service( … )
→...
1. module registration
2. module getter
angular.module('mycomponents', [])
angular.module('mycomponents')
angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
angular.module(myapp).service( … )
→ Does thi...
...
angular.module('mycomponents', [])
angular.module(myapp).controller(function(dataService){ … )
angular.module('myapp',...
angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
angular.module(myapp).controller( … )
angular...
You can use a gulp task for that
gulp.concat([
"applicationContext.js",
"src/**/*.js"
]);
…but AMD
- handle correct loading order
- anonymouse function
- additional effort
- async: no support for all frameworks
→...
Are you using A of AMD, only for DEV ?
Loading 100 single files in the browser ?
Do you distinguish between DEV and PROD?
Do you distinguish between
dev and prod with AMD ?
app.js
JS Dependency Levels
app.js
JS Dependency Levels
Development Pro...
vendorLibs.min.js
JS Dependency Levels
Production Production
Splitting your source into junks would be nicer!
app.js
JS De...
$script([
'vendorLibs.min.js',
'vendorLibs2.min.js',
'myapp.min.js'
'mysubapp.min.js'
'mycommonComponents.min.js'
], funct...
angular.module('mycomponents', [])
angular.module('myapp', ['mycomponents'])
$script([
'myapp.min.js',
'mysubapp.min.js',
...
angular-loader module
<script type=”text/javascript”>/*angular-module-loader code here*/<script>
$script([
'myapp.min.js',...
How about commonjs and others ?
How about CSS/HTML/Images
(webpack) ?
How to lazy load junks of code?
- just less/no SPA ?
$script([
'mysubapp.min.js',
'mycommonComponents.min.js'
], function(...
somehow with ui router … AMD?
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/s...
AngularAMD
https://github.com/marcoslin/angularAMD
app.config(function ($routeProvider) {
$routeProvider.when(
"/home",
an...
Angular.overmind
“Easy module isolation and lazy loading for Angular apps”
var overmind = angular.module('overmind');
over...
Angular.js 2.0
What are Modules in AngularJS 2.0
import {Inject} from 'di/annotations';
import {Grinder} from './grinder';
import {Pump} ...
Angular 2.0
→ combining angulars DI with ES6 loaders
→ combining ES6 loader with angular
???
→ which is preferred long time strategy ?
The end
Story about module management with angular.js
Próxima SlideShare
Cargando en…5
×

Story about module management with angular.js

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

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Story about module management with angular.js

  1. 1. A Story about AngularJS modularization development Munich Meetup #4
  2. 2. Johannes Weber me@jowe.cc @jowe Developer at David Amend David.Amend@it-amend.de Frontend Architect at
  3. 3. How to handle cross file dependency management in my angular app ?
  4. 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. 5. What’s about loading more these 5 scripts? ...how could I handle this?
  6. 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. 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. 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. 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. 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. 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. 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. 13. How to deal with vendors? angular + lodash - polluting global namespace? lodash → not used anywhere
  14. 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. 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. 16. revise angular.module order issue angular.module('mycomponents',[]) angular.module(myapp, ['mycomponents']).service( … ) → How to guarantee order ?
  17. 17. 1. module registration 2. module getter angular.module('mycomponents', []) angular.module('mycomponents')
  18. 18. angular.module('mycomponents', []) angular.module('myapp', ['mycomponents']) angular.module(myapp).service( … ) → Does this work ?
  19. 19. ... angular.module('mycomponents', []) angular.module(myapp).controller(function(dataService){ … ) angular.module('myapp', ['mycomponents']) angular.module(mycomponent).service(“dataService” )
  20. 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. 21. You can use a gulp task for that gulp.concat([ "applicationContext.js", "src/**/*.js" ]);
  22. 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. 23. Are you using A of AMD, only for DEV ? Loading 100 single files in the browser ?
  24. 24. Do you distinguish between DEV and PROD?
  25. 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. 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. 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. 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. 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. 30. How about commonjs and others ? How about CSS/HTML/Images (webpack) ?
  31. 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. 32. somehow with ui router … AMD? myApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/state1"); $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" })
  33. 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. 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' }, // ...
  35. 35. Angular.js 2.0
  36. 36. 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...'); }}
  37. 37. Angular 2.0 → combining angulars DI with ES6 loaders → combining ES6 loader with angular ???
  38. 38. → which is preferred long time strategy ?
  39. 39. The end

×