modules in angular 2.0 beta.1

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


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



{ ‘Book’: Book, ‘booksService’: new BooksService(), ‘booksDictionary’: booksDictionaryFactory(), }

BooksService.$inject = [‘booksDictionary’,’booksRemote’]; function BooksService ( booksDictionary , booksRemote ) { … }



{ ‘Book’: Book, ‘booksService’: new BooksService(), ‘booksDictionary’: booksDictionaryFactory(), ‘booksRemote’: new BooksRemoteProvider().$get(), }

BooksService.$inject = [‘booksDictionary’,’booksRemote’]; function BooksService ( booksDictionary , booksRemote ) { … }


{ ‘Book’: Book, ‘booksService’: new BooksService(), ‘booksDictionary’: booksDictionaryFactory(), ‘booksRemote’: new BooksRemoteProvider().$get(), }


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’])


booksComp…

booksServ…


booksServ…

booksComp…

MODULES IN NG1

In Angular1 there is only one injector.



$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)



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


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


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


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


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


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


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


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


BOOKSTORE_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, BOOKS_SERVICES_PROVIDERS, ];



BOOKSTORE_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, BOOKS_SERVICES_PROVIDERS, ];

BOOKS_COMPONENTS_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, ];



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

BOOKS_COMPONENTS_PROVIDERS === [ BOOKS_COMPONENTS_PROVIDERS, ];



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

BOOKS_SERVICES_PROVIDERS === [ HTTP_PROVIDERS, BooksService, BooksDictionary, BooksRemoteProvider, ];



BOOKSTORE_PROVIDERS === [ [ [ HTTP_PROVIDERS, BooksService, BooksDictionary, BooksRemoteProvider, ] ], [ HTTP_PROVIDERS, BooksService, BooksDictionary, BooksRemoteProvider, ], ];

BOOKS_SERVICES_PROVIDERS === [ HTTP_PROVIDERS, BooksService, BooksDictionary, BooksRemoteProvider, ];



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



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



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



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


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

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

Software