Services Article

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 ] // We can put our 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();
+      }
+    });`;
+}

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

cms/articles/1480177579/templates/article-1480177579.html

@@ -0,0 +1,58 @@
+<p>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.</p>
+<br/>
+
+<p>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.</p>
+
+<br/>
+
+<p>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.</p>
+
+<xblog-table-content [model]="tableContents">
+  <xblog-title>
+    <h5 class="section-subject">Table of Contents</h5>
+  </xblog-title>
+</xblog-table-content>
+
+<br/>
+
+<h3>Creating a simple Service</h3>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{examples.simpleService.sourceCode.name}}</xblog-title>
+  <a xblog-source-code [href]="examples.simpleService.sourceCode.link">Full Code</a>
+  <xblog-code [innerHtml]="examples.simpleService.codeBlocks"></xblog-code>
+</xblog-code-panel>
+
+<br/><br/><br/>
+
+<h3>Inject Service to Component</h3>
+
+<p>Using Angular 2 DI to Inject Our Hero Service to the Hero List Component. We inject it into the HeroListComponent via its constructor:</p>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{examples.injectServiceToComponent.sourceCode.name}}</xblog-title>
+  <a xblog-source-code [href]="examples.injectServiceToComponent.sourceCode.link">Full Code</a>
+  <xblog-code [innerHtml]="examples.injectServiceToComponent.codeBlocks"></xblog-code>
+</xblog-code-panel>
+
+<br/><br/><br/>
+
+<h3>Register Services at the Module Level</h3>
+
+<p>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.</p>
+
+<br/>
+
+<p>This is an example of the registration service at the module level and use the service in components.</p>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{examples.registerServicesAtTheModuleLevel.sourceCode.name}}</xblog-title>
+  <a xblog-source-code [href]="examples.registerServicesAtTheModuleLevel.sourceCode.link">Full Code</a>
+  <xblog-code [innerHtml]="examples.registerServicesAtTheModuleLevel.codeBlocks"></xblog-code>
+</xblog-code-panel>

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();