Angular 权威教程 | 第3章 Angular 工作原理
2017-05-21 本文已影响266人
东东少将
第一个重要概念：Angular应用是由组件构成的。 可以将组件理解为一种教浏览器认识新HTML标签的方式。
应用
一个Angular应用其实就是一棵由组件构成的树。
在这棵树的根结点，最顶层的组件就是应用本身。 它会在浏览器启动（也叫引导）应用的时候被渲染
- 树型结构，被渲染时，递归渲染下级组件
- 可组合的。于小组件构建大组件
库存管理系统
分解成三个高层级组件
- 主导航组件
- 面包屑导航组件
- 产品列表组件
- 产品图片
- 产品分类
- 价格显示
应用树状图
产品数据模型
Angular不要求使用指定的数据模型库,支持多种不同的数据模型（和数据架构）
/**
Provides a `Product` object
Product类不依赖Angular中的任何东西，它只是一个我们会在应用中用到的数据模型
/
class Product {
constructor(
public sku: string,
public name: string,
public imageUrl: string,
public department: string[],
public price: number) {
}
}
组件
“应用”本身就是一个顶层组件，并且我们把应用划分成了细粒度的组件。
组成
- 组件注解
- 视图
- 控制器
// 一个基本的顶层应用InventoryApp（库存管理系统）
// @Component被称作注解。 它给紧随其后的类（InventoryApp） 添加了一些元数据
@Component({
selector: 'inventory-app',
template: `
<div class="inventory-app">
(Products will go here soon)
</div>
`
})
class InventoryApp {
// Inventory logic here}
组件注解
@Component 注解是对组件进行配置的地方。 一般来说，@Component 会配置你的组件如何与外界交互
组件selector
// Angular会使用我们定义的InventoryApp组件来实现这个标签的功能
<inventory-app></inventory-app>
// 匹配一个以组件名为属性的普
通div元素
<div inventory-app></div>
组件template
@Component({selector: 'inventory-app',
//定义组件所用的HTML模板
template: `
<div class="inventory-app">
(Products will go here soon)
</div>
`
})
添加产品
// 创建一个Product
let newProduct = new Product(
'NICEHAT', // sku
'A Nice Black Hat', // name
'resourcesimages/products/black-hat.jpg', // imageUrl
['Men', 'Accessories', 'Hats'], // department
29.99); // pric
一般情况下， 函数传递不超过5个参数。 另一种做法是将Product类的构造函数修改为接收一个配置对象， 这样就不必记住参数的顺序。
new Product({sku: "MYHAT", name: "A green hat"})
class InventoryApp {
product: Product;
constructor() {
let newProduct = new Product(
'NICEHAT',
'A Nice Black Hat',
'resourcesimages/products/black-hat.jpg',
['Men', 'Accessories', 'Hats'],
29.99);
this.product = newProduct;
}
}
// 简洁版
// 1. 添加了一个 constructor。 当 Angular 创建这个组件的实例时，
// 会调用这个 constructor。 组件进行初始化
// 2. 声明了一个实例变量。在 InventoryApp 的实例中定义了一个名叫 product 的属性，
// 用于保存 Product 对象。
// 3. 给 product 属性赋值了一个 Product 实例。 在 constructor 中，
// 我们创建了一个 Product 的实例， 并把它赋值给 product 实例变量
class InventoryApp {
product: Product;
constructor() {
this.product = new Product(
'NICEHAT',
'A Nice Black Hat',
'resourcesimages/products/black-hat.jpg',
['Men', 'Accessories', 'Hats'],
29.99);
}
}
用模板绑定来查看产品
@Component({
selector: 'inventory-app',
template: `
<div class="inventory-app">
// 花括号中的内容是一个表达式 可以这样{{ count + 1 }}
<h1>{{ product.name }}</h1>
<span>{{ product.sku }}</span>
</div>
`
})
添加更多产品
// 把 InventoryApp 中的一个 Product 属性修改
为 Product 数组
class InventoryApp {
// Array<Product>
products: Product[];
constructor() {
this.products = [];
}
}
// 创建一些 Product
class InventoryApp {
products: Product[];
constructor() {
this.products = [new Product(
'MYSHOES',
'Black Running Shoes',
'resourcesimages/products/black-shoes.jpg',
['Men', 'Shoes', 'Running Shoes'],
109.99),
new Product(
'NEATOJACKET',
'Blue Jacket',
'resourcesimages/products/blue-jacket.jpg',
['Women', 'Apparel', 'Jackets & Vests'],
238.99),
new Product(
'NICEHAT',
'A Nice Black Hat',
'resourcesimages/products/black-hat.jpg',
['Men', 'Accessories', 'Hats'],
29.99)
];
}
选择一个产品
// 给InventoryApp定义一个新方法productWasSelected， 用来响应用户对产品的选择
(待续……)
用<products-list>列出产品
产品列表组件
设置ProductsList的@Component配置项
组件的输入
组件的输出
触发自定义事件
编写ProductsList的控制器类
编写ProdctsList的视图模板
完整的ProductsList组件
产品条目组件
产品条目的组件配置
产品条目组件的定义类
产品条目组件的template
完整的ProductRow代码清单
产品图片组件
价格展示组件
产品分类组件
创建NgModule并启动应用
启动应用
