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=\"product \">商品名称</label>
    <input type=\"text\" id=\"product \" 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=\" :$(\'.carousel\').carousel(\'prev\')\">
    <span class=\"glyphicon glyphicon-chevron-left\"></span>
  </a>
  <a class=\"right carousel-control\" href=\" :$(\'.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. }}</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 {to 64String} 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  : 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);
    }
  }

}