Angular4.0_页面搭建

开发页面布局

app.component.hrml

<app-search></app-search>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="clo-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和footer组件

navbar.component.html

<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=".navbar-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 navbar-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.component.html

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

styles.css 是项目的全局样式文件

body{
  padding-top: 70px;
}

开发search和carousel组件

search.component.html

<form name="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="number" 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.component.html

<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" class="slide-image" alt="">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" class="slide-image" alt="">
    </div>
    <div class="item">
      <img src="http://placehold.it/800x300" class="slide-image" 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>

carousel.component.css

.slide-image{
  width: 100%;
}

app.component.css

.container{
  width: 100%;
}

.row{
  flex-direction: row;
}
.col-md-3{
  width: 30%;
}

.clo-md-9{
  width: 60%;
  float: right;
  margin-left: 5%;
  margin-right: 5%;
}

开发product组件

开发上面的组件其实与angular无关，但是开发product组件就需要使用angular相关的东西了

product.component.ts

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

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

  private products:Array<Product>;

  constructor() { }

  ngOnInit() {
    this.products = [
      new Product(1,'第一个商品',1.99,3.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你",["电子产品","硬件设备","其他"]),
      new Product(2,'第二个商品',2.99,2.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你的",["硬件设备","其他"]),
      new Product(3,'第三个商品',3.99,1.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你的",["电子产品","硬件设备"]),
      new Product(4,'第四个商品',4.99,2.0,"这是第一商品，随便是到手京东卡是你的拉克丝等你的",["电子产品","其他"]),
      new Product(5,'第五个商品',5.99,3.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你拉的",["电子产品","硬件设备","其他"]),
      new Product(6,'第六个商品',6.99,4.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你拉的",["电子产品","硬件设备","其他"])
    ];
    this.products.push(new Product(7,'第七个商品',6.99,4.5,"这是第一商品，随便是到手京东卡是你的拉克丝等你拉屎的",["电子产品","硬件设备","其他"]));
  }

}

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

  }
}

product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img src="http://placehold.it/320x150">
    <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>

现在前端的知名框架比如angular，Vue，React，更或者微信小程序，ReactNative都是通过数据绑定驱动页面的，我们接触的第一个angular语法叫*ngFor="let product of products"，类似于for循环创建页面

开发stars组件

stars.component.html

<p>
  <span  *ngFor="let star of stars" class="glyphicon glyphicon-star"
         [class.glyphicon-star-empty]="star"></span>
  <span>{{rating}}星</span>
</p>

*ngFor 指令循环创建组件

class="glyphicon glyphicon-star" 显示星星

[class.glyphicon-star-empty]="star" 这是数据绑定的一种，属性绑定，根据star的状态true或者false，是否加载这样的样式

stars.component.html中的数据由stars.component.ts传入

stars.component.ts

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

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

  @Input()
  private rating:number = 0;

  private stars:boolean[];

  constructor() { }

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

}

@Input() 是输入属性，接收父组件输入的值
private rating:number=0 是星星的数值， ngOnInit中的this.stars是星星样式是否空心实心的依据

product.component.html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <!--//属性绑定-->
    <img [src]="imgUrl">
    <div class="caption">
      <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>

product组件调用app-stars组件时，把数据传入进去。

效果