【5】【1】Auguar开发一个在线竞拍项目-CFANZ编程社区

【5】【1】Auguar开发一个在线竞拍项目_html

Angular 开发要有组件思想

通过分析可以将本程序分为7个组件

其中app 就是自带的那个我们不用创建

可以在项目目录下 cmd下使用

ng g component 组件名称命令

创建组件

组件名分别为 search navbar footer carousel product starts

创建完整后可以看到app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { CarouselComponent } from './carousel/carousel.component';
import { ProductComponent } from './product/product.component';
import { StarsComponent } from './stars/stars.component';
import { SearchComponent } from './search/search.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

开发app组件

我们修改 app.component.html代码为

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

效果如下

【5】【1】Auguar开发一个在线竞拍项目_html_02

开发 navbar 和footer.

我们只需编辑 navbar 对应的 navbar.component.html即可

此处遇到了些坑bootstarp无法显示下拉菜单

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
      <span class="sr-only">切换导航</span>                <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" id="example-navbar-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>

然后在最外层也就是全局的styles.css 下面添加这句话

body{
  padding-top: 70px;
}

编写footer.component.html

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

search.component.html 编写serarch

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

carousel.component.css

slide-image{
  width: 100%;
}

开发Product组件

数据我们暂时使用本地数值修改

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 {
  public products: Array<Product>;

  constructor() {
  }

  ngOnInit() {
    this.products = [
      new Product(1, '第一商品', 1.99, 3.55, '这是一个商品，是我再学习Angular入门到项目时创建的', [ '电子产品', '硬件设备']),
      new Product(2, '第二商品', 2.99, 2.55, '这是二个商品，是我再学习Angular入门到项目时创建的', [ '电子产品']),
      new Product(3, '第三商品', 3.99, 1.55, '这是三个商品，是我再学习Angular入门到项目时创建的', [  '硬件设备']),
      new Product(4, '第四商品', 4.99, 4.55, '这是四个商品，是我再学习Angular入门到项目时创建的', [ '办公设施', '学习资源']),
      new Product(5, '第五商品', 5.99, 5.55, '这是五个商品，是我再学习Angular入门到项目时创建的', [ '办公设施']),
      new Product(6, '第六商品', 6.99, 7.55, '这是六个商品，是我再学习Angular入门到项目时创建的', [ '学习资源'])
    ];
    this.products.push(new Product(7, '第七商品', 7.99, 7.55, '这是七个商品，是我再学习Angular入门到项目时创建的', [ '新增资源']));
  }

}

export class Product {
  constructor(public id: number,
              public title: string,
              public price: number,
              public rating: number,
              public desc: string,
              public categirues: 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" alt="">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a href="#">{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars></app-stars>
    </div>
  </div>
</div>

为了美观我们在app.component.html 下增加一点margin-bottom

<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 carousel-container">
        <app-carousel></app-carousel>
      </div>
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
  </div>
</div>
<app-footer></app-footer>

app.component.css

.carousel-container{
  margin-bottom: 40px;
}

stars 组件开发

数据需要从Product中取出来然后放到starts 中所以第一步给之前的product.component.html

app-starts组件那句话修改为

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

stars.component.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 {
  public starts: boolean[];
  @Input()
  public rating = 0;

  constructor() {
  }

  ngOnInit() {
    // this.starts = [false, false, true, true, true];
    this.starts = [];
    for (let i = 1; i <= 5; i++) {
      this.starts.push(i > this.rating);
    }

  }

}

stars.component.html

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

至此效果就如下图所示了

【5】【1】Auguar开发一个在线竞拍项目_html_03

如果感觉自己动手有困难

【5】 【1】Auguar开发一个在线竞拍项目

【5】【1】Auguar开发一个在线竞拍项目