| 前言 |
上篇博客写了开发angular应用前的准备工作，今天就来讲解一下angular应用开发的一个小demo——“在线竞拍”的主页面，详情请见下文！
| 正文 |
因为是用angular开发“在线竞拍”主页面，所以就利用组件化的思想，先把主界面划分为7个组件，分别为：导航栏、搜索列表、产品信息、轮播图、脚注、星级评价，界面图片和每个组件的详细设计如下！
| ★导航栏 |
1.逻辑
此导航条是响应式的，当屏幕缩小，导航栏中的三个链接会消失掉，多出一个按钮来，点击按钮，三个链接会按下拉的方式呈现出来。设置导航条主要是bootstrap的一些样式，和angular关系不大。
2.代码:（navbar.component.html@H_301_60@）
<!--inverse表示导航条是黑底白色的：，fixed-top表示：固定到顶部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!--设置一个大容器-->
<div class="container">
<!--生成一个写程序名字-->
<div class="navbar-header">
<!--加一个button：作用就是在屏幕缩小时，点击按钮可以让三个子菜单以下拉的形式出现-->
<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>
3.效果图
| ★脚注 |
脚注部分很简单，就是在页面底部显示的程序小说明，代码（footer.component.html）如下
<div class="container">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>angular学习之旅中的小demo</p>
</div>
</div>
</footer>
</div>
| ★搜索表单 |
搜索表单这部分也没涉及到angular的知识，主要就是添加三个搜索框，让分别可以按商品名称、商品价格、商品类别进行搜索，代码（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>
| ★★产品列表 |
1.后台:
①定义对象:
从此组件就开始涉及angular啦，所以写之前先理思路，因为我们是在用typescript写程序，所以需要有一个对象来封装我的产品信息，这个对象有一个构造函数，在构造函数声明产品所需要的构造属性
②声明数组:
在ProductComponent控制器中声明一个数组存储页面上展示商品信息的数据；然后在ngOnInit()方法实例化数组，是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据。
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
//private imgUrl='http://placehold.it/320x150';
//ProductComponent控制器中：声明一个数组存储页面上展示商品信息的数据
private products:Array<Product>;
constructor() { }
//ngOnInit()方法是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据
ngOnInit() {
//初始化数组
this.products=[
new Product(1,"第一个商品",1.99,3.5,"这是第一个商品，是我在学习angular时创建的",["电子产品","硬件设备"]),new Product(2,"第二个商品",2.99,2.5,"这是第二个商品，是我在学习angular时创建的",["图书",new Product(3,"第三个商品",3.99,4.5,"这是第三个商品，是我在学习angular时创建的",new Product(4,"第四个商品",4.99,1.5,"这是第四个商品，是我在学习angular时创建的",["电子产品"]),new Product(5,"第五个商品",5.99,"这是第五个商品，是我在学习angular时创建的",new Product(6,"第六个商品",6.99,"这是第六个商品，是我在学习angular时创建的","硬件设备"])
]
}
}
//封装产品信息
export class Product{
constructor(
//商品id
public id:number,//商品名称
public title:string,//商品价格
public price:number,//星级评价
public rating:number,//商品描述
public desc:string,//商品类别:数组型
public categories:Array<string>
){
}
}
2.前台:
<!--用angular中的ngFor指令：products属性和后台的products属性绑到一起，指令含义：循环products属性，把每次循环的元素放到product变量里。中间那段HTML里就可以使用product这个变量，来用插值表达式显示product里的一些属性--> <div *ngFor="let product of products" class="col-md-4 col-md-4 col-md-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> <!--星级评价的rating属性由产品的rating属性传进去--> <app-stars [rating]="product.rating"></app-stars> </div> </div> </div>
3.知识点
◆ngOnInit()方法@H_301_60@
ngOnInit()方法是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据
◆ngFor命令@H_301_60@
*ngFor="let product of products"
含义@H_301_60@：循环products属性，把每次循环的元素放到product变量里。中间那段HTML里就可以使用product这个变量，可以用插值表达式显示product里的一些属性。
作用@H_301_60@：循环一个数组，在页面上反复生成一段html
语法@H_301_60@：let 变量 of 后台数组@H_301_60@
| ★★★星级评价 |
星级评价组件设置主要要解决6个问题，所以下边就根据解决的问题来讲解这部分。
1、如何显示星型？
<span class="glyphicon glyphicon-star "></span>
2、如何显示空心的星型？
<span class="glyphicon glyphicon-star glyphicon-star-empty"></span>
3、如何显示5颗星？
解决此问题就要用数据驱动页面啦，其核心思想就是——要想在前台页面显示5颗星，就要在后台有一个包含5个元素的数组@H_301_60@
◆后台（stars.component.ts）代码
export class StarsComponent implements OnInit {
//定义一个Boolean类型的数组：装5颗星
private stars:boolean[];
constructor() { }
ngOnInit() {
//初始化数组
this.stars=[true,true,true];
}
}
◆前台（stars.component.html）代码——即用ngFor命令绑定后台数组
<span *ngFor="let star of stars" class="glyphicon glyphicon-star glyphicon-star-empty"></span>
4、如何让5颗星中有的实有的空？
解决此问题使用属性绑定中的样式绑定@H_301_60@，到第四步此时前台（stars.component.html）代码如下：
<span *ngFor="let star of stars" class="glyphicon glyphicon-star "
[class.glyphicon-star-empty]="star"></span>
◆样式绑定@H_301_60@
◇样式绑定是属性绑定中的一种
◇ [class.glyphicon-star-empty]=”star”解析：
class后边绑定的东西是一个css样式，它的值要绑定到当前star变量上
◇上面整句代码含义：
span这个html元素是否出现这样一个css样式是由star这个属性决定的，如果star是true那么span元素就会多出这个样式来，false就不会出现这个样式
5、如何将商品的星级评价的数值传递给星级评价组件?
此问题涉及到了两个组件（产品product和星级评价stars）,要把产品组件的星级值传递给心机评价组件告诉星型哪些空哪些实！使用“组件的输入属性”@H_301_60@先在后台添加装饰器，然后再定义属性；前台则用插值表达式绑定
◆星级评价组件：主要使用“组件的输入属性”@H_301_60@先在后台添加装饰器，然后再定义属性；前台则用“插值表达式”@H_301_60@绑定
//加一个input装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它
@Input()
//定义一个属性：用来接收产品组件传给它的星级评价数值，默认值是0
private rating:number=0;
<span>{{rating}}星</span>
<!--星级评价的rating属性由产品的rating属性传进去-->
<app-stars [rating]="product.rating"></app-stars>
6、如何根据商品的星级值来决定星型是空心的还是实心的？/font>
此问题其实就是把第3步中写死的值不写死，而是根据传进来的rating来判断是true还是false，修改星级评价后台
ngOnInit() {
this.stars=[];
for(let i=1;i<=5;i++){
this.stars.push(i>this.rating);
}
//初始化数组
//this.stars=[false,false,true,true];
}
<p> <!--class后边绑定的东西是一个css样式，它的值要绑定到当前star变量上--> <!--整句含义：span这个html元素是否出现这样一个css样式是由star这个属性决定的，如果star是true那么span元素就会多出这个样式来，false就不会出现这个样式--> <span *ngFor="let star of stars" class="glyphicon glyphicon-star " [class.glyphicon-star-empty]="star"></span> <span>{{rating}}星</span> </p>
import { Component,OnInit,Input } from '@angular/core';
@Component({
selector: 'app-stars',templateUrl: './stars.component.html',styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit {
//加一个input装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它
@Input()
//定义一个属性：用来接收产品组件传给它的星级评价数值，默认值是0
private rating:number=0;
//定义一个Boolean类型的数组：装5颗星
private stars:boolean[];
constructor() { }
ngOnInit() {
this.stars=[];
for(let i=1;i<=5;i++){
this.stars.push(i>this.rating);
}
//初始化数组
//this.stars=[false,false,true,true];
}
}
| 小结 |
到此处学习angular的小demo就完成了，有体会到angular和jQuery的区别吗？不防可以体会一下哟，小菜也会在下篇博客区别angular和jQuery哦！
