Angular基础(四) 创建Angular应用

 

应用(Application)是由组件构成的树。树的根部是最顶层的组件即应用本身，启动的时候，浏览器会最先渲染顶层组件，然后根据树形结构，迭代渲染子组件。组件是可装配的，可以互相组合以构成更大的组件。本篇作者介绍了创建一个Angular应用的思路和过程。

 

一、介绍

要编写Angular应用是一个产品列表界面，先要从组件树的角度分析页面构成：

包含导航条、面包屑、产品列表三部分，产品列表又可进一步分割成单个产品->产品图片、价格、分类等。最终组件的树形结构为：

 

二、创建过程

a) 首先在app文件夹创建Product Model，数据模型包含的属性有sku、name、 imageUrl、department、price。同级文件夹下有app.component组件，在它的ts文件中初始化Product的数组products，作为界面显示的假数据。html文件代码为：

接下来会创建product-list组件，[productList]=”products”这样的写法表示将当前组件中的products属性传递给product-list组件的productList属性。(onProductSelected)="productWasSelected($event)"表示product-list组件的onProductSelected事件被触发时，调用的是当前组件的productWasSelected方法。

b)product-list组件的ts代码中，用于接收父组件传递过来的products，onProductSelected则是要输出的事件，在click事件被触发时，代码this.onProductSelected.emit(product)可以将onProductSelected“发射”出去，emit真是很形象的说法，类似C#的回调函数吧。

 

html模板文件主要负责遍历传递进来的products，并传递给它的子组件product-row。

c)product-row组件又可细分为product-image、product-department、price-display三个子组件。product-row的得到product数据后，将其分配给三个组件，对于price-display组件，直接传递了product.price属性。

d) 这样整理之后，理清了跟着写代码时混乱的思绪，再复制随书代码中的样式文件和资源文件。另外还有一些必要的代码vs code插件已经生成了，比如app.module.ts中，导出这些组件并添加到@NgModule中的代码。这个文件中还通过bootstrap:[AppComponent]设定了要加载的第一个组件为AppComponent。

 

 

 

三、启动过程

在使用Angular-CLI的ng serve命令启动时，Angular-CLI会从.angular-cli.json中读取启动文件，默认为main.ts，main.ts为整个程序的入口，这个文件中又设定了要加载的第一个模块，本例中为./app/app.module，即AppModule，app.module.ts中又设定了要加载的组件，然后便是迭代加载整个组件树了。

 

学习资料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda