View
30
Download
0
Category
Preview:
Citation preview
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
Recommended