angular4学习笔记(第一章基础篇)

1.环境搭配

安装nodejs 使用npm -v 来查看版本
安装angular cli 使用命令(npm install -g @angular/cli) 使用 ng v 来查看版本
安装开发工具,使用的是 visual studio code
创建项目 ng new projectname
进入项目 cd projectname
启动项目 ng serve

2.认识angular项目的默认文件

3.开发准备

安装bootstrap、jquery
- npm install bootstrap --save(不指定版本) npm install [email protected] --save (指定版本)
- npm install jquery --save(不指定版本) npm install jquery@1.12.4 --save (指定版本)
在angular.json文件中导入
- "node_modules/jquery/dist/jquery.js"
- "node_modules/bootstrap/dist/js/bootstrap.js"
- "node_modules/bootstrap/dist/css/bootstrap.css"
安装描述文件（让ts能识别）
- npm install @types/jquery --save-dev
- npm install @types/bootstrap --save-dev
tips
- --save 是你发布之后还需要依赖的东西
- --save-dev 是你开发时候依赖的东西

组件创建

<!-- 导航栏组件 -->

ng g c navbar

<!-- 底边栏组件 -->

ng g c footer

<!-- 搜索栏组件 -->

ng g c search

<!-- 商品栏组件 -->

ng g c product

<!-- 轮播图组件 -->

ng g c carousel

<!-- 星级组件 -->

ng g c stars

app.component.html布局

<!-- 导航栏 -->
<app-navbar></app-navbar>
<!-- 中间栏 -->
<div class="container">
    <!-- 侧边搜索栏 -->
    <div class="col-md-3 col-xs-12 search-container">
      <app-search></app-search>
    </div>
    
    <!-- 右边内容栏 -->
    <div class="col-md-9 col-xs-12">
      <!-- 轮播图 -->
      <div class="row carousel-container">
        <app-carousel></app-carousel>
      </div>
      <!-- 商品信息 -->
      <div class="row">
        <app-product></app-product>
      </div>
    </div>
</div>
<!-- 底边栏 -->
<app-footer></app-footer>

.carousel-container,
.search-container {
  margin-bottom: 50px;
}

导航栏界面代码

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">在线竞拍</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">竞拍首页</a>
        </li>
        <li>
          <a href="#">关于我们</a>
        </li>
        <li>
          <a href="#">联系我们</a>
        </li>
        <li>
          <a href="#">网站地图</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

底边栏界面

<div class="text-center text-muted footer">
  <footer class="container">
    angular实战练习
  </footer>
</div>

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    line-height: 50px;
    background-color: #f2f2f2;
}

搜索栏界面

<form action="" role="form">

  <div class="form-group">
    <label for="">商品名称</label>
    <input type="text" class="form-control" id="" placeholder="商品名称">
  </div>
  <div class="form-group">
    <label for="">商品价格</label>
    <input type="text" class="form-control" id="" placeholder="商品价格">
  </div>
  <div class="form-group">
    <label for="">商品类别</label>
    <select name="product-type" id="product-type" class="form-control">
      <option value="type1">手机</option>
      <option value="type2">平板</option>
      <option value="type3">笔记本</option>
      <option value="type4">台式机</option>
    </select>
  </div>

  <button type="button" class="btn btn-primary btn-block">搜索</button>
</form>

轮播图界面

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="../../assets/images/xiaomi4.jpg" alt="First slide">
    </div>
    <div class="item">
      <img src="../../assets/images/xiaomi6.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img src="../../assets/images/xiaomi7.jpg" alt="Third slide">
    </div>
  </div>

  <!-- 轮播（Carousel）导航 -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>
</div>

.carousel-inner {
    position: relative;
    height: 300px;
}

@media (max-width: 768px) { 
    .carousel-inner {
        position: relative;
        height: 120px;
    }
 }

.carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: 0;
    transform: translateX(-50%);
    text-align: center;
    list-style: none;
}

.carousel-indicators li {
    margin: 8px 6px;
}
.carousel-indicators li.active{
    margin: 8px 6px;
    height: 10px;
    width: 16px;
    border-radius: 8px;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 0;
}

商品信息界面

<div class="row">
  <div class="col-lg-4 col-md-4 col-xs-12" *ngFor="let product of products">
    <div class="thumbnail">
          <img src=" https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3671643272,946673945&fm=26&gp=0.jpg"
      alt="">
      <div class="caption">
        <h3 class="pull-right">￥{{product.price}}</h3>
        <h3>{{product.name}}</h3>
        <p>{{product.desc}}</p>
        <p>
          <!--星级评价的rating属性由产品的rating属性传进去-->
          <app-stars [rating]="product.rating"></app-stars>
          <span>  {{product.rating}} 星</span>
        </p>
      </div>
    </div>
  </div>
</div>

.thumbnail:hover {
  transform: scale(1.05)
}

.thumbnail img {
  width: 100%;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  private products: Array<Products>;
  constructor() { }

  ngOnInit() {
    this.products = [
      new Products(1, '第一个商品', 1.99, '这是第一个商品,相关的商品信息', 1.5, ['手机', '苹果']),
      new Products(2, '第二个商品', 2.99, '这是第二个商品,相关的商品信息', 2.5, ['手机', '苹果']),
      new Products(3, '第三个商品', 3.99, '这是第三个商品,相关的商品信息', 3.5, ['手机', '苹果']),
      new Products(4, '第四个商品', 4.99, '这是第四个商品,相关的商品信息', 4.5, ['手机', '苹果']),
      new Products(5, '第五个商品', 5.99, '这是第五个商品,相关的商品信息', 3.5, ['手机', '苹果']),
      new Products(6, '第六个商品', 6.99, '这是第六个商品,相关的商品信息', 2.5, ['手机', '苹果']),
      new Products(7, '第七个商品', 7.99, '这是第七个商品,相关的商品信息', 1.5, ['手机', '苹果'])]
  }

}

export class Products {
  constructor(
    public id: number,
    public name: string,
    public price: number,
    public desc: string,
    public rating: number,
    public type: Array<string>
  ) { }
}

星级界面

<!-- 根据ngclass和ngstyle来判断是否为实心星星 -->
<span *ngFor="let star of stars" class="glyphicon glyphicon-star" [ngClass]="{'glyphicon-star-empty':!star}" [ngStyle]="{'color': !star?'yellowgreen':'#eee'}"></span>

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颗星
  public stars : boolean[];

  constructor() { }

  ngOnInit() {
    this.stars=[];
    for(var i=1;i<=5;i++){
      this.stars.push(i>this.rating);
    }
  }

}

初版界面

angular4学习笔记(第一章 基础篇)

1.环境搭配

2.认识angular项目的默认文件

3.开发准备

猜你喜欢

angular4学习笔记(第一章基础篇)