-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathangular2_basic.html
More file actions
106 lines (106 loc) · 26.5 KB
/
angular2_basic.html
File metadata and controls
106 lines (106 loc) · 26.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Angular 2 Basics - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="A practical introduction to Angular 2 core concepts: components, templates, metadata, data binding, directives, services, dependency injection, and modules."><meta name=keywords content="Angular 2,components,template,metadata,data binding,directive,service,dependency injection,module"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/angular2_basic.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/angular2_basic.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Angular 2 Basics"><meta property="og:description" content="A practical introduction to Angular 2 core concepts: components, templates, metadata, data binding, directives, services, dependency injection, and modules."><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-07-15T17:13:18+08:00"><meta property="article:modified_time" content="2017-07-15T17:13:18+08:00"><meta property="article:tag" content="Angular 2"><meta itemprop=name content="Angular 2 Basics"><meta itemprop=description content="A practical introduction to Angular 2 core concepts: components, templates, metadata, data binding, directives, services, dependency injection, and modules."><meta itemprop=datePublished content="2017-07-15T17:13:18+08:00"><meta itemprop=dateModified content="2017-07-15T17:13:18+08:00"><meta itemprop=wordCount content="655"><meta itemprop=keywords content="Angular 2,components,template,metadata,data binding,directive,service,dependency injection,module"><meta name=twitter:card content="summary"><meta name=twitter:title content="Angular 2 Basics"><meta name=twitter:description content="A practical introduction to Angular 2 core concepts: components, templates, metadata, data binding, directives, services, dependency injection, and modules."><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Angular 2 Basics</h1><div class=post-meta><span class=post-time>2017-07-15</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>655 words </span><span class=more-meta>4 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#1-components>1. Components</a><ul><li><a href=#11-components-and-example-code>1.1 Components and Example Code</a></li><li><a href=#12-component-tree>1.2 Component tree</a></li><li><a href=#13-component-communication-and-data-flow>1.3 Component Communication and Data Flow</a></li><li><a href=#14-component-lifecycle-and-hooks>1.4 Component Lifecycle and Hooks</a></li></ul></li><li><a href=#2-directives>2. Directives</a><ul><li><a href=#21-attribute-directives>2.1 Attribute Directives</a></li><li><a href=#22-structural-directives>2.2 Structural Directives</a></li><li><a href=#23-custom-directives>2.3 Custom Directives</a></li></ul></li><li><a href=#3-services>3. Services</a></li><li><a href=#4-dependency-injection>4. Dependency Injection</a><ul><li><a href=#41-dependency-injection>4.1 Dependency Injection</a></li><li><a href=#42-hierarchical-dependency-injection>4.2 Hierarchical Dependency Injection</a></li></ul></li><li><a href=#5-modules>5. Modules</a><ul><li><a href=#51-file-level-modules>5.1 File-Level Modules</a></li><li><a href=#52-application-modules>5.2 Application Modules</a></li></ul></li></ul></nav></div></div><div class=post-content><p><img src=/images/2017071501.jpg alt></p><h2 id=1-components>1. Components</h2><p><img src=/images/2017071502.jpg alt></p><h3 id=11-components-and-example-code>1.1 Components and Example Code</h3><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#75715e>// Decorator
</span></span></span><span style=display:flex><span><span style=color:#66d9ef>@Component</span>({
</span></span><span style=display:flex><span> <span style=color:#75715e>// metadata
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>selector</span><span style=color:#f92672>:</span> <span style=color:#e6db74>'hello'</span>,
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Define the component's template
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>template</span><span style=color:#f92672>:</span> <span style=color:#e6db74>'<p>{{greeting}}</p>
</span></span></span><span style=display:flex><span><span style=color:#e6db74>})
</span></span></span><span style=display:flex><span><span style=color:#e6db74>
</span></span></span><span style=display:flex><span><span style=color:#e6db74>// Component class
</span></span></span><span style=display:flex><span><span style=color:#e6db74>export class HelloComponent {
</span></span></span><span style=display:flex><span><span style=color:#e6db74> private greeting: string;
</span></span></span><span style=display:flex><span><span style=color:#e6db74> constructor() {
</span></span></span><span style=display:flex><span><span style=color:#e6db74> this.greeting = '</span><span style=color:#a6e22e>Hello</span>, <span style=color:#a6e22e>Welcome</span> <span style=color:#a6e22e>to</span> <span style=color:#a6e22e>Angular</span> <span style=color:#ae81ff>2</span><span style=color:#f92672>!</span><span style=color:#960050;background-color:#1e0010>'</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><p><img src=/images/2017071505.jpg alt></p><ol><li>Decorator: <code>@Component</code></li></ol><p>Decorators attach metadata to a class so Angular knows how to treat it as a component.</p><ol start=2><li>Metadata</li></ol><p>Metadata describes configuration such as the selector, template, and dependencies.</p><ol start=3><li>Template</li></ol><p>You can define an inline template in metadata, or reference an external template file with <code>templateUrl</code>.</p><ol start=4><li>Data binding:</li></ol><ol><li><p>Interpolation: <code>{{variableName}}</code> for rendering component data in templates.</p></li><li><p>Property binding: <code>[prop]=\"value\"</code> to pass data from a component class to its template (or to a child component input).</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span> <<span style=color:#f92672>input</span> <span style=color:#960050;background-color:#1e0010>[</span><span style=color:#a6e22e>message</span><span style=color:#960050;background-color:#1e0010>]=</span><span style=color:#e6db74>"myData"</span> />
</span></span></code></pre></div><ol start=3><li>Event binding: <code>(event)=\"handler($event)\"</code> to pass user interactions from the template back to the component class.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span> <<span style=color:#f92672>input</span> <span style=color:#960050;background-color:#1e0010>(</span><span style=color:#a6e22e>keyup</span><span style=color:#960050;background-color:#1e0010>)=</span><span style=color:#e6db74>"handle($event)"</span> />
</span></span></code></pre></div><ol start=4><li>Two-way binding: <code>[(ngModel)]</code> for synchronized updates between template state and component state.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span> <<span style=color:#f92672>input</span> <span style=color:#960050;background-color:#1e0010>[(</span><span style=color:#a6e22e>ngModel</span><span style=color:#960050;background-color:#1e0010>)]=</span><span style=color:#e6db74>"myData"</span> />
</span></span></code></pre></div><h3 id=12-component-tree>1.2 Component tree</h3><p><img src=/images/2017071506.jpg alt></p><h3 id=13-component-communication-and-data-flow>1.3 Component Communication and Data Flow</h3><p><img src=/images/2017071503.jpg alt></p><p><img src=/images/2017071507.jpg alt></p><h3 id=14-component-lifecycle-and-hooks>1.4 Component Lifecycle and Hooks</h3><p><img src=/images/2017071504.jpg alt></p><ol><li><p><code>constructor</code>: initialize fields and inject dependencies.</p></li><li><p><code>OnChanges</code>: runs when input properties change, including the first binding.</p></li><li><p><code>OnInit</code>: runs once after the first <code>OnChanges</code>; good for startup logic.</p></li><li><p><code>DoCheck</code> / change detection: runs during change detection cycles.</p></li><li><p><code>OnDestroy</code>: cleanup phase (unsubscribe, detach handlers, release resources).</p></li></ol><h2 id=2-directives>2. Directives</h2><p>A component is a directive with its own template.</p><h3 id=21-attribute-directives>2.1 Attribute Directives</h3><p>Attribute directives change the appearance or behavior of existing elements (for example, styles).</p><h3 id=22-structural-directives>2.2 Structural Directives</h3><p>Structural directives change DOM layout, for example <code>*ngIf</code> inserts or removes nodes.</p><h3 id=23-custom-directives>2.3 Custom Directives</h3><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#75715e>// Custom directive highlight
</span></span></span><span style=display:flex><span><span style=color:#75715e>// Import Directive, ElementRef, and Renderer to control element rendering.
</span></span></span><span style=display:flex><span><span style=color:#66d9ef>import</span> { <span style=color:#a6e22e>Directive</span>, <span style=color:#a6e22e>ElementRef</span>, <span style=color:#a6e22e>Renderer</span> } <span style=color:#66d9ef>from</span> <span style=color:#e6db74>'@angular/core'</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>@Directive</span>({
</span></span><span style=display:flex><span> <span style=color:#a6e22e>selector</span><span style=color:#f92672>:</span> <span style=color:#e6db74>"[highlight]"</span> <span style=color:#75715e>// Square brackets indicate that the directive is used on element attributes
</span></span></span><span style=display:flex><span>})
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>export</span> <span style=color:#66d9ef>class</span> <span style=color:#a6e22e>HighlightDirective</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>(<span style=color:#66d9ef>private</span> <span style=color:#a6e22e>el</span>: <span style=color:#66d9ef>ElementRef</span>, <span style=color:#66d9ef>private</span> <span style=color:#a6e22e>renderer</span>:<span style=color:#66d9ef>Renderer</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>renderer</span>.<span style=color:#a6e22e>setElementStyle</span>(<span style=color:#a6e22e>el</span>.<span style=color:#a6e22e>nativeElement</span>, <span style=color:#e6db74>'backgroundColor'</span>, <span style=color:#e6db74>'pink'</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><h2 id=3-services>3. Services</h2><p>A service is a class that encapsulates reusable business logic, such as logging.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>export</span> <span style=color:#66d9ef>class</span> <span style=color:#a6e22e>LoggerService</span> {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>constructor</span>() {}
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>debug</span>(<span style=color:#a6e22e>msg</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>msg</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>error</span>(<span style=color:#a6e22e>msg</span>: <span style=color:#66d9ef>string</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>error</span>(<span style=color:#a6e22e>msg</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><h2 id=4-dependency-injection>4. Dependency Injection</h2><h3 id=41-dependency-injection>4.1 Dependency Injection</h3><p>Dependency injection (DI) is the mechanism Angular uses to provide dependencies (such as services) to components and other classes. In practice, Angular creates service instances and stores them in injectors so they can be reused.</p><p><img src=/images/2017071508.jpg alt></p><p>Example:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>@Component</span>({
</span></span><span style=display:flex><span> <span style=color:#a6e22e>selector</span><span style=color:#f92672>:</span> <span style=color:#e6db74>'hello'</span>,
</span></span><span style=display:flex><span> <span style=color:#a6e22e>template</span><span style=color:#f92672>:</span> <span style=color:#e6db74>'<p>{{greeting}}</p>
</span></span></span><span style=display:flex><span><span style=color:#e6db74>
</span></span></span><span style=display:flex><span><span style=color:#e6db74> // Dependency injection configuration
</span></span></span><span style=display:flex><span><span style=color:#e6db74> providers:[LoggerService]
</span></span></span><span style=display:flex><span><span style=color:#e6db74>})
</span></span></span><span style=display:flex><span><span style=color:#e6db74>
</span></span></span><span style=display:flex><span><span style=color:#e6db74>export class HelloComponent {
</span></span></span><span style=display:flex><span><span style=color:#e6db74> private greeting: string;
</span></span></span><span style=display:flex><span><span style=color:#e6db74>
</span></span></span><span style=display:flex><span><span style=color:#e6db74> // Constructor injection: Angular resolves LoggerService from the injector
</span></span></span><span style=display:flex><span><span style=color:#e6db74> constructor(logger: LoggerService){
</span></span></span><span style=display:flex><span><span style=color:#e6db74> this.greeting = '</span><span style=color:#a6e22e>Hello</span>, <span style=color:#a6e22e>Angular</span> <span style=color:#ae81ff>2</span><span style=color:#e6db74>';
</span></span></span><span style=display:flex><span><span style=color:#e6db74> logger.debug('</span><span style=color:#a6e22e>Constructor</span> <span style=color:#a6e22e>complete</span><span style=color:#960050;background-color:#1e0010>'</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span>}
</span></span></code></pre></div><h3 id=42-hierarchical-dependency-injection>4.2 Hierarchical Dependency Injection</h3><p>Services provided in a parent scope can be consumed by that component and its children.</p><p><img src=/images/2017071509.jpg alt></p><h2 id=5-modules>5. Modules</h2><h3 id=51-file-level-modules>5.1 File-Level Modules</h3><ol><li>Common framework modules:</li></ol><ol><li><p>Core module: @angular/core</p></li><li><p>Common module: @angular/common</p></li><li><p>Form module: @angular/forms</p></li><li><p>Network module: @angular/http</p></li><li><p>Other modules</p></li></ol><ol start=2><li>Using modules:</li></ol><p>Before using a framework module, import it explicitly:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#66d9ef>import</span> { <span style=color:#a6e22e>Http</span> } <span style=color:#66d9ef>from</span> <span style=color:#e6db74>"@angular/http"</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>import</span> { <span style=color:#a6e22e>Component</span> } <span style=color:#66d9ef>from</span> <span style=color:#e6db74>"@angular/core"</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>import</span> { <span style=color:#a6e22e>Directive</span> } <span style=color:#66d9ef>from</span> <span style=color:#e6db74>"@angular/core"</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>import</span> { <span style=color:#a6e22e>ElementRef</span>, <span style=color:#a6e22e>Renderer</span> } <span style=color:#66d9ef>from</span> <span style=color:#e6db74>"@angular/core"</span>;
</span></span></code></pre></div><h3 id=52-application-modules>5.2 Application Modules</h3><p><img src=/images/2017071510.jpg alt></p><ol><li><p>Group related components, services, and directives into feature modules by responsibility.</p></li><li><p>Module interaction:</p></li></ol><p>By default, components can only use declarations that are visible in their module context. To use declarations from another module, import that module.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#75715e>// @NgModule declares the module
</span></span></span><span style=display:flex><span><span style=color:#66d9ef>@NgModule</span>({
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Wrap components or directives
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>declarations</span><span style=color:#f92672>:</span> [
</span></span><span style=display:flex><span> <span style=color:#a6e22e>AppComponent</span>,
</span></span><span style=display:flex><span> <span style=color:#a6e22e>HelloComponent</span>,
</span></span><span style=display:flex><span> <span style=color:#a6e22e>SomeDirective</span>
</span></span><span style=display:flex><span> ],
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Dependency injection service
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>providers</span><span style=color:#f92672>:</span> [ <span style=color:#a6e22e>LoggerService</span> ],
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Import other modules
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>imports</span><span style=color:#f92672>:</span> [<span style=color:#a6e22e>OtherModule</span> ],
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Set root component
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>bootstrap</span><span style=color:#f92672>:</span> [ <span style=color:#a6e22e>AppComponent</span>],
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Export the directives or modules exposed by this module for calls by other components
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>exports</span><span style=color:#f92672>:</span>[ <span style=color:#a6e22e>SomeDirective</span> ]
</span></span><span style=display:flex><span>})
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#66d9ef>export</span> <span style=color:#66d9ef>class</span> <span style=color:#a6e22e>AppModule</span> {}
</span></span></code></pre></div><p>After importing another module, you can use its exported components/directives and services provided through DI.</p><ol start=3><li>Root, feature, shared, and core modules</li></ol><p>An Angular app is usually split by responsibility:</p><ul><li><code>root module</code> as the app entry point</li><li><code>feature modules</code> for domain-specific functionality</li><li><code>shared modules</code> for reusable UI building blocks</li><li><code>core modules</code> for app-wide singleton services and infrastructure</li></ul><p><img src=/images/20170715011.jpg alt></p></div><footer class=post-footer><div class=post-tags><a href=/en/tags/angular-2/>Angular 2</a></div><nav class=post-nav><a class=prev href=/typescript_basic.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">TypeScript Introduction</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/js-number.html><span class="next-text nav-default">Js Number</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>