MODULES IN ANGULAR2

@DRPICOX

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

INJECTIONSangular.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(), }

INJECTIONSangular.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 ) { … }

INJECTIONSangular.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 ) { … }

INJECTIONSangular.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

MODULES IN NG1

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

angular.module(‘booksServices’,[])

MODULES IN NG1

booksServices injections

booksServ…

angular.module(‘bookStoreApp’, [ ‘booksServices’, ‘booksComponents’ ]);

booksServ…

angular.module(‘booksComponents’,[])

booksComponents injections

booksComp…

booksComp…

+

=angular.module(‘bookStoreApp’,[‘booksServices’,’booksComponents’])

booksServices injections

booksComp…

booksServ…

booksComponents injections

booksServ…

booksComp…

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

{ ‘booksService’: new BooksService(), … }

¿WHAT ABOUT ANGULAR2?

NG2

THERE ARE NO MODULES

MODULES IN NG2

MODULES IN NG2THERE 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?

MODULES IN NG2THERE 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?

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

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

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

MODULES IN NG2THERE ARE NO MODULES

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 NG2EASY 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!

MODULES IN NG2EASY 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.

MODULES IN NG2FINAL PROVIDERS

Nothing happens if the same “provider” is included twice.

BOOKSTORE_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, BOOKS_SERVICES_PROVIDERS, ];

MODULES IN NG2FINAL PROVIDERS

Nothing happens if the same “provider” is included twice.

BOOKSTORE_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, BOOKS_SERVICES_PROVIDERS, ];

BOOKS_COMPONENTS_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, ];

MODULES IN NG2FINAL PROVIDERS

Nothing happens if the same “provider” is included twice.

BOOKSTORE_PROVIDERS === [ [ BOOKS_SERVICES_PROVIDERS ], BOOKS_SERVICES_PROVIDERS, ];

BOOKS_COMPONENTS_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, ];

MODULES IN NG2FINAL 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, ];

MODULES IN NG2FINAL 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, ];

MODULES IN NG2FINAL 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 in DI // 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 NG2FINAL 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 in DI // 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; var BOOKS_SERVICES_PROVIDERS = require(‘./books-services’).BOOKS_SERVICES_PROVIDERS;

exports.BookStoreComponent = require(‘./BookStoreComponent’); exports.BOOKSTORE_PROVIDERS = [ BOOKS_COMPONENTS_PROVIDERS, BOOKS_SERVICES_PROVIDERS, ];

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, ];

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, ];

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

ANGULAR 2 HAS MULTIPLE INJECTORS

MODULES NG2

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)

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

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