By beginnings of 2016 there was very little information about how to work with Angular2 and almost no information about how to scale large applications. There was no example of how to do modules, how to inject dependences inside services, how to use ES5 and so on. In this presentation I explained how it worked and I have also provided an example in ES5 and Typescript how it can be done: - https://github.com/drpicox/angular2-thedoctoris-ts - https://github.com/drpicox/angular2-thedoctoris-es5

1. MODULES IN
ANGULAR2
@DRPICOX

2. MODULE =
MODULES IN NG1
INJECTIONS CONFIG RUN+ +
angular.module(‘…’, […])

3. angular.module(‘booksServices’,[])
.value(‘Book’, Book)
.service(‘booksService’, BookService)
.factory(‘booksDictionary’, booksDictionaryFactory)
.provider(‘booksRemote’, BooksRemoteProvider)
INJECTIONS
booksDictionaryFactory.$inject = [‘Book’];
function booksDictionaryFactory ( Book ) {
…
}
MODULES IN NG1
$injector
{
‘Book’: Book,
}

4. INJECTIONS
angular.module(‘booksServices’,[])
.value(‘Book’, Book)
.service(‘booksService’, BookService)
.factory(‘booksDictionary’, booksDictionaryFactory)
.provider(‘booksRemote’, BooksRemoteProvider)
LibraryService.$inject = [‘booksService’];
function LibraryService ( booksService ) {
…
}
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksService’: new BooksService(),
}

5. INJECTIONS
angular.module(‘booksServices’,[])
.value(‘Book’, Book)
.service(‘booksService’, BookService)
.factory(‘booksDictionary’, booksDictionaryFactory)
.provider(‘booksRemote’, BooksRemoteProvider)
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksService’: new BooksService(),
‘booksDictionary’: booksDictionaryFactory(),
}
BooksService.$inject = [‘booksDictionary’,’booksRemote’];
function BooksService ( booksDictionary , booksRemote ) {
…
}

6. INJECTIONS
angular.module(‘booksServices’,[])
.value(‘Book’, Book)
.service(‘booksService’, BookService)
.factory(‘booksDictionary’, booksDictionaryFactory)
.provider(‘booksRemote’, BooksRemoteProvider)
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksService’: new BooksService(),
‘booksDictionary’: booksDictionaryFactory(),
‘booksRemote’: new BooksRemoteProvider().$get(),
}
BooksService.$inject = [‘booksDictionary’,’booksRemote’];
function BooksService ( booksDictionary , booksRemote ) {
…
}

7. INJECTIONS
angular.module(‘booksServices’,[])
.value(‘Book’, Book)
.service(‘booksService’, BookService)
.factory(‘booksDictionary’, booksDictionaryFactory)
.provider(‘booksRemote’, BooksRemoteProvider)
{
‘Book’: Book,
‘booksService’: new BooksService(),
‘booksDictionary’: booksDictionaryFactory(),
‘booksRemote’: new BooksRemoteProvider().$get(),
}
MODULES IN NG1
$injector
Catalog from injections how to create instances
A dictionary of instances already created to be reused

8. MODULES IN NG1
angular.module(‘booksStoreApp’, [
‘booksServices’, ‘booksComponents’
])

9. angular.module(‘booksServices’,[])
MODULES IN NG1
booksServices
injections
booksS
erv…
angular.module(‘bookStoreApp’, [
‘booksServices’, ‘booksComponents’
]);
booksS
erv…
angular.module(‘booksComponents’,[])
booksComponents
injections
booksC
omp…
booksC
omp…
+
=
angular.module(‘bookStoreApp’,[‘booksServices’,’booksComponents’])
booksServices
injections
booksC
omp…
booksS
erv…
booksComponents
injections
booksS
erv…
booksC
omp…

10. MODULES IN NG1
In Angular1 there is only one injector.
booksServices
injections
booksComponents
injections
$injector

11. MODULES IN NG1
In Angular1 there is only one injector.
That shares instances among all angular application.
(any “artifact” may demand any instance, no limits, aware with name aliasing)
booksServices
injections
booksComponents
injections
$injector
ng
injections
ngSanitize
injections
ngAria
injections
ngAnimate
injections
ngCookies
injections
ngTouch
injections
ngCordova
injections
mgcrea.ngStrap
injections
ui.router
injections
ngFileUpload
injections
{
‘booksService’: new BooksService(),
…
}

12. ¿WHAT
ABOUT
ANGULAR2?
NG2

13. THERE ARE NO MODULES
MODULES IN NG2

