angular引入其他的庫(kù)

1. 安裝庫(kù)

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

2. 安裝后typescript才會(huì)認(rèn)識(shí)引入的庫(kù)

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

3. 把安裝的庫(kù)引入到項(xiàng)目中，在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"
],

創(chuàng)建其他組件

1. 導(dǎo)航欄組件navbar，底部組件footer，查詢表單組件search，輪播圖組件carousel，產(chǎn)品信息組件product，星級(jí)評(píng)價(jià)組件

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. 這樣生成的組件會(huì)生成在app文件夾下，并且會(huì)自動(dòng)生成4個(gè)文件，并且在app.module.ts中聲明
3. 在app.component.html中設(shè)計(jì)頁(yè)面的簡(jiǎn)要布局，分配每個(gè)組件的大體位置，上下為頂部的導(dǎo)航欄組件和底部組件，左側(cè)占據(jù)小部分的查詢表單組件，右側(cè)占據(jù)大部分，上方為輪播圖組件，下方為商品的信息組件

<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>