发表于： 2017-05-18 22:08:31
1 1213
今天完成的事情：
依赖注入，注入服务
明天计划的事情：
各种绑定和管道
①.5-2 事件绑定
②.5-3 Dom属性绑定
③.5-4 html属性
④.5-5 双向绑定
⑤.5-6 响应式编程
⑥.5-7 管道
遇到的问题：
nothing
just time
收获：
听了一下午老大讲的面向对象编程和函数式编程这个思维
功能拆分
这一波收益很大
面向对象编程思维和函数基本结构
因为之前从来没了解过，耿直的烂代码（硬核代码）
明确自己的路线
写东西
一定要有组件方面的重要性思想，不能跟着PM走
代码区分重要性，按重要性走
防止需求突变，死爹。
function （传参）{
函数做出相应
return 参数
}
// 服务组件
import { Injectable } from '@angular/core';
@Injectable()
// @Injectable()用于注入ProductService这个服务
export class ProductService {
// 开放一个类名为ProductService的类
constructor() { }
// 默认的构造函数
getProduct(): Product {
// 此处应该是 查询 数据库 信息返回product 因为是练习。所以模拟传输 返回一个 Product 类。
return new Product(0, 'IPhone7', 5899, "最新款苹果手机")
}
}
export class Product {
// 暴露一个Product的类
constructor(
// 构造函数中声明他的属性和类型
public id: number,
// public 对应属性的 类型
public title: string,
public price: number,
public desc: string
) {
}
}
// product1组件
import { Product, ProductService } from './../shared/product.service';
// 引用Product这个类 注入 这个ProductService服务
import { Component, OnInit } from '@angular/core';
@Component({
// 装饰器
selector: 'app-product1',
templateUrl: './product1.component.html',
styleUrls: ['./product1.component.css']
})
export class Product1Component implements OnInit {
// 暴露一个Product1Component 的类 OnInit初始化这个类
product: Product;
// 初始化product 类型为 Product
constructor(private ProductService:ProductService) { }
// 在构造函数中 声明 一个私有的 ProductService类 其服务类型 为 ProductService 从 product.service.ts调接口
ngOnInit() {
// 初始化钩子 在执行函数的时候调用一次
this.product = this.ProductService.getProduct();
// 给这里的product附上ProductService服务的.getProduct()函数
}
}
<div>
<h1>商品详情</h1>
<h2>名称:{{product.title}}</h2>
<h2>价格:{{product.price}}</h2>
<h2>描述:{{product.desc}}</h2>
<h2>id:{{product.id}}</h2>
</div>
这个没啥好说明的了。
返回列表
评论