Angular——在线竞拍demo
??上篇博客写了开发angular应用前的准备工作，今天就来讲解一下angular应用开发的一个小demo——“在线竞拍”的主页面，详情请见下文！
??因为是用angular开发“在线竞拍”主页面，所以就利用组件化的思想，先把主界面划分为7个组件，分别为：导航栏、搜索列表、产品信息、轮播图、脚注、星级评价，界面图片和每个组件的详细设计如下！
1.逻辑 <!--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.后台: 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>
){
}
}
<!--用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>
?? *ngFor="let product of products"
??含义：循环products属性，把每次循环的元素放到product变量里。中间那段HTML里就可以使用product这个变量，可以用插值表达式显示product里的一些属性。 ??语法：let 变量 of 后台数组
??星级评价组件设置主要要解决6个问题，所以下边就根据解决的问题来讲解这部分。 <span class="glyphicon glyphicon-star "></span>
2、如何显示空心的星型？ <span class="glyphicon glyphicon-star glyphicon-star-empty"></span>
3、如何显示5颗星？ 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颗星中有的实有的空？ <span *ngFor="let star of stars" class="glyphicon glyphicon-star "
[class.glyphicon-star-empty]="star"></span>
◆样式绑定
??◇后台（stars.component.ts）代码： //加一个input装饰器:星级评价组件StarsComponent的rating属性应该由它的父组件传递给它
@Input()
//定义一个属性：用来接收产品组件传给它的星级评价数值，默认值是0
private rating:number=0;
??◇前台（stars.component.html）代码： <span>{{rating}}星</span>
??◆产品的前台：用属性绑定 <!--星级评价的rating属性由产品的rating属性传进去-->
<app-stars [rating]="product.rating"></app-stars>
ngOnInit() {
this.stars=[];
for(let i=1;i<=5;i++){
this.stars.push(i>this.rating);
}
//初始化数组
//this.stars=[false,false,true,true];
}
7、星级评价整体代码 <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哦！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |