安装依赖包

–save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西。

npm install jquery --save
npm install bootstrap --save
安装类型描述文件，因为是js，ts无法识别
npm install @types/jquery --save
npm install @types/bootstrap --save

.angular-cli.json

添加全局加载"scripts": ["../node_modules/jquery/dist/jquery.js","../node_modules/bootstrap/dist/js/bootstrap.js"],

用组件化的思路去解决问题

ng g component navbar,footer,search,carousel,product,stars 缩写
然后写html和css,略   

app.component.html整体布局

<app-navbar></app-navbar>
<div class="container"><div class="row"><div class="col-md-3"><app-search></app-search></div><div class="col-md-9"><div class="row carousel-container"><app-carousel></app-carousel></div><div class="row"><app-product></app-product></div></div></div>
</div>
<app-footer></app-footer>

路由

解决问题：如何根据不同的url显示不同视图？

需求：新增单个商品视图状态，点击切换，替换Home视图状态（carousel组件和Product组件封装），此时Home所在位置也是一个插座，根据不同状态切换视图状态

解决思路：

依赖注入

解决问题：完善商品详情视图，添加ProductSerivce。

数据绑定

输入框搜索（响应式编程处理输入事件（关键字保存），管道过滤商品列表）

评论功能添加

评论内容的添加，平均星级比值更新

表单搜索

商品名称，价格，类别