14. MODULES IN NG2
THERE ARE NO MODULES
// boot.js
'use strict';
var bootstrap = require('angular2/platform/browser').bootstrap;
var BookStoreComponent = require(‘./bookstore').BookStoreComponent;
var BOOKSTORE_PROVIDERS = require(‘./bookstore').BOOKSTORE_PROVIDERS;
exports = boot;
function boot() {
bootstrap(BookStoreComponent,[BOOKSTORE_PROVIDERS]);
}
What is BOOKSTORE_PROVIDERS?

15. MODULES IN NG2
THERE ARE NO MODULES
// bookstore/index.js
'use strict';
var BOOKS_COMPONENTS_PROVIDERS =
require(‘./books-components’).BOOKS_COMPONENTS_PROVIDERS;
var BOOKS_SERVICES_PROVIDERS =
require(‘./books-services’).BOOKS_SERVICES_PROVIDERS;
exports.BookStoreComponent = require(‘./BookStoreComponent’);
exports.BOOKSTORE_PROVIDERS = [
BOOKS_COMPONENTS_PROVIDERS,
BOOKS_SERVICES_PROVIDERS,
];
BOOKSTORE_PROVIDERS is an array with more providers.
What are BOOKS_SERVICES_PROVIDERS, BOOKS_COMPONENTS_PROVIDERS?

16. MODULES IN NG2
THERE ARE NO MODULES
// bookstore/books-services/index.js
'use strict';
var Book = require(‘./Book’);
var BooksService = require(‘./BooksService’);
var booksDictionaryFactory = require(‘./booksDictionaryFactory’);
var BooksRemoteProvider = require(‘./BooksRemoteProvider’);
// ^^^ extends Provider ???
X

17. MODULES IN NG2
THERE ARE NO MODULES
// bookstore/books-services/index.js
…
exports.Book = Book;
exports.BooksService = BooksService;
var BooksDictionary = {}; // a dummy to have a symbol for injection ???
exports.BooksDictionary = BooksDictionary; // do not export factory
export.BooksRemoteProvider = BooksRemoteProvider;
export.BooksRemote = BooksRemoteProvider.BooksRemote; // ???
…
X

18. MODULES IN NG2
THERE ARE NO MODULES
// bookstore/books-services/index.js
…
var provide = require(‘angular2/core’).provide;
var HTTP_PROVIDERS = require(‘angular2/http').HTTP_PROVIDERS;
exports.BOOKS_SERVICES_PROVIDERS = [
HTTP_PROVIDERS,
provide(Book, {useValue: Book}),
BooksService, // === provide(BooksService, {useClass: BooksService})
provide(BooksDictionary, {useFactory: booksDictionaryFactory}),
BooksRemoteProvider,
];
X

19. MODULES IN NG2
THERE ARE NO MODULES
What I did wrong?
X

20. EASY TO GO RECIPE
MODULES IN NG2

21. EASY TO GO RECIPE
MODULES NG2
• Do not add value classes to PROVIDERS (like Book),
you may use export/import/require
(like components)
• Have only Services (provide(Class, {useClass: ClassName}))
(and use short form)
So… only use PROVIDERS for such things that you need a singleton.
Rule of thumb: do not define providers for classes in which have many “new”
(like Book, or like Components)

22. MODULES IN NG2
EASY TO GO RECIPE
// bookstore/books-services/index.js
'use strict';
var BooksService = require(‘./BooksService’);
var BooksDictionary = require(‘./BooksDictionary’);
var BooksRemote = require(‘./BooksRemote’);
exports.Book = Book;
exports.BooksService = BooksService;
exports.BooksDictionary = BooksDictionary;
exports.BooksRemote = BooksRemote;
var HTTP_PROVIDERS = require(‘angular2/http').HTTP_PROVIDERS;
exports.BOOKS_SERVICES_PROVIDERS = [
HTTP_PROVIDERS,
BooksService, BooksDictionary, BooksRemoteProvider,
];
Much better!

23. MODULES IN NG2
EASY TO GO RECIPE WITH COMPONENTS
// bookstore/books-services/index.js
'use strict';
exports.BookEditorComponent = require(‘./BookEditorComponent’);
exports.BookViewerComponent = require(‘./BookViewerComponent’);
exports.BooksListComponent = require(‘./BooksListComponent’);
// it requires books providers
var BOOKS_SERVICES_PROVIDERS =
require(‘../books-services’).BOOKS_SERVICES_PROVIDERS;
exports.BOOKS_COMPONENTS_PROVIDERS = [
BOOKS_SERVICES_PROVIDERS,
];
Nothing happens if the same “provider” is included twice.

24. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
BOOKS_COMPONENTS_PROVIDERS,
BOOKS_SERVICES_PROVIDERS,
];

25. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
BOOKS_COMPONENTS_PROVIDERS,
BOOKS_SERVICES_PROVIDERS,
];
BOOKS_COMPONENTS_PROVIDERS
===
[
BOOKS_COMPONENTS_PROVIDERS,
];

26. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
[
BOOKS_SERVICES_PROVIDERS
],
BOOKS_SERVICES_PROVIDERS,
];
BOOKS_COMPONENTS_PROVIDERS
===
[
BOOKS_COMPONENTS_PROVIDERS,
];

27. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
[
BOOKS_SERVICES_PROVIDERS
],
BOOKS_SERVICES_PROVIDERS,
];
BOOKS_SERVICES_PROVIDERS
===
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
];

28. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
[
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
]
],
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
],
];
BOOKS_SERVICES_PROVIDERS
===
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
];

29. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
[
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
]
],
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
BooksRemoteProvider,
],
];
HTTP_PROVIDERS
===
export const HTTP_PROVIDERS: any[] = [
// TODO(pascal): use factory type annotations once supported
// issue: https://github.com/angular/angular/issues/3183
provide(Http,
{
useFactory: (xhrBackend, requestOptions) =>
new Http(xhrBackend, requestOptions),
deps: [XHRBackend, RequestOptions]
}),
BrowserXhr,
provide(RequestOptions, {useClass: BaseRequestOptions}),
provide(ResponseOptions, {useClass: BaseResponseOptions}),
XHRBackend
];
https://github.com/angular/angular/blob/
2.0.0-beta.2/modules/angular2/http.ts#L154-L166

30. MODULES IN NG2
FINAL PROVIDERS
Nothing happens if the same “provider” is included twice.
BOOKSTORE_PROVIDERS
===
[
[
[
[…],
BooksService,
BooksDictionary,
BooksRemoteProvider,
]
],
[
[…],
BooksService,
BooksDictionary,
BooksRemoteProvider,
],
];
HTTP_PROVIDERS
===
export const HTTP_PROVIDERS: any[] = [
// TODO(pascal): use factory type annotations once supported
// issue: https://github.com/angular/angular/issues/3183
provide(Http,
{
useFactory: (xhrBackend, requestOptions) =>
new Http(xhrBackend, requestOptions),
deps: [XHRBackend, RequestOptions]
}),
BrowserXhr,
provide(RequestOptions, {useClass: BaseRequestOptions}),
provide(ResponseOptions, {useClass: BaseResponseOptions}),
XHRBackend
];
https://github.com/angular/angular/blob/
2.0.0-beta.2/modules/angular2/http.ts#L154-L166

31. SO… WHAT IS A “MODULE” IN ANGULAR2?
MODULES IN NG2

32. ANGULAR2 MODULES
MODULES NG2
• A module is a resource that exports:
• Components
• Classes
• And an array of PROVIDERS
(does not matter if we repeat things)

33. MODULES IN NG2
“MODULE” EXAMPLE 1
// bookstore/index.js
'use strict';
var BOOKS_COMPONENTS_PROVIDERS =
require(‘./books-components’).BOOKS_COMPONENTS_PROVIDERS;
var BOOKS_SERVICES_PROVIDERS =
require(‘./books-services’).BOOKS_SERVICES_PROVIDERS;
exports.BookStoreComponent = require(‘./BookStoreComponent’);
exports.BOOKSTORE_PROVIDERS = [
BOOKS_COMPONENTS_PROVIDERS,
BOOKS_SERVICES_PROVIDERS,
];

34. MODULES IN NG2
“MODULE” EXAMPLE 2
// bookstore/books-services/index.js
'use strict';
var BooksService = require(‘./BooksService’);
var BooksDictionary = require(‘./BooksDictionary’);
var BooksRemote = require(‘./BooksRemote’);
exports.Book = Book;
exports.BooksService = BooksService;
exports.BooksDictionary = BooksDictionary;
exports.BooksRemote = BooksRemote;
var HTTP_PROVIDERS = require(‘angular2/http').HTTP_PROVIDERS;
exports.BOOKS_SERVICES_PROVIDERS = [
HTTP_PROVIDERS,
BooksService, BooksDictionary, BooksRemoteProvider,
];

35. MODULES IN NG2
“MODULE” EXAMPLE 3
// bookstore/books-services/index.js
'use strict';
exports.BookEditorComponent = require(‘./BookEditorComponent’);
exports.BookViewerComponent = require(‘./BookViewerComponent’);
exports.BooksListComponent = require(‘./BooksListComponent’);
// it requires books providers
var BOOKS_SERVICES_PROVIDERS =
require(‘../books-services’).BOOKS_SERVICES_PROVIDERS;
exports.BOOKS_COMPONENTS_PROVIDERS = [
BOOKS_SERVICES_PROVIDERS,
];

36. ONE MORE THING…
MODULES IN NG2

37. ANGULAR 2 HAS MULTIPLE INJECTORS
MODULES IN NG2

38. ANGULAR 2 HAS UP TO ONE INJECTOR PER COMPONENT
MODULES IN NG2

39. ANGULAR 2 HAS MULTIPLE INJECTORS
MODULES NG2

40. ANGULAR 2 HAS MULTIPLE INJECTORS
MODULES NG2
• Angular2 has “almost” one injector per component
• There is a tree of injectors, if something is not found in your level,
it looks upper
• You can nest Angular2 apps (YEAH!)
• You can create providers for view models
(aka no more global model for toggle the state of the search bar)

41. MODULES IN NG2
ANGULAR 2 HAS MULTIPLE INJECTORS
import {Component, Input, Output, EventEmitter} from 'angular2/core';
import {RestoreService} from './restore.service';
import {Hero} from ‘./hero';
@Component({
selector: 'hero-editor',
providers: [RestoreService],
template: …
})
export class HeroEditorComponent {
…
}
https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

42. DISCLAIMER
• I’m not an expert in Angular2, just a beginner
• I present it because I found very few example and nothing talking
about “modules”
• I want to share it so I can help others to save time
• Tests were done on Angular v2.0.0-beta.1, current is v2.0.0-beta.2,
but there is room for change