网站建设学生兼职刷赞抖音推广网站
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>
效果如下
开发 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.tsimport {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>
至此 效果就如下图所示了
如果感觉自己动手有困难
可以下载源码查看 下载地址如下
https://download.csdn.net/download/mp624183768/10688832