@angular/cli项目构建--组件

环境：nodeJS,git,angular/cli

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g @angular/cli@1.4.9

ng new angularDemo

ng -v

ng set --global packageManager=cnpm

npm install jquery --save

npm install bootstrap --save

bootstrap style 如果用cnpm安装则需要npm安装才可在idea智能提示

npm install @types/jquery --save-dev

npm install @types/bootstrap --save-dev

npm install FortAwesome/Font-Awesome --save//图标样式fa

使jQuery&&Bootstrap生效导入（.angular-cli.json）

"styles": [
        "styles.css",
        "../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/_jquery@3.2.1@jquery/dist/jquery.min.js",
        "../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js"
      ],

 

启动项目开发环境

ng serve or npm run start

生成组件

ng generate component navBar

ng g c search  product  stars foot

ng g c new-component --module app :如果有多个module

布局

<!--导航条-->
<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>
<!--/底部信息-->

navBar.html

<!--Bootstrap导航条-->
<nav class="navbar navbar-inverse navbar-fixed">
  <!--导航条内容容器-->
  <div class="container">
    <!--导航条头部-->
    <div class="navbar-header">
      <button class="navbar-toggle btn" data-toggle="collapse" data-target="#navbar-collapse-menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--//商标/Logo-->
      <a class="navbar-brand" href="javascript:void(0)">在线竞拍</a>
    </div>
    <!--/导航条头部-->
    <!--导航条列表菜单-->
    <div class="collapse navbar-collapse" id="navbar-collapse-menu">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">关于我们</a></li>
        <li><a href="javascript:void(0)">联系我们</a></li>
        <li><a href="javascript:void(0)">网站地图</a></li>
      </ul>
    </div>
    <!--/导航条列表菜单-->
  </div>
  <!--/导航条内容容器-->
</nav>
<!--/Bootstrap导航条-->

默认的全局css文件是/src/style.css当然也可以在配置文件中更改或者添加新的css文件

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.css";

@import "../node_modules/font-awesome/css/font-awesome.css";

每一个组件对应的css样式我们应该分开写,比如navbar的css写在navbar.component.css文件中

foot.html

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-md-12">
        <p>Angular打造竞拍网站</p>
      </div>
    </div>
  </footer>
</div>


footer{
  text-align: center;
}

search.html

<form role="form" name="searchForm">
  <div class="form-group">
    <label for="productTitle" class="control-label">商品名称 : </label>
    <input id="productTitle" type="text" class="form-control" placeholder="商品名称">
  </div>
  <div class="form-group">
    <label for="productPrice" class="control-label">商品价格 : </label>
    <input id="productPrice" type="number" class="form-control" placeholder="商品价格">
  </div>
  <div class="form-group">
    <label for="productCategory" class="control-label">商品类别 : </label>
    <select id="productCategory" class="form-control"></select>
  </div>
  <div class="form-group">
    <label for="productTitle" class="control-label">商品名称 : </label>
    <input type="submit" class="btn btn-primary btn-block" value="搜索">
  </div>
</form>

轮播图组件

<div class="carousel slide" data-ride="carousel">
  <!--轮播图导航区域-->
  <ol class="carousel-indicators">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>
  <!--/轮播图导航区域-->
  <!--轮播图片区域-->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
    </div>
  </div>
  <!--/轮播图片区域-->
  <!--轮播图控制按钮-->
  <a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
    <i class="glyphicon glyphicon-chevron-left"></i>
  </a>
  <a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
    <i class="glyphicon glyphicon-chevron-right"></i>
  </a>
  <!--/轮播图控制按钮-->
</div>

.slide-image{ width:100%; }

商品详情组件

product.component.ts

export class Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public rating: number,
    public desc: string,
    public categories: Array<string>
  ) {

  }
}

在这个ts文件中进行商品(对象)的实例化(http replace here)：

export class ProductComponent implements OnInit {

  public products: Array<Product>;

  constructor() {
  }

  ngOnInit() {
    this.products = [
      new Product(1, '第一个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(2, '第二个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(3, '第三个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(4, '第四个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(5, '第五个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']),
      new Product(6, '第六个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电'])
    ]
  }

}

在模块实例化的时候获取到商品对象列表,并传递到component模板中

ngOnInit()方法会在component实例化的时候自动调用一次,这个知识点稍后会更详细讲到

product.component.html

<div class="col-sm-4 col-md-4 col-lg-4" *ngFor="let product of products">
  <div class="thumbnail">
    <img src="http://placehold.it/320x150" alt="商品图片">
    <div class="caption">
      <h4 class="pull-right">￥{{product.price}}</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars></app-stars>
    </div>
  </div>
</div>

星级评分组件

把Production component的product.rating注入到Star Component中

export class StarsComponent implements OnInit {
  @Input()
  public rating: number;
  public stars = [];

  constructor() {
  }

  ngOnInit() {
    const full: number = Math.floor(this.rating);
    const half: number = Math.ceil(this.rating - full);
    const empty: number = 5 - full - half;
    for (let i = 0; i < 5; i++) {
      if (i < full) {
        this.stars.push('full');
      } else if (i === full && half !== 0) {
        this.stars.push('half')
      } else {
        this.stars.push('empty')
      }
    }
  }
}

<app-stars [rating]="product.rating"></app-stars>

<p>
  <i *ngFor="let star of stars" class="fa"
     [class.fa-star]="star==='full'"
     [class.fa-star-half-o]="star==='half'"
     [class.fa-star-o]="star==='empty'"
  ></i>
  <span>{{rating}}星</span>
</p>