angular5projects.pdf资源-CSDN文库

共192个文件

jpg：143个

html：27个

gif：16个

Angualr

5星 · 超过95%的资源需积分: 10 156 浏览量 2018-03-08 20:34:05 上传评论收藏 13.97MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

angular5 projects.pdf （192个子文件）

springer_epub.css 54KB

A458962_1_En_22_Fig2_HTML.gif 51KB

A458962_1_En_9_Fig1_HTML.gif 45KB

A458962_1_En_9_Fig4_HTML.gif 43KB

A458962_1_En_22_Fig1_HTML.gif 32KB

A458962_1_En_16_Fig3_HTML.gif 31KB

A458962_1_En_19_Fig5_HTML.gif 28KB

A458962_1_En_16_Fig1_HTML.gif 28KB

A458962_1_En_12_Fig1_HTML.gif 26KB

A458962_1_En_13_Fig1_HTML.gif 26KB

A458962_1_En_13_Fig6_HTML.gif 24KB

A458962_1_En_13_Fig8_HTML.gif 18KB

A458962_1_En_21_Fig4_HTML.gif 16KB

A458962_1_En_BookFrontmatter_Figf_HTML.gif 16KB

A458962_1_En_21_Fig1_HTML.gif 7KB

sidebar.gif 183B

contact.gif 96B

A458962_1_En_12_Chapter.html 144KB

A458962_1_En_BookFrontmatter_OnlinePDF.html 126KB

A458962_1_En_15_Chapter.html 95KB

A458962_1_En_18_Chapter.html 93KB

A458962_1_En_19_Chapter.html 88KB

A458962_1_En_22_Chapter.html 87KB

A458962_1_En_8_Chapter.html 75KB

A458962_1_En_13_Chapter.html 64KB

A458962_1_En_11_Chapter.html 56KB

A458962_1_En_9_Chapter.html 44KB

A458962_1_En_16_Chapter.html 43KB

A458962_1_En_4_Chapter.html 36KB

A458962_1_En_14_Chapter.html 36KB

A458962_1_En_3_Chapter.html 33KB

A458962_1_En_20_Chapter.html 31KB

A458962_1_En_7_Chapter.html 30KB

A458962_1_En_2_Chapter.html 29KB

A458962_1_En_1_Chapter.html 28KB

A458962_1_En_BookBackmatter_OnlinePDF.html 26KB

A458962_1_En_6_Chapter.html 22KB

A458962_1_En_23_Chapter.html 22KB

A458962_1_En_5_Chapter.html 21KB

A458962_1_En_21_Chapter.html 21KB

A458962_1_En_17_Chapter.html 12KB

A458962_1_En_10_Chapter.html 10KB

A458962_1_En_24_Chapter.html 9KB

ACoverHTML.html 426B

A978-1-4842-3279-8_CoverFigure.jpg 308KB

A458962_1_En_1_Fig6_HTML.jpg 119KB

A458962_1_En_18_Fig4_HTML.jpg 67KB

A458962_1_En_23_Fig1_HTML.jpg 61KB

A458962_1_En_6_Fig1_HTML.jpg 60KB

A458962_1_En_23_Fig3_HTML.jpg 58KB

A458962_1_En_23_Fig2_HTML.jpg 58KB

A458962_1_En_21_Fig7_HTML.jpg 55KB

A458962_1_En_21_Fig5_HTML.jpg 52KB

A458962_1_En_5_Fig1_HTML.jpg 49KB

A458962_1_En_16_Fig5_HTML.jpg 48KB

A458962_1_En_4_Fig1_HTML.jpg 48KB

A458962_1_En_22_Fig4_HTML.jpg 47KB

A458962_1_En_3_Figa_HTML.jpg 47KB

A458962_1_En_1_Fig5_HTML.jpg 47KB

A458962_1_En_1_Fig7_HTML.jpg 45KB

A458962_1_En_10_Fig1_HTML.jpg 44KB

A458962_1_En_1_Fig8_HTML.jpg 44KB

A458962_1_En_5_Fig2_HTML.jpg 44KB

A458962_1_En_12_Fig12_HTML.jpg 42KB

A458962_1_En_15_Fig2_HTML.jpg 41KB

A458962_1_En_14_Fig2_HTML.jpg 41KB

A458962_1_En_12_Fig8_HTML.jpg 40KB

A458962_1_En_5_Fig5_HTML.jpg 39KB

A458962_1_En_5_Fig6_HTML.jpg 39KB

A458962_1_En_7_Fig3_HTML.jpg 37KB

A458962_1_En_18_Fig9_HTML.jpg 36KB

A458962_1_En_1_Fig4_HTML.jpg 35KB

