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布局

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

     

• 导航栏界面代码

  • 
      
    
        
    
          
            
            
            
          
          在线竞拍
        
        
    
          
    
            
    
              竞拍首页
            
            
    
              关于我们
            
            
    
              联系我们
            
            
    
              网站地图
            
          
        
      
    
    

     

• 底边栏界面

  • 
      
    
        angular实战练习
      
    

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

     

• 搜索栏界面

  • 
    
      
    
        商品名称
        
      
      
    
        商品价格
        
      
      
    
        商品类别
        
          手机
          平板
          笔记本
          台式机
        
      
    
      搜索
    

     

• 轮播图界面

  • .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;
    }

     

• 商品信息界面

  • 
      
    
        
    
              
          
    
            
    ￥{{product.price}}
            
    {{product.name}}
            
    {{product.desc}}
            
    
              
              
                {{product.rating}} 星
            
          
        
      
    

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

     

• 星级界面

  • 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);
        }
      }
    
    }
    
    

     

• 初版界面