Angular项目

ng g component xxx
app html代码：

<app-navbar></app-navbar>
<div class="container" style="padding-top: 70px">
  <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>

navbar:导航条

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navabr-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">在线竞拍</a>
    </div>
    <div class="collapse navbar-collapse navabr-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">网站地图</a></li>
      </ul>
    </div>
  </div>
</nav>

footer：页脚

<div class="container">
  <hr>
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>慕课网Angular入门实战</p>
      </div>
    </div>
  </footer>
</div>

search：搜索

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

carousel：轮播

<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 class="slide-image" src="http://placehold.it/800x300" alt=""/>
    </div>
    <div class="item">
      <img class="slide-image" src="http://placehold.it/800x300" alt=""/>
    </div>
    <div class="item">
      <img class="slide-image" src="http://placehold.it/800x300" alt=""/>
    </div>
  </div>
  <a class="left carousel-control" href="javascript:$('.carousel').carousel('prev')">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="javascript:$('.carousel').carousel('next')">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

product：产品
html代码：

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <!--[src]="imgUrl"：属性绑定-->
    <img [src]="imgUrl">
    <div class="caption">
      <!--{{product.price}}:插值表达式-->
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>
        {{product.desc}}
      </p>
    </div>
    <div>
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

ts代码：

import { Component, OnInit } from '@angular/core';
import {toBase64String} from "@angular/compiler/src/output/source_map";

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private products: Array<Product>;
  private imgUrl = 'http://placehold.it/320x150';
  constructor() { }

  ngOnInit() {
    /* 生命周期钩子
    *  组件实例化后，方法被调用一次
    *  初始化组件数据
    * */
    this.products = [
      new Product(1, '第一个商品', 1.99, 2.5, '这是第一个商品', ['电子产品', '硬件设备']),
      new Product(2, '第二个商品', 2.99, 3.5, '这是第二个商品', ['图书']),
      new Product(3, '第三个商品', 3.99, 4.5, '这是第三个商品', ['硬件设备']),
      new Product(4, '第四个商品', 4.99, 3.5, '这是第四个商品', ['电子产品', '硬件设备']),
      new Product(5, '第五个商品', 5.99, 2.5, '这是第五个商品', ['电子产品']),
      new Product(6, '第六个商品', 6.99, 3.5, '这是第六个商品', ['图书'])
    ];
  }

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

stars：星级评价
html代码：

<p>
  <!--[class.glyphicon-star-empty]="star":属性绑定-->
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star"></span>
  <!--{{rating}}:插值表达式-->
  <span> {{rating}}星</span>
</p>

ts代码：

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit {
  /*输入属性*/
  @Input()/*装饰器*/
  private rating: number;
  rating = 0;
  private stars: boolean[];
  constructor() { }

  ngOnInit() {
    this.stars = [];
    for ( let i = 1; i <= 5; i++) {
      this.stars.push(i > this.rating);
    }
  }

}