环境: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 componentproduct.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>

@angular/cli项目构建--组件的更多相关文章

  1. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  2. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  3. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  4. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  5. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  6. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  7. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  8. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  9. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. LVC函数重要参数 EDT_CLL_CB:退出可编辑单元格时回调

    6. I_GRID_SETTINGS 参数属性该参数用于设置Grid相关参数(打印.单元格回调):类型为:LVC_S_GLAY,该结构包括:01) COLL_TOP_P:最小化 TOP_OF_PAGE ...

  2. Python之常用模块(re,时间,random,os,sys,序列化模块)(Day20)

    一.时间模块 #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time() 获取当前时间戳 在Python中表示时间的三种方式:时间戳,元组(s ...

  3. hostname -f 失败解决办法

    $ hostname fzk $ uname -n fzk 当 hostname -f 时报错:未搜索到主机名 产生这个原因时因为  /etc/hosts和/etc/sysconfig/network ...

  4. Shell编程之while循环和until循环

    一.当型和直到型循环 1.while循环语句 while < 条件表达式 > do 指令... done while循环执行流程对应的逻辑图 2.until循环语句 until < ...

  5. HTTP协议—常见的HTTP响应状态码解析

    常见的HTTP响应状态码解析 1XX Informational(信息性状态码) 2XX Success(成功状态码) 3XX Redirection(重定向状态码) 4XX Client Error ...

  6. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  7. Linux 多线程编程实例

    一.多线程 VS 多进程 和进程相比,线程有很多优势.在Linux系统下,启动一个新的进程必须分配给它独立的地址空间,建立众多的数据表来维护代码段和数据.而运行于一个进程中的多个线程,他们之间使用相同 ...

  8. Grafana连接Prometheus监控Docker平台

    Grafana是一款开源的分析平台. Grafana allows you to query, visualize, alert on and understand your metrics no m ...

  9. hql join

    文章一: 1.用hql语句 ` String hql="select student.id, student.name ,class.name from student映射实体类名 as s ...

  10. linux 安装mysql服务

    1.检查是否已安装,grep的-i选项表示匹配时忽略大小写 rpm -qa|grep -i mysql *可见已经安装了库文件,应该先卸载,不然会出现覆盖错误.注意卸:载时使用了--nodeps选项, ...