A458962_1_En_18_Fig2_HTML.jpg 35KB

A458962_1_En_9_Fig3_HTML.jpg 35KB

A458962_1_En_3_Fig1_HTML.jpg 33KB

A458962_1_En_15_Fig1_HTML.jpg 32KB

A458962_1_En_10_Fig2_HTML.jpg 32KB

A458962_1_En_14_Fig4_HTML.jpg 32KB

A458962_1_En_18_Fig7_HTML.jpg 31KB

A458962_1_En_5_Fig3_HTML.jpg 31KB

A458962_1_En_2_Fig2_HTML.jpg 31KB

A458962_1_En_18_Fig5_HTML.jpg 30KB

A458962_1_En_1_Fig3_HTML.jpg 30KB

A458962_1_En_8_Fig2_HTML.jpg 29KB

A458962_1_En_17_Fig1_HTML.jpg 28KB

A458962_1_En_18_Fig1_HTML.jpg 28KB

A458962_1_En_12_Fig11_HTML.jpg 28KB

A458962_1_En_BookFrontmatter_Figc_HTML.jpg 27KB

A458962_1_En_20_Fig1_HTML.jpg 25KB

A458962_1_En_18_Fig3_HTML.jpg 25KB

A458962_1_En_24_Fig1_HTML.jpg 24KB

A458962_1_En_19_Fig7_HTML.jpg 24KB

A458962_1_En_12_Fig10_HTML.jpg 23KB

A458962_1_En_16_Fig8_HTML.jpg 23KB

A458962_1_En_1_Fig1_HTML.jpg 23KB

A458962_1_En_12_Fig3_HTML.jpg 22KB

A458962_1_En_7_Fig1_HTML.jpg 22KB

A458962_1_En_9_Fig2_HTML.jpg 21KB

A458962_1_En_18_Fig6_HTML.jpg 21KB

A458962_1_En_21_Fig2_HTML.jpg 21KB

