From 6d631415fbc43c70203dbffdfc05b7aa83371f44 Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Sat, 26 Nov 2016 16:48:59 +0700 Subject: [PATCH 1/7] Initial components directives article --- .../article-1480153229.component.js | 46 +++++++++++++++++++ cms/articles/1480153229/index.js | 15 ++++++ .../templates/article-1480153229.html | 0 cms/articles/index.js | 6 ++- 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 cms/articles/1480153229/article-1480153229.component.js create mode 100644 cms/articles/1480153229/index.js create mode 100644 cms/articles/1480153229/templates/article-1480153229.html diff --git a/cms/articles/1480153229/article-1480153229.component.js b/cms/articles/1480153229/article-1480153229.component.js new file mode 100644 index 0000000..5276025 --- /dev/null +++ b/cms/articles/1480153229/article-1480153229.component.js @@ -0,0 +1,46 @@ +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 article1480153229Component = Component({ + selector: 'article', + templateUrl: './templates/article-1480153229.html', + host: { + '[class.xblog-article-1480153229]': 'true' + } +}).Class({ + constructor: [ + DomSanitizer, + xblogTableContentService, + + function (sanitizer, tableContentService) { + this.id = 1480153229; + this.sanitizer = sanitizer; + this.tableContentService = tableContentService; + } + ], + + ngOnInit: function () { + this.tableContents = this.tableContentService + .getBuilder() + .addHeadings([ + { id: 'my-heading', name: 'My heading' } + ]) + .addSubHeadings([ + { headingId: 'my-heading', id: 'my-subheading', name: 'My subheading' }, + ]) + .build(); + }, + + getCodeBlock: function (getter, lang) { + var _langs = lang ? [lang] : ['javascript', 'html', 'css']; + + var _codeBlock = highlight.highlightAuto(getter().replace('', '').replace(/^ /gm, ''), _langs).value; + + return this.sanitizer.bypassSecurityTrustHtml(_codeBlock); + } +}); diff --git a/cms/articles/1480153229/index.js b/cms/articles/1480153229/index.js new file mode 100644 index 0000000..170bd01 --- /dev/null +++ b/cms/articles/1480153229/index.js @@ -0,0 +1,15 @@ +import { resourceUtils } from 'xblog-cores/utils'; +import { article1480153229Component } from './article-1480153229.component'; + +export var article1480153229 = { + id: 1480153229, + title: 'Components Directives', + postedDate: 'Sat Nov 26 2016 16:40:28 GMT+0700 (ICT)', + author: 'Thanh Tran', + cover: resourceUtils.getImg('xblog-home-cover.jpg'), + routeLink: resourceUtils.getArticleRouteLink('components-directives-1480153229.html'), + relatedArticles: [], + tags: [], + description: 'Angular 2 applications are made of components. A component is the combination of an HTML template and a component class that controls a portion of the screen.', + content: article1480153229Component, +}; diff --git a/cms/articles/1480153229/templates/article-1480153229.html b/cms/articles/1480153229/templates/article-1480153229.html new file mode 100644 index 0000000..e69de29 diff --git a/cms/articles/index.js b/cms/articles/index.js index e1aafe3..def1ef2 100644 --- a/cms/articles/index.js +++ b/cms/articles/index.js @@ -13,7 +13,11 @@ import { xblogTableContentService } from 'xblog-cores/modules'; -var _ARTICLES = []; +import { article1480153229 } from './1480153229'; + +var _ARTICLES = [ + article1480153229 +]; export var ARTICLE_STORE = _init(); From 24898e090dc03475fea3afd898cc8fbabe9eebef Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Sat, 26 Nov 2016 22:37:52 +0700 Subject: [PATCH 2/7] Update components/directives --- .../article-1480153229.component.js | 74 +++++++++++++++- .../templates/article-1480153229.html | 88 +++++++++++++++++++ 2 files changed, 161 insertions(+), 1 deletion(-) diff --git a/cms/articles/1480153229/article-1480153229.component.js b/cms/articles/1480153229/article-1480153229.component.js index 5276025..c3ccb4e 100644 --- a/cms/articles/1480153229/article-1480153229.component.js +++ b/cms/articles/1480153229/article-1480153229.component.js @@ -28,12 +28,38 @@ export var article1480153229Component = Component({ this.tableContents = this.tableContentService .getBuilder() .addHeadings([ - { id: 'my-heading', name: 'My heading' } + { id: 'Components', name: 'Components' }, + { id: 'Directives', name: 'Directives' } ]) .addSubHeadings([ { headingId: 'my-heading', id: 'my-subheading', name: 'My subheading' }, ]) .build(); + + this.components = { + simpleComponent: { + sourceCode: { + name: 'A Simple Component', + link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-changes/example.component.js') + }, + codeBlocks: this.getCodeBlock(getSimpleComponent) + }, + complexComponent: { + sourceCode: { + exampleComponent: { + name: 'Component has some attributes' + } + }, + codeBlocks: this.getCodeBlock(getComplexComponent) + }, + simpleDirective: { + sourceCode: { + name: 'A Simple Directive', + link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-changes/example.component.js') + }, + codeBlocks: this.getCodeBlock(getSimpleDirective) + }, + }; }, getCodeBlock: function (getter, lang) { @@ -44,3 +70,49 @@ export var article1480153229Component = Component({ return this.sanitizer.bypassSecurityTrustHtml(_codeBlock); } }); + + +function getSimpleComponent() { + return ` + import { Component } from '@angular/core'; + + export const AppComponent = Component({ + selector: 'my-app', + template: '

My First Component

' + }) + .Class({ + constructor: function(){ } + });`; +} + +function getComplexComponent() { + return ` + import { Component } from '@angular/core'; + import { HeroService } from './HeroService'; + import { HightLight } from './HightLight'; + + export const HeroListComponent = Component({ + ... + inputs: ['hero'], + outputs: ['heroUpdated'], + styles: ['h1 { color: "red" }'], + providers: [HeroService], + directives: [HightLight] + }) + .Class({ + constructor: function(){ } + });`; +} + +function getSimpleDirective() { + return ` + import { Directive } from '@angular/core'; + + export const HightLight = Component({ + selector: '[hightlight]', + inputs: ['color'] + }) + .Class({ + constructor: function(){ } + });`; +} \ No newline at end of file diff --git a/cms/articles/1480153229/templates/article-1480153229.html b/cms/articles/1480153229/templates/article-1480153229.html index e69de29..74827b8 100644 --- a/cms/articles/1480153229/templates/article-1480153229.html +++ b/cms/articles/1480153229/templates/article-1480153229.html @@ -0,0 +1,88 @@ + + +
Table of Contents
+ + + +

