开发页面布局
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组件时,把数据传入进去。
效果