@angular/cli项目构建--组件
环境:nodeJS,git,angular/cli
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @angular/cli@1.4.9
ng new angularDemo
ng -v
ng set --global packageManager=cnpm
npm install jquery --save
npm install bootstrap --save
bootstrap style 如果用cnpm安装则需要npm安装才可在idea智能提示
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
npm install FortAwesome/Font-Awesome --save//图标样式fa
使jQuery&&Bootstrap生效导入(.angular-cli.json)
"styles": [ "styles.css", "../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/_jquery@3.2.1@jquery/dist/jquery.min.js", "../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js" ],
启动项目开发环境
ng serve or npm run start
生成组件
ng generate component navBar
ng g c search product stars foot
ng g c new-component --module app :如果有多个module
布局
<!--导航条--> <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.html
<!--Bootstrap导航条--> <nav class="navbar navbar-inverse navbar-fixed"> <!--导航条内容容器--> <div class="container"> <!--导航条头部--> <div class="navbar-header"> <button class="navbar-toggle btn" data-toggle="collapse" data-target="#navbar-collapse-menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--//商标/Logo--> <a class="navbar-brand" href="javascript:void(0)">在线竞拍</a> </div> <!--/导航条头部--> <!--导航条列表菜单--> <div class="collapse navbar-collapse" id="navbar-collapse-menu"> <ul class="nav navbar-nav"> <li><a href="javascript:void(0)">关于我们</a></li> <li><a href="javascript:void(0)">联系我们</a></li> <li><a href="javascript:void(0)">网站地图</a></li> </ul> </div> <!--/导航条列表菜单--> </div> <!--/导航条内容容器--> </nav> <!--/Bootstrap导航条-->
默认的全局css文件是/src/style.css
当然也可以在配置文件中更改或者添加新的css文件
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../node_modules/font-awesome/css/font-awesome.css";
每一个组件对应的css样式我们应该分开写,比如navbar的css写在navbar.component.css文件中
foot.html
<div class="container"> <hr> <footer> <div class="row"> <div class="col-md-12"> <p>Angular打造竞拍网站</p> </div> </div> </footer> </div> footer{ text-align: center; }
search.html
<form role="form" name="searchForm"> <div class="form-group"> <label for="productTitle" class="control-label">商品名称 : </label> <input id="productTitle" type="text" class="form-control" placeholder="商品名称"> </div> <div class="form-group"> <label for="productPrice" class="control-label">商品价格 : </label> <input id="productPrice" type="number" class="form-control" placeholder="商品价格"> </div> <div class="form-group"> <label for="productCategory" class="control-label">商品类别 : </label> <select id="productCategory" class="form-control"></select> </div> <div class="form-group"> <label for="productTitle" class="control-label">商品名称 : </label> <input type="submit" class="btn btn-primary btn-block" value="搜索"> </div> </form>
轮播图组件
<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" alt="carousel" class="slide-image">
</div>
<div class="item">
<img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
</div>
<div class="item">
<img src="http://placehold.it/800x300" alt="carousel" class="slide-image">
</div>
</div>
<!--/轮播图片区域-->
<!--轮播图控制按钮-->
<a href="javascript:$('.carousel').carousel('prev')" class="left carousel-control">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a href="javascript:$('.carousel').carousel('next')" class="right carousel-control">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
<!--/轮播图控制按钮-->
</div>
.slide-image{ width:100%; }
商品详情组件
product.component.ts
export class Product { constructor( public id: number, public title: string, public price: number, public rating: number, public desc: string, public categories: Array<string> ) { } }
在这个ts文件中进行商品(对象)的实例化(http replace here):
export class ProductComponent implements OnInit { public products: Array<Product>; constructor() { } ngOnInit() { this.products = [ new Product(1, '第一个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']), new Product(2, '第二个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']), new Product(3, '第三个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']), new Product(4, '第四个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']), new Product(5, '第五个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']), new Product(6, '第六个商品', 899, 3.5, '这是一个垃圾电脑', ['电子产品', '家电']) ] } }
在模块实例化的时候获取到商品对象列表,并传递到component模板中
ngOnInit()
方法会在component实例化的时候自动调用一次,这个知识点稍后会更详细讲到
product.component.html
<div class="col-sm-4 col-md-4 col-lg-4" *ngFor="let product of products"> <div class="thumbnail"> <img src="http://placehold.it/320x150" alt="商品图片"> <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>
星级评分组件
把Production component
的product.rating
注入到Star Component
中
export class StarsComponent implements OnInit { @Input() public rating: number; public stars = []; constructor() { } ngOnInit() { const full: number = Math.floor(this.rating); const half: number = Math.ceil(this.rating - full); const empty: number = 5 - full - half; for (let i = 0; i < 5; i++) { if (i < full) { this.stars.push('full'); } else if (i === full && half !== 0) { this.stars.push('half') } else { this.stars.push('empty') } } } }
<app-stars [rating]="product.rating"></app-stars>
<p> <i *ngFor="let star of stars" class="fa" [class.fa-star]="star==='full'" [class.fa-star-half-o]="star==='half'" [class.fa-star-o]="star==='empty'" ></i> <span>{{rating}}星</span> </p>