angular引入其他的库

1. 安装库

npm i jquery@3.1.1 –save
npm i bootstrap@3.3.7 –save

2. 安装后typescript才会认识引入的库

npm i @types/jquery --save-dev
npm i @types/bootstrap --save-dev

3. 把安装的库引入到项目中，在angular-cli.json中引入

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"

],

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

创建其他组件

1. 导航栏组件navbar，底部组件footer，查询表单组件search，轮播图组件carousel，产品信息组件product，星级评价组件

ng g component navbar
ng g component footer
ng g component search
ng g component carousel
ng g component product
ng g component product
ng g component stars

2. 这样生成的组件会生成在app文件夹下，并且会自动生成4个文件，并且在app.module.ts中声明
3. 在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">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>