Components

+ +

In Angular 2, Components are the main way we build and specify elements and logic on the page.

+
+

Every Angular application has at least one component.

+ +

Components are the basic building blocks of Angular applications. A component controls a portion of the screen—a view—through + its associated template.

+ +
+ +

A Simple Component.

+ +
+ + + {{components.simpleComponent.sourceCode.name}} + Full Code + + + +

+ +

We use Component to add some metadata to AppComponent:

+ + + +

Also, we have component Class that controls the appearance and behavior of a view through its template. + Here, we only have the root component, AppComponent. Since we don't need any application logic in the simple example, it's + empty.

+
+ +

We export the AppComponent class so that we can import it into the application.

+ +
+ +

Notes: In Class, we need at least constructor function. If we don't have the logic for component, we need + to create empty constructor function as above component.

+ +
+ +

The component will have other attributes such as: host, input, output, directives, styles, etc.

+ +
+ +

Here is a component that has some attributes.

+ +
+ + + {{components.complexComponent.sourceCode.name}} + + + +

+ + + +

Directives

+ +

In angular 2, Directives are the same Components without the template/templateUrl.

+ +

This is a HightLight directive to hight light a text with dynamic color.

+ +
+ + + {{components.simpleDirective.sourceCode.name}} + Full Code + + + +

