Angular学习笔记01(脚手架的搭建,项目的创建,自定义组件,数据,属性,事件,指令以及管道的使用)

Angular的CLI安装

npm install -g @angular/cli

创建工作区和初始应用

ng new my-app

运行应用或者看pakcage.json的配置(npm run start)

cd my-app
ng serve --open

实际开发只需要对src目录下的文件进行代码编写

自定义组件

在src/app文件夹下创建my01文件夹 新建my01.components.ts文件和my01.components.css文件和my01.components.html文件

app.component.html中使用自定义组件 以及ng g c 组件名称 快速生成组件

1

my01.components.ts

//组件的逻辑文件
//需要安装一款插件,才能快速写出默认的结构代码!!

//插件快捷提示:ng-component

//组件制作完成,必须要注册到全局中 才能使用!
//在app.modules.ts文件中!
import { Component, OnInit } from '@angular/core';

@Component({
    //代表组件名 使用时
    selector: 'app-my01',
    //当前组件关联的html地址
    templateUrl: './myo1.component.html',
    //当前组件关联的css地址
    styleUrls: ['./myo1.component.css']
})
// 组件的类型:命名规范-大驼峰命名法
export class My01Component implements OnInit {
    constructor() { }

    ngOnInit(): void { }
}

app.modules.ts文件中引入自定义组件,双向数据绑定也需要引入模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//引入Forms模块才能支持双向数据绑定
import {FormsModule} from '@angular/forms'

import { AppComponent } from './app.component';
// 引入自定义组件
import { My01Component } from './my01/myo1.component';
import { My02Componemt } from './my02/my02.component';
import { My03Component } from './my03/my03.component';

// 项目的全局配置文件:
//*全局引入各种模块:
//*组件的全局注册..

//angular的组件是MVC结构:
//vue中:.vue文件中书写js css html代码
//ng中:认为3中代码书写在一起导致内容过多,所以拆分成三个文件

@NgModule({
  //组件的注入
  declarations: [
    AppComponent,My01Component,My02Componemt, My03Component
  ],
  // 注入模块
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

数据,属性,事件

my01.components.ts

//组件的逻辑文件
//需要安装一款插件,才能快速写出默认的结构代码!!

//插件快捷提示:ng-component

//组件制作完成,必须要注册到全局中 才能使用!
//在app.modules.ts文件中!
import { Component, OnInit } from '@angular/core';

@Component({
    //代表组件名 使用时
    selector: 'app-my01',
    //当前组件关联的html地址
    templateUrl: './myo1.component.html',
    //当前组件关联的css地址
    styleUrls: ['./myo1.component.css']
})
// 组件的类型:命名规范-大驼峰命名法
export class My01Component implements OnInit {
    // 类中书写一些属性；显示到html中,注意;结束!!
    name = '诚';
    age = 24;
    married = true;
    // obj类型
    boss={
        name:'容',
        age:24
    };
    // 对象方法
    showName(){
        return '我是诚'
    };
    showClick(){
        console.log('我被点击了') 
    };
    // html代码
    html = '我是div';
    //动态样式
    size = 18;

    constructor() { }

    ngOnInit(): void { }
}

my01.components.html

我是myo1的名字:{{ name }}
我是myo1的名字:{{ age }}

结婚了吗:{{ married }}
obj类型:{{ boss }}
boss.name:{{ boss.name }}

{{ age > 20 ? "大于20" : "没有大于20" }}

{{ true || false }}

{{ true && false }}

{{ !true }}

{{ showName() }}


  
    点击事件
  




我的名字
我的名字


  
  
  






{{ name }}


{{ size }}

  变大

my01.components.css

h3{
    color: red;
}
.danger{
    color: red;
    font-weight: bold;
    border: 1px solid red;
    padding: 10px;
}
.success{
    color: white;
    background-color: green;
    padding: 10px;
}

指令

条件指令

1
成绩:{{score}}

=90">优秀
=60 && score <90">良好
不合格
成绩降低


  及格



  不及格

{{ type }}
升级会员


  
欢迎黄金会员
  
白金会员
  
铂金
  
钻石
  
未知的会员

循环指令

  
  
    {{ item }}
  
  
  
    {{ names }},{{ i }}
  

自定义指令(自定义生成Focus指令和Upper)

在html中使用自定义指令

my05 works!


  
  
  
  
  



  


  

生成的Focus指令文件

// Focus 中的ts文件
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFocus]'
})
export class FocusDirective {
  // 构造方法,累实例化自动触发的方法
  // 指令书写在哪个标签上,对应的元素就会作为参数传递到指令的构造方法中
  constructor(e:ElementRef) {
    console.log(e)
    let input = e.nativeElement
    input.focus()
   }

  //ts:ts语言最为重要的特性--静态分析
  // 参数名:参数类型 声明类型给vscode看,这样可以给出对应的代码提示,对程序员很友好
  show(abc:string){
  //abc.
  }
}

生成的Upper指令

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appUpper]'
})
export class UpperDirective {

  constructor(e:ElementRef) {
    // 新增指令必须要重启命令行
    e.nativeElement.value = e.nativeElement.value.toUpperCase()
   }
}

管道

angular中的管道:{{变量|管道}}和vue中的过滤器:{{变量|过滤器}}类似

guandao.component.html

guandao works!

  大写:{{ "hello" | uppercase }}
  小写:{{ "WORD" | lowercase }}
  首字母大写:{{ "my name is taocheng" | titlecase }}
  百分数:{{ 0.33 | percent }}
  
  百分数小数位:{{ 0.363333 | percent: "2.3" }}
  
  百分数小数位:{{ 0.055 | percent: "2.2" }}
  
  钱:{{ 123456.789 | currency }}
  钱:{{ 123456.789 | currency: "¥" }}
  
  
  时间戳:{{ time }}
  日期格式:{{ time | date }}
  
  日期格式:{{ time | date: "yyyy-MM-dd HH:mm:ss" }}
  日期格式:{{ time | date: "yyyy-MM-d hh:mm:ss" }}
  

guandao.component.ts

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

@Component({
  selector: 'app-guandao',
  templateUrl: './guandao.component.html',
  styleUrls: ['./guandao.component.css']
})
export class GuandaoComponent implements OnInit {
  time = new Date().getTime()

  constructor() { }

  ngOnInit(): void {
  }

}