共 192 条

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>More Components</title><link href="springer_epub.css" type="text/css" rel="styleSheet"/></head><body><div class="ChapterContextInformation"><div class="ContextInformation" id="b978-1-4842-3279-8_12"><div class="ChapterCopyright">© Mark Clow 2018</div><span class="ContextInformationAuthorEditorNames"><span class="Author"><span class="AuthorName">Mark Clow</span></span></span><span class="ContextInformationBookTitles"><span class="BookTitle" xml:lang="en">Angular 5 Projects</span></span><span class="ChapterDOI"><a href="A458962_1_En_12_Chapter.html">https://doi.org/10.1007/978-1-4842-3279-8_12</a></span></div></div><div class="MainTitleSection"><h1 class="ChapterTitle" xml:lang="en">12. More Components</h1></div><div class="AuthorGroup"><div class="AuthorNames"><span class="Author"><span class="AuthorName">Mark Clow</span><sup>1 <span class="ContactIcon"/></sup></span></div><div class="Affiliations"><div class="Affiliation" id="Aff2"><span class="AffiliationNumber">(1)</span><div class="AffiliationText">Sandy Springs, Georgia, USA</div></div><div class="ClearBoth"> </div></div></div><div class="Fulltext"><div id="Par1" class="Para">The purpose of this chapter is to enhance your knowledge of components further with more advanced topics.</div><div id="Sec1" class="Section1 RenderAsSection1"><h2 class="Heading">Components and Child Components</h2><div id="Par2" class="Para">As you know, a component is a building block in a user interface. An Angular application always has an Application (or root) component. This component (like other components) has a tag in the HTML, and Angular bootstraps into that component. This Application component (like other components) can contain other (child) components.</div><div id="Par3" class="Para">So, <span id="ITerm1">components </span> can contain other components. This is known as <span id="ITerm2">composition </span>. As I put it in an earlier chapter, components are like LEGO bricks for the UI. <span class="EmphasisTypeItalic">Composition</span> is the art of composing an application using these LEGO bricks together. I’ll introduce composition with an example.</div><div id="Par4" class="Para">When you write a single page application, the convention is that you have a hierarchy of components—a composition. Figure <span class="InternalRef"><a href="#Fig1">12-1</a></span> shows an example.<div class="Figure" id="Fig1"><div class="MediaObject" id="MO1"><img src="A458962_1_En_12_Fig1_HTML.gif" alt="A458962_1_En_12_Fig1_HTML.gif"/></div><div class="Caption" xml:lang="en"><div class="CaptionContent"><span class="CaptionNumber">Figure 12-1</span><div class="SimplePara">Hierarchy of <span id="ITerm3">components </span> </div></div></div></div> </div><div id="Par5" class="Para">When you’re coding with a <span id="ITerm4">composition </span>, you must take great care to store the data (known as <span class="EmphasisTypeItalic">state</span>) in the correct place so it’s never repeated (stored twice). Pete Hunt at Facebook wrote a superb article about this at <span class="ExternalRef"><a href="https://facebook.github.io/react/docs/thinking-in-react.html"><span class="RefSource"> <span class="EmphasisFontCategoryNonProportional">https://facebook.github.io/react/docs/thinking-in-react.html</span> </span></a></span>. The article is about React, but the same rules apply to Angular.</div></div><div id="Sec2" class="Section1 RenderAsSection1"><h2 class="Heading">Data Flowing Downwards</h2><div id="Par6" class="Para">Data should flow <span id="ITerm5">downwards </span> from higher-level components to lower-level components. When you create a component that receives data from outside, you must explicitly tell Angular to expect that data as input, using the <span class="EmphasisFontCategoryNonProportional">@Input</span> decorator. You place the <span class="EmphasisFontCategoryNonProportional">@Input</span> decorator next to the instance variable to which the data will be injected from outside.</div><div id="Par7" class="Para">When you pass data into a component from the outside, you pass that data into the component using input properties.</div><div id="Par8" class="Para">Sometimes you may want the name of the input property to be different from the name of the instance variable to which it will be injected. That’s when you need to use an <span class="EmphasisFontCategoryNonProportional">alias</span>, which allows you to specify the input property name. The <span class="EmphasisFontCategoryNonProportional">alias</span> may be specified inside parentheses in the <span class="EmphasisFontCategoryNonProportional">@Input</span> decorator. Figure <span class="InternalRef"><a href="#Fig2">12-2</a></span> shows an example.<div class="Figure" id="Fig2"><div class="MediaObject" id="MO2"><img src="A458962_1_En_12_Fig2_HTML.jpg" alt="A458962_1_En_12_Fig2_HTML.jpg"/></div><div class="Caption" xml:lang="en"><div class="CaptionContent"><span class="CaptionNumber">Figure 12-2</span><div class="SimplePara">Passing data to car components</div></div></div></div> </div><div id="Par9" class="Para">This component will pass data from the application to car components. This will be example more-components-ex100:<div class="OrderedList"><ol><li class="ListItem"><span class="ItemNumber">1.</span><div class="ItemContent"><div><div id="Par10" class="Para ParaOneEmphasisChild"> <span class="EmphasisTypeItalic">Build the app using the CLI</span>: Use the following command:</div><div id="Par11" class="Para"> <div class="ProgramCode" id="PC1"><div class="FixedLine">ng new more-components-ex100 --inline-template --inline-style</div></div> </div></div></div><div class="ClearBoth"> </div></li><li class="ListItem"><span class="ItemNumber">2.</span><div class="ItemContent"><div><div id="Par12" class="Para"> <span class="EmphasisTypeItalic">Start</span> <span class="EmphasisFontCategoryNonProportional">ng serve</span>: Use the following code:</div><div id="Par13" class="Para"> <div class="ProgramCode" id="PC2"><div class="FixedLine">cd more-components-ex100</div><div class="FixedLine">ng serve</div></div> </div></div></div><div class="ClearBoth"> </div></li><li class="ListItem"><span class="ItemNumber">3.</span><div class="ItemContent"><div><div id="Par14" class="Para ParaOneEmphasisChild"> <span class="EmphasisTypeItalic">Open app</span>: Open a web browser and navigate to localhost:4200. You should see “welcome to app!”</div></div></div><div class="ClearBoth"> </div></li><li class="ListItem"><span class="ItemNumber">4.</span><div class="ItemContent"><div><div id="Par15" class="Para ParaOneEmphasisChild"> <span class="EmphasisTypeItalic">Edit app class</span>: Edit app.component.ts and change it to the following:</div><div id="Par16" class="Para"> <div class="ProgramCode" id="PC3"><div class="LineGroup"><div class="FixedLine">import { Component } from '@angular/core';</div><div class="FixedLine">import { ICar } from './icar';</div></div><div class="LineGroup"><div class="FixedLine">@Component({</div><div class="FixedLine"> selector: 'app-root',</div><div class="FixedLine"> template: `</div><div class="FixedLine"> <car *ngFor="let car of cars" [theCar]="car"></car></div><div class="FixedLine"> `,</div><div class="FixedLine"> styles: []</div><div class="FixedLine">})</div><div class="FixedLine">export class AppComponent {</div><div class="FixedLine"> cars:Array<ICar> = [</div><div class="FixedLine"> {make: '

评论收藏

内容反馈