\ No newline at end of file From 8a879d4121f13b84d65813b8f5a802e1f287e041 Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Tue, 29 Nov 2016 22:01:15 +0700 Subject: [PATCH 3/7] Fix bug directive --- cms/articles/1480153229/article-1480153229.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/articles/1480153229/article-1480153229.component.js b/cms/articles/1480153229/article-1480153229.component.js index c3ccb4e..b366edd 100644 --- a/cms/articles/1480153229/article-1480153229.component.js +++ b/cms/articles/1480153229/article-1480153229.component.js @@ -108,7 +108,7 @@ function getSimpleDirective() { return ` import { Directive } from '@angular/core'; - export const HightLight = Component({ + export const HightLight = Directive({ selector: '[hightlight]', inputs: ['color'] }) From 321ebc381cf749625008c581f11764e8ef1d6441 Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Wed, 8 Feb 2017 22:22:47 +0700 Subject: [PATCH 4/7] Update renderWhitespace to boundary in settings.json --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index f1a7e0e..b77d489 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ // Place your settings in this file to overwrite default and user settings. { "editor.tabSize": 2, - "editor.renderWhitespace": true, + "editor.renderWhitespace": "boundary", "editor.insertSpaces": true, "editor.detectIndentation": true } \ No newline at end of file From a526f77cd7dd76c194d405b3b125c54b9fd6a121 Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Thu, 9 Feb 2017 00:23:49 +0700 Subject: [PATCH 5/7] Update content components directives article --- .../article-1480153229.component.js | 12 +-- cms/articles/1480153229/index.js | 2 +- .../templates/article-1480153229.html | 91 +++++++++++++++---- 3 files changed, 80 insertions(+), 25 deletions(-) diff --git a/cms/articles/1480153229/article-1480153229.component.js b/cms/articles/1480153229/article-1480153229.component.js index b366edd..784b1ad 100644 --- a/cms/articles/1480153229/article-1480153229.component.js +++ b/cms/articles/1480153229/article-1480153229.component.js @@ -28,8 +28,10 @@ export var article1480153229Component = Component({ this.tableContents = this.tableContentService .getBuilder() .addHeadings([ - { id: 'Components', name: 'Components' }, - { id: 'Directives', name: 'Directives' } + { id: 'What is Component?', name: 'What is Component?' }, + { id: 'Component\'s Metadata Properties', name: 'Component\'s Metadata Properties' }, + { id: 'What is Directive?', name: 'What is Directive?' }, + { id: 'Directive\'s Metadata Properties', name: 'Directive\'s Metadata Properties' } ]) .addSubHeadings([ { headingId: 'my-heading', id: 'my-subheading', name: 'My subheading' }, @@ -88,16 +90,12 @@ function getSimpleComponent() { function getComplexComponent() { return ` import { Component } from '@angular/core'; - import { HeroService } from './HeroService'; - import { HightLight } from './HightLight'; export const HeroListComponent = Component({ ... inputs: ['hero'], outputs: ['heroUpdated'], - styles: ['h1 { color: "red" }'], - providers: [HeroService], - directives: [HightLight] + styles: ['h1 { color: "red" }'] }) .Class({ constructor: function(){ } diff --git a/cms/articles/1480153229/index.js b/cms/articles/1480153229/index.js index 170bd01..93a138f 100644 --- a/cms/articles/1480153229/index.js +++ b/cms/articles/1480153229/index.js @@ -3,7 +3,7 @@ import { article1480153229Component } from './article-1480153229.component'; export var article1480153229 = { id: 1480153229, - title: 'Components Directives', + title: 'Components Directives in Angular 2', postedDate: 'Sat Nov 26 2016 16:40:28 GMT+0700 (ICT)', author: 'Thanh Tran', cover: resourceUtils.getImg('xblog-home-cover.jpg'), diff --git a/cms/articles/1480153229/templates/article-1480153229.html b/cms/articles/1480153229/templates/article-1480153229.html index 74827b8..94dae62 100644 --- a/cms/articles/1480153229/templates/article-1480153229.html +++ b/cms/articles/1480153229/templates/article-1480153229.html @@ -1,21 +1,32 @@ +

Full sources code example

+

Version: Angular 2.4

+
Table of Contents
 -

Components

+

What is Component?

+ +

In Angular 2, components are the main way we build and specify elements and logic on the page.

-

In Angular 2, Components are the main way we build and specify elements and logic on the page.


-

Every Angular application has at least one component.

-

Components are the basic building blocks of Angular applications. A component controls a portion of the screen—a view—through +

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular + components. Angular components are a subset of directives. Unlike directives, components always have a template and only + one component can be instantiated per an element in a template. A component controls a portion of the screen—a view—through its associated template.


-

A Simple Component.

+

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that + a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

+ +
+ +

In addition to the metadata configuration specified via the Component, components can control their runtime behavior + by implementing various Life-Cycle hooks.


@@ -36,23 +47,26 @@

Components

Also, we have component Class that controls the appearance and behavior of a view through its template. Here, we only have the root component, AppComponent. Since we don't need any application logic in the simple example, it's - empty.

+ empty. +


We export the AppComponent class so that we can import it into the application.


-

Notes: In Class, we need at least constructor function. If we don't have the logic for component, we need +

Note: We are using angular 2 by Javascript, so we need at least constructor function. If we don't have the logic for component, we need to create empty constructor function as above component.


-

The component will have other attributes such as: host, input, output, directives, styles, etc.

+

Component's Metadata Properties

+ +

A component needs at least 2 metadata properties: selector and template. So, it can have a lot of metadata properties to handle logic and behavior.


-

Here is a component that has some attributes.

+

Here is a component using inputs to list of class property names to data-bind as component inputs and outputs to list of class property names that expose output events that others can subscribe to.


@@ -63,17 +77,46 @@

Components



+

In addition, a component has many others metadata properties:

+
    -
  • Styles/StyleUrls attribtue: A component can have some styles that will be contained in styles or styleUrls.
    • -
  • Inputs/Outputs attributes: Recevie/send data from other directives/components, it help us share data between components/directives - and components/directives.
    • -
  • Directives attribute: Inject other directive/components to a component.
    • -
  • Providers attribute: Inject services to a component.
    • +
  • animations - list of animations of this component.
    • +
  • changeDetection - change detection strategy used by this component.
    • +
  • encapsulation - style encapsulation strategy used by this component.
    • +
  • entryComponents - list of components that are dynamically inserted into the view of this component.
    • +
  • exportAs - name under which the component instance is exported in a template.
    • +
  • host - map of class property to host element bindings for events, properties and attributes.
    • +
  • inputs - list of class property names to data-bind as component inputs.
    • +
  • interpolation - custom interpolation markers used in this component's template.
    • +
  • moduleId - ES/CommonJS module id of the file in which this component is defined.
    • +
  • outputs - list of class property names that expose output events that others can subscribe to.
    • +
  • providers - list of providers available to this component and its children.
    • +
  • queries - configure queries that can be injected into the component.
    • +
  • selector - css selector that identifies this component in a template.
    • +
  • styleUrls - list of urls to stylesheets to be applied to this component's view.
    • +
  • styles - inline-defined styles to be applied to this component's view.
    • +
  • template - inline-defined template for the view.
    • +
  • templateUrl - url to an external file containing a template for the view.
    • +
  • viewProviders - list of providers available to this component and its view children.
-

Directives

+

What is Directive?

+ +

Directive allows you to mark a class as an Angular directive and provide additional metadata that determines how the directive should be processed, instantiated and used at runtime.

+ +
+ +

Directives allow you to attach behavior to elements in the DOM..

-

In angular 2, Directives are the same Components without the template/templateUrl.

+
+ +

A directive must belong to an NgModule in order for it to be usable by another directive, component, or application. To specify that a directive is a member of an NgModule, you should list it in the declarations field of that NgModule.

+ +
+ +

In addition to the metadata configuration specified via the Directive, directives can control their runtime behavior by implementing various Life-Cycle hooks.

+ +

This is a HightLight directive to hight light a text with dynamic color.

@@ -85,4 +128,18 @@

Directives

-

\ No newline at end of file +


+ +

Directive's Metadata Properties

+ +

The directive does not have template and style, but it has a lot of the metadata properties to handle behavior

+ +
    +
  • exportAs - name under which the component instance is exported in a template.
    • +
  • host - map of class property to host element bindings for events, properties and attributes.
    • +
  • inputs - list of class property names to data-bind as component inputs.
    • +
  • outputs - list of class property names that expose output events that others can subscribe to.
    • +
  • providers - list of providers available to this component and its children.
    • +
  • queries - configure queries that can be injected into the component.
    • +
  • selector - css selector that identifies this component in a template.
    • +
\ No newline at end of file From 94a55691dc6702fa9f4adf3a309040b56f6ff1ea Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Sun, 12 Feb 2017 02:53:32 +0700 Subject: [PATCH 6/7] Add .jsbeautifyrc --- .jsbeautifyrc | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .jsbeautifyrc diff --git a/.jsbeautifyrc b/.jsbeautifyrc new file mode 100644 index 0000000..ce92d56 --- /dev/null +++ b/.jsbeautifyrc @@ -0,0 +1,9 @@ +{ + "end_with_newline": true, + "indent_char": " ", + "indent_size": 2, + "preserve_newlines": true, + "max_preserve_newlines": 2, + "brace_style": "collapse,preserve-inline", + "space_after_anon_function": false +} From 705f981d22c8fe195bcef9c71a61844ae1412736 Mon Sep 17 00:00:00 2001 From: Thanh Tran Date: Sun, 12 Feb 2017 02:54:01 +0700 Subject: [PATCH 7/7] Update components directives article --- .../article-1480153229.component.js | 39 +++++---- .../templates/article-1480153229.html | 21 ++--- cms/articles/index.js | 83 ++++++++++++------- 3 files changed, 87 insertions(+), 56 deletions(-) diff --git a/cms/articles/1480153229/article-1480153229.component.js b/cms/articles/1480153229/article-1480153229.component.js index 784b1ad..6f39b75 100644 --- a/cms/articles/1480153229/article-1480153229.component.js +++ b/cms/articles/1480153229/article-1480153229.component.js @@ -5,7 +5,6 @@ import highlight from 'highlight.js'; import { xblogTableContentService } from 'xblog-cores/modules'; import { resourceUtils } from 'xblog-cores/utils'; - export var article1480153229Component = Component({ selector: 'article', templateUrl: './templates/article-1480153229.html', @@ -17,25 +16,38 @@ export var article1480153229Component = Component({ DomSanitizer, xblogTableContentService, - function (sanitizer, tableContentService) { + function(sanitizer, tableContentService) { this.id = 1480153229; this.sanitizer = sanitizer; this.tableContentService = tableContentService; } ], - ngOnInit: function () { + ngOnInit: function() { this.tableContents = this.tableContentService .getBuilder() - .addHeadings([ - { id: 'What is Component?', name: 'What is Component?' }, - { id: 'Component\'s Metadata Properties', name: 'Component\'s Metadata Properties' }, - { id: 'What is Directive?', name: 'What is Directive?' }, - { id: 'Directive\'s Metadata Properties', name: 'Directive\'s Metadata Properties' } - ]) - .addSubHeadings([ - { headingId: 'my-heading', id: 'my-subheading', name: 'My subheading' }, + .addHeadings([{ + id: 'What is Component?', + name: 'What is Component?' + }, + { + id: 'Component\'s Metadata Properties', + name: 'Component\'s Metadata Properties' + }, + { + id: 'What is Directive?', + name: 'What is Directive?' + }, + { + id: 'Directive\'s Metadata Properties', + name: 'Directive\'s Metadata Properties' + } ]) + .addSubHeadings([{ + headingId: 'my-heading', + id: 'my-subheading', + name: 'My subheading' + }, ]) .build(); this.components = { @@ -64,7 +76,7 @@ export var article1480153229Component = Component({ }; }, - getCodeBlock: function (getter, lang) { + getCodeBlock: function(getter, lang) { var _langs = lang ? [lang] : ['javascript', 'html', 'css']; var _codeBlock = highlight.highlightAuto(getter().replace('', '').replace(/^ /gm, ''), _langs).value; @@ -73,7 +85,6 @@ export var article1480153229Component = Component({ } }); - function getSimpleComponent() { return ` import { Component } from '@angular/core'; @@ -113,4 +124,4 @@ function getSimpleDirective() { .Class({ constructor: function(){ } });`; -} \ No newline at end of file +} diff --git a/cms/articles/1480153229/templates/article-1480153229.html b/cms/articles/1480153229/templates/article-1480153229.html index 94dae62..b1135ef 100644 --- a/cms/articles/1480153229/templates/article-1480153229.html +++ b/cms/articles/1480153229/templates/article-1480153229.html @@ -13,20 +13,16 @@

What is Component?


-

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular - components. Angular components are a subset of directives. Unlike directives, components always have a template and only - one component can be instantiated per an element in a template. A component controls a portion of the screen—a view—through - its associated template.

+

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component + can be instantiated per an element in a template. A component controls a portion of the screen—a view—through its associated template.


-

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that - a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

+

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.


-

In addition to the metadata configuration specified via the Component, components can control their runtime behavior - by implementing various Life-Cycle hooks.

+

In addition to the metadata configuration specified via the Component, components can control their runtime behavior by implementing various Life-Cycle hooks.


@@ -45,9 +41,7 @@

What is Component?

  • A template that tells Angular how to render the component's view.
    • -

    Also, we have component Class that controls the appearance and behavior of a view through its template. - Here, we only have the root component, AppComponent. Since we don't need any application logic in the simple example, it's - empty. +

    Also, we have component Class that controls the appearance and behavior of a view through its template. Here, we only have the root component, AppComponent. Since we don't need any application logic in the simple example, it's empty.


    @@ -55,8 +49,7 @@

    What is Component?


    -

    Note: We are using angular 2 by Javascript, so we need at least constructor function. If we don't have the logic for component, we need - to create empty constructor function as above component.

    +

    Note: We are using angular 2 by Javascript, so we need at least constructor function. If we don't have the logic for component, we need to create empty constructor function as above component.


    @@ -142,4 +135,4 @@

    Directive's Metadata Properties

  • providers - list of providers available to this component and its children.
  • queries - configure queries that can be injected into the component.
  • selector - css selector that identifies this component in a template.
    • - \ No newline at end of file + diff --git a/cms/articles/index.js b/cms/articles/index.js index def1ef2..1221af6 100644 --- a/cms/articles/index.js +++ b/cms/articles/index.js @@ -1,7 +1,13 @@ -import { Class } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { + Class +} from '@angular/core'; +import { + BrowserModule +} from '@angular/platform-browser'; -import { ngxGridModule } from 'ngx-framework/modules'; +import { + ngxGridModule +} from 'ngx-framework/modules'; import { xblogCodePanelModule, @@ -13,24 +19,24 @@ import { xblogTableContentService } from 'xblog-cores/modules'; -import { article1480153229 } from './1480153229'; +import { + article1480153229 +} from './1480153229'; var _ARTICLES = [ article1480153229 ]; - export var ARTICLE_STORE = _init(); -var _ARTICLE_COMPONENTS = ARTICLE_STORE.LIST.map(function(article){ +var _ARTICLE_COMPONENTS = ARTICLE_STORE.LIST.map(function(article) { return article.content; }); - export var cmsArticlesModuleMetadata = Class({ - constructor: function cmsArticlesModuleMetadata(){ + constructor: function cmsArticlesModuleMetadata() { Object.assign(this, { - imports: [ + imports: [ BrowserModule, ngxGridModule, @@ -43,7 +49,7 @@ export var cmsArticlesModuleMetadata = Class({ xblogPostModule ], declarations: _ARTICLE_COMPONENTS, - providers: [ + providers: [ xblogTableContentService ], entryComponents: _ARTICLE_COMPONENTS, @@ -52,14 +58,13 @@ export var cmsArticlesModuleMetadata = Class({ } }); - function _init() { let _list = []; let _map = {}; _ARTICLES.forEach((article, index) => { - if(_validate(article, index)){ - if(!_map[article.id]){ + if (_validate(article, index)) { + if (!_map[article.id]) { _map[article.id] = article; _list.push(article); } @@ -68,28 +73,50 @@ function _init() { _list.sort((article1, article2) => article2.id - article1.id); - return { LIST: _list, MAP: _map }; + return { + LIST: _list, + MAP: _map + }; } function _validate(article, index) { let _message = `Article ${article.id} is missing`; try { - if(!article.id){ throw `Article is at index ${index} missing id`; } - if(!article.title){ throw `${_message} title`; } - if(!article.postedDate){ throw `${_message} postedDate`; } - if(!article.author){ throw `${_message} author`; } - if(!article.cover){ throw `${_message} cover`; } - if(!article.routeLink){ throw `${_message} routeLink`; } - if(!article.relatedArticles){ throw `${_message} relatedArticles`; } - if(!article.tags){ throw `${_message} tags`; } - if(!article.description){ throw `${_message} description`; } - if(!article.content){ throw `${_message} content`; } - } - catch(ex){ + if (!article.id) { + throw `Article is at index ${index} missing id`; + } + if (!article.title) { + throw `${_message} title`; + } + if (!article.postedDate) { + throw `${_message} postedDate`; + } + if (!article.author) { + throw `${_message} author`; + } + if (!article.cover) { + throw `${_message} cover`; + } + if (!article.routeLink) { + throw `${_message} routeLink`; + } + if (!article.relatedArticles) { + throw `${_message} relatedArticles`; + } + if (!article.tags) { + throw `${_message} tags`; + } + if (!article.description) { + throw `${_message} description`; + } + if (!article.content) { + throw `${_message} content`; + } + } catch (ex) { console.log(ex); - return false; + return false; } return true; -} \ No newline at end of file +}