博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
@angular/cli项目构建--组件
阅读量:5821 次
发布时间:2019-06-18

本文共 4342 字,大约阅读时间需要 14 分钟。

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

布局

navBar.html

默认的全局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


Angular打造竞拍网站

footer{ text-align: center;}

search.html

轮播图组件

.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
) { }}

在这个ts文件中进行商品(对象)的实例化(http replace here):

export class ProductComponent implements OnInit {  public products: Array
; 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

商品图片

¥{
{product.price}}

{
{product.title}}

{

{product.desc}}

星级评分组件

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')      }    }  }}

{

{rating}}星

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/7782769.html

你可能感兴趣的文章
logging模块学习:basicConfig配置文件
查看>>
Golang 使用 Beego 与 Mgo 开发的示例程序
查看>>
ntpdate时间同步
查看>>
+++++++子域授权与编译安装(一)
查看>>
asp.net怎样在URL中使用中文、空格、特殊字符
查看>>
路由器发布服务器
查看>>
实现跨交换机VLAN间的通信
查看>>
jquery中的data-icon和data-role
查看>>
python例子
查看>>
环境变量(总结)
查看>>
ios之UILabel
查看>>
Java基础之String,StringBuilder,StringBuffer
查看>>
1月9日学习内容整理:爬虫基本原理
查看>>
安卓中数据库的搭建与使用
查看>>
AT3908 Two Integers
查看>>
渐变色文字
查看>>
C++ 0X 新特性实例(比较常用的) (转)
查看>>
node生成自定义命令(yargs/commander)
查看>>
各种非算法模板
查看>>
node-express项目的搭建并通过mongoose操作MongoDB实现增删改查分页排序(四)
查看>>