From 37b035e753ca62237857120cecc1793ab544091e Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Tue, 29 Nov 2016 21:14:45 +0700 Subject: [PATCH 1/2] Services Article --- .../article-1480177579.component.js | 144 ++++++++++++++++++ cms/articles/1480177579/index.js | 15 ++ .../templates/article-1480177579.html | 58 +++++++ cms/articles/index.js | 6 +- 4 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 cms/articles/1480177579/article-1480177579.component.js create mode 100644 cms/articles/1480177579/index.js create mode 100644 cms/articles/1480177579/templates/article-1480177579.html diff --git a/cms/articles/1480177579/article-1480177579.component.js b/cms/articles/1480177579/article-1480177579.component.js new file mode 100644 index 0000000..1214314 --- /dev/null +++ b/cms/articles/1480177579/article-1480177579.component.js @@ -0,0 +1,144 @@ +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import highlight from 'highlight.js'; + +import { xblogTableContentService } from 'xblog-cores/modules'; +import { resourceUtils } from 'xblog-cores/utils'; + + +export var article1480177579Component = Component({ + selector: 'article', + templateUrl: './templates/article-1480177579.html', + host: { + '[class.xblog-article-1480177579]': 'true' + } +}) + .Class({ + constructor: [ + DomSanitizer, + xblogTableContentService, + + function (sanitizer, tableContentService) { + this.id = 1480177579; + this.sanitizer = sanitizer; + this.tableContentService = tableContentService; + } + ], + + ngOnInit: function () { + this.tableContents = this.tableContentService + .getBuilder() + .addHeadings([ + { id: 'simple-service', name: 'Simple Service' }, + { id: 'inject-service-to-component', name: 'Inject Service to Component' }, + { id: 'register-services-at-the-module-level', name: 'Register Services at the Module Level' }, + ]) + .build(); + + this.examples = { + simpleService: { + sourceCode: { + name: 'Simple Service', + link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-init/child.component.js') + }, + codeBlocks: this.getCodeBlock(simeplService) + }, + injectServiceToComponent: { + sourceCode: { + name: 'Inject Service to Component', + link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-init/child.component.js') + }, + codeBlocks: this.getCodeBlock(injectServiceToComponent) + }, + registerServicesAtTheModuleLevel: { + sourceCode: { + name: 'Register Services at the Module Level', + link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-init/child.component.js') + }, + codeBlocks: this.getCodeBlock(registerServicesAtTheModuleLevel) + } + } + }, + + getCodeBlock: function (getter, lang) { + var _langs = lang ? [lang] : ['javascript', 'html', 'css']; + + var _codeBlock = highlight.highlightAuto(getter().replace('\n', '').replace(/^ /gm, ''), _langs).value; + + return this.sanitizer.bypassSecurityTrustHtml(_codeBlock); + } + }); + +function simeplService() { + return ` + import { Class } from '@angular/core'; + + export const HeroService = Class({ + constructor: function() { + this.heroes = [ + { + id: 1, + name: 'X-Men' + }, + { + id: 2, + name: 'Spider Man' + }, + ... + ]; + } + + getHeroes: function() { + return this.heroes; + } + });`; +} + +function injectServiceToComponent() { + return ` + import { HeroService } from './hero.service'; + + export const HeroComponent = Component({ + .... + providers: [ HeroService ] + }).Class({ + constructor: [HeroService, function(heroService){ + this.heroService = heroService; + }] + + getHeroes: function() { + this.heroes = this.heroService.getHeroes(); + } + });`; +} + +function registerServicesAtTheModuleLevel() { + return ` + /* AppModule */ + import { NgModule } from '@angular/core'; + import { HeroService } from './hero.service'; + + export const AppModule = NgModule({ + ... + providers: [ HeroService ] // You can put your services here! + }).Class({ + constructor: function() {} + }); + + /* HeroComponent */ + import { HeroService } from './hero.service'; + + export const HeroComponent = Component({ + .... + // providers: [ HeroService ] + // we don't need register at providers because we registered at module level + }).Class({ + constructor: [HeroService, function(heroService){ + this.heroService = heroService; + }] + + getHeroes: function() { + this.heroes = this.heroService.getHeroes(); + } + });`; +} \ No newline at end of file diff --git a/cms/articles/1480177579/index.js b/cms/articles/1480177579/index.js new file mode 100644 index 0000000..4eacf65 --- /dev/null +++ b/cms/articles/1480177579/index.js @@ -0,0 +1,15 @@ +import { resourceUtils } from 'xblog-cores/utils'; +import { article1480177579Component } from './article-1480177579.component'; + +export var article1480177579 = { + id: 1480177579, + title: 'Services', + postedDate: 'Sat Nov 26 2016 23:26:19 GMT+0700 (ICT)', + author: 'Thanh Tran', + cover: resourceUtils.getImg('xblog-home-cover.jpg'), + routeLink: resourceUtils.getArticleRouteLink('services-1480177579.html'), + relatedArticles: [], + tags: [], + description: 'If a piece of code is needed by many components in our application. A good practice is to create a single reusable service.', + content: article1480177579Component, +}; diff --git a/cms/articles/1480177579/templates/article-1480177579.html b/cms/articles/1480177579/templates/article-1480177579.html new file mode 100644 index 0000000..5c65ef7 --- /dev/null +++ b/cms/articles/1480177579/templates/article-1480177579.html @@ -0,0 +1,58 @@ +

Every application is composed of a lot of subsystems that do different things like logging, data access, caching, specific application domain knowledge, etc. Depending on the type of application that we are building or the framework that we are using there’s different ways to represent these subsystems.

+
+ +

Angular 2 uses the concept of services, an Angular 2 service is a class that encapsulates some sort of functionality and provides it as a service for the rest of our application.

+ +
+ +

If we have an Angular 1 background we’ll welcome this simplification in the Angular conceptual model: there’s no more service/factory/constant/provider conundrum. In Angular 2 there’s only services.

+ + + +
Table of Contents
+ + + +
+ +

Creating a simple Service

+ +
+ + + {{examples.simpleService.sourceCode.name}} + Full Code + + + +


+ +

Inject Service to Component

+ +

Using Angular 2 DI to Inject Our Hero Service to the Hero List Component. We inject it into the HeroListComponent via its constructor:

+ +
+ + + {{examples.injectServiceToComponent.sourceCode.name}} + Full Code + + + +


+ +

Register Services at the Module Level

+ +

When would we want to do that? – we may wonder. Well, whenever we want to use the same instance of a service for our whole application. When we register services at the module level, we can use service in component without register at providers.

+ +
+ +

This is an example of the registration service at the module level and use the service in components.

+ +
+ + + {{examples.registerServicesAtTheModuleLevel.sourceCode.name}} + Full Code + + \ No newline at end of file diff --git a/cms/articles/index.js b/cms/articles/index.js index e1aafe3..bc9157c 100644 --- a/cms/articles/index.js +++ b/cms/articles/index.js @@ -13,7 +13,11 @@ import { xblogTableContentService } from 'xblog-cores/modules'; -var _ARTICLES = []; +import { article1480177579 } from './1480177579'; + +var _ARTICLES = [ + article1480177579 +]; export var ARTICLE_STORE = _init(); From dd74585b7f17f739fa26b65aeef874aa37141bdb Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Tue, 29 Nov 2016 21:18:43 +0700 Subject: [PATCH 2/2] Change you/your to we/our --- cms/articles/1480177579/article-1480177579.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/articles/1480177579/article-1480177579.component.js b/cms/articles/1480177579/article-1480177579.component.js index 1214314..3db15ac 100644 --- a/cms/articles/1480177579/article-1480177579.component.js +++ b/cms/articles/1480177579/article-1480177579.component.js @@ -120,7 +120,7 @@ function registerServicesAtTheModuleLevel() { export const AppModule = NgModule({ ... - providers: [ HeroService ] // You can put your services here! + providers: [ HeroService ] // We can put our services here! }).Class({ constructor: function() {} });