前言

  上篇博客写了开发angular应用前的准备工作，今天就来讲解一下angular应用开发的一个小demo——“在线竞拍”的主页面，详情请见下文！

正文

  因为是用angular开发“在线竞拍”主页面，所以就利用组件化的思想，先把主界面划分为7个组件，分别为：导航栏、搜索列表、产品信息、轮播图、脚注、星级评价，界面图片和每个组件的详细设计如下！

★导航栏

1.逻辑

  此导航条是响应式的，当屏幕缩小，导航栏中的三个链接会消失掉，多出一个按钮来，点击按钮，三个链接会按下拉的方式呈现出来。设置导航条主要是bootstrap的一些样式，和angular关系不大。

2.代码:（navbar.component.html）

<!--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()方法
  ngOnInit()方法是组件生命周期钩子中的一个钩子，这个方法会在组件被实例化后调用一次，初始化组件中的数据
◆ngFor命令

*ngFor="let product of products"

  含义：循环products属性，把每次循环的元素放到product变量里。中间那段HTML里就可以使用product这个变量，可以用插值表达式显示product里的一些属性。
  作用：循环一个数组，在页面上反复生成一段html

  语法：let 变量 of 后台数组

★★★星级评价

  星级评价组件设置主要要解决6个问题，所以下边就根据解决的问题来讲解这部分。
1、如何显示星型？

<span class="glyphicon glyphicon-star "></span>

2、如何显示空心的星型？

<span class="glyphicon glyphicon-star glyphicon-star-empty"></span>

3、如何显示5颗星？
  解决此问题就要用数据驱动页面啦，其核心思想就是——要想在前台页面显示5颗星，就要在后台有一个包含5个元素的数组
  ◆后台（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颗星中有的实有的空？
  解决此问题使用属性绑定中的样式绑定，到第四步此时前台（stars.component.html）代码如下：

<span *ngFor="let star of stars" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star"></span>

◆样式绑定
  ◇样式绑定是属性绑定中的一种
  ◇ [class.glyphicon-star-empty]=”star”解析：
  class后边绑定的东西是一个css样式，它的值要绑定到当前star变量上
  ◇上面整句代码含义：
  span这个html元素是否出现这样一个css样式是由star这个属性决定的，如果star是true那么span元素就会多出这个样式来，false就不会出现这个样式

5、如何将商品的星级评价的数值传递给星级评价组件?
  此问题涉及到了两个组件（产品product和星级评价stars）,要把产品组件的星级值传递给心机评价组件告诉星型哪些空哪些实！使用“组件的输入属性”先在后台添加装饰器，然后再定义属性；前台则用插值表达式绑定


  ◆星级评价组件：主要使用“组件的输入属性”先在后台添加装饰器，然后再定义属性；前台则用“插值表达式”绑定

  ◇后台（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>

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];
  }

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