Modules in angular 2.0 beta.1

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

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,
}

INJECTIONS
LibraryService.$inject = [‘booksService’];
function LibraryService ( booksService ) {
…
}
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksService’: new BooksService(),
}

INJECTIONS
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksDictionary’: booksDictionaryFactory(),
}
BooksService.$inject = [‘booksDictionary’,’booksRemote’];
function BooksService ( booksDictionary , booksRemote ) {
…
}

INJECTIONS
MODULES IN NG1
$injector
{
‘Book’: Book,
‘booksRemote’: new BooksRemoteProvider().$get(),
}
BooksService.$inject = [‘booksDictionary’,’booksRemote’];
function BooksService ( booksDictionary , booksRemote ) {
…
}

INJECTIONS
{
‘Book’: Book,
‘booksRemote’: new BooksRemoteProvider().$get(),
}
MODULES IN NG1
$injector
Catalog from injections how to create instances
A dictionary of instances already created to be reused

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

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…

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

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
{
…
}

THERE ARE NO MODULES
MODULES IN NG2

MODULES IN NG2
// 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?

MODULES IN NG2
// 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?

MODULES IN NG2
// 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

MODULES IN NG2
…
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

MODULES IN NG2
…
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

MODULES IN NG2
What I did wrong?
X

EASY TO GO RECIPE
MODULES IN NG2

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)

MODULES IN NG2
EASY TO GO RECIPE
'use strict';
var BooksDictionary = require(‘./BooksDictionary’);
var BooksRemote = require(‘./BooksRemote’);
exports.BooksDictionary = BooksDictionary;
exports.BooksRemote = BooksRemote;
HTTP_PROVIDERS,
BooksService, BooksDictionary, BooksRemoteProvider,
];
Much better!

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

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
];

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
];
BOOKS_COMPONENTS_PROVIDERS
===
[
];

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
[
BOOKS_SERVICES_PROVIDERS
],
];
BOOKS_COMPONENTS_PROVIDERS
===
[
];

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
[
],
];
===
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
];

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
[
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
]
],
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
],
];
===
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
];

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
[
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
]
],
[
HTTP_PROVIDERS,
BooksService,
BooksDictionary,
],
];
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

MODULES IN NG2
FINAL PROVIDERS
BOOKSTORE_PROVIDERS
===
[
[
[
[…],
BooksService,
BooksDictionary,
]
],
[
[…],
BooksService,
BooksDictionary,
],
];
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

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

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)

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

MODULES IN NG2
'use strict';
var BooksDictionary = require(‘./BooksDictionary’);
var BooksRemote = require(‘./BooksRemote’);
exports.BooksDictionary = BooksDictionary;
exports.BooksRemote = BooksRemote;
HTTP_PROVIDERS,
BooksService, BooksDictionary, BooksRemoteProvider,
];

MODULES IN NG2
'use strict';
exports.BookEditorComponent = require(‘./BookEditorComponent’);
exports.BookViewerComponent = require(‘./BookViewerComponent’);
exports.BooksListComponent = require(‘./BooksListComponent’);
// it requires books providers
require(‘../books-services’).BOOKS_SERVICES_PROVIDERS;
exports.BOOKS_COMPONENTS_PROVIDERS = [
];

ONE MORE THING…
MODULES IN NG2

ANGULAR 2 HAS MULTIPLE INJECTORS
MODULES IN NG2

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

MODULES NG2

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)

MODULES IN NG2
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

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

Modules in angular 2.0 beta.1

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Modules in angular 2.0 beta.1 (20)

More from David Rodenas (20)

Recently uploaded (20)

Modules in angular 2.0 beta.1