1.使用npm install -g @angular/cli安装脚手架以后
创建项目

ng new 项目名称

目录结构：

1.创建组件

ng g component   组件路径和名称

插值语法：

和Vue一样都是采用{{}}

ngFor  ngif<div class="container"><!-- {{data.name | filterUser}} --><!-- <div *ngIf="Obj.type">sd</div> --><ul><li *ngFor="let item of list; let iss= index">{{ iss }}de{{ item.age }}</li></ul><input type="text" [(ngModel)]="usernanm" name="" id=""><ul><!-- <li *ngFor="let items in Obj">{{items}}</li> --></ul></div>

注意在这里获取下标的存在是主要的

下面是实现数据的双向绑定

先从

需要在app.module中加入FormsModule,ReactiveFormsModule模块在main.ts中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
//重点
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,FormsModule //重点],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

 

<input type="text" [(ngModel)]="usernanm" name="" id="">

<div class="container"><!-- {{data.name | filterUser}} --><!-- <div *ngIf="Obj.type">sd</div> --><ul><li *ngFor="let item of list; let iss= index">{{ iss }}de{{ item.age }}</li></ul><input type="text" [(ngModel)]="usernanm" name="" id="">{{usernanm}}<input type="text" #input1><button (click)="send(input1)">点击</button>
</div>

form action="" #input2="ngForm" ><input type="text" name="usernanm"  [(ngModel)]="usernanm" id=""><input type="password" name="password"  [(ngModel)]="usernanm" id=""><input type="email" name="email"  [(ngModel)]="usernanm" id=""></form>

组件之间传值

 父组件往子组件传递

//这是父组件传值
<app-home [home]="homer"></app-home>
//子组件首先先引入Input后面以后在利用这个Input装饰器来做操作
import { Component, OnInit,Input } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {constructor() { }、
//这玩意是一个函数 所以你需要加上所有的税局@Input() home;ngOnInit(): void {}}

//子组件   -----》      父组件传递

//父组件的html代码
<app-home [home]="homer" (childMg)="getData($event)"></app-home>
{{msg}}
//父组件接受数据都是以$event对象来接受数据的
msg='';getData(event){this.msg=event.msgconsole.log(this.msg)};
//子组件HTML正常的点击事件发送<button (click)="Parent.snd()">
FASOGN
</button>
//子组件的核心Ts代码块
import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {constructor() { }@Input() home;//这里的childMsg是指你要抛出的事件名称这个可以你自己定义//多个方法的定义你需要多次实例化该对象@Output() childMg:EventEmitter<any> =new EventEmitter();@Output() Touched:EventEmitter<any> =new EventEmitter();ngOnInit(): void {}Parent={//在这里要注意this只想的问题snd:()=>{
//直接使用this来做代码复console.log(this.childMg.emit({msg:'这是子组件发送给父组件的数据'}))}}}

//自定义通道：

//这个暂无代码因为不太会写
命令行直接输入ng g pipe  组件地址和/该组件的名称
import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'changeUpper'
})
export class ChangeUpperPipe implements PipeTransform {transform(value: number, ...args: unknown[]): number {//在这里你可以自定义你的参数类型和返回值的类型和Vue的filter一样做一些额外的逻辑处理这样就可以实现高内聚低耦合console.log(value)console.log(args)return value+10;}}//这样就不用自己在手动去导入一些路径
//注意这个导入全部是在app.module中导入的
//方法略显麻烦

//生命周期

https://blog.csdn.net/wallowyou/article/details/80899864
参考大佬博客介绍

//自定义指令：

ng g pipe   directive   Directive/指令的文件地址和文件名称import { Directive,Input,ElementRef } from '@angular/core';//这是自定义了一个指令
@Directive({selector: '[appUpperdirective]'
})
export class UpperdirectiveDirective {//这个代表将这个指令所具有的数据保持注入进这个容器也就是指令内部@Input() appUpperdirective//这是表明这是提前定义了一个变量并赋予了一个默认值的数据在指令这里也能获取对应的Dom元素constructor(public ref:ElementRef=null) { }ngOnChanges(){//在这里处理如何直接在conconsole.log(this.appUpperdirective)// console.log(this.ref.nativeElement)//在这里注意下this的指定this.ref.nativeElement.addEventListener('click',function(){console.log(this.style.color='red')})}
//  }

服务：

//我把这个理解成为一个工具类指令这就是特殊的html一样这些服务其实就是将每一个工具类写成了一个js的class 供我们来使用吧了所以看下面的方法的具体实现
//1 这是一个具体的Service(服务)这个是我自己的方法处理
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class StorangeService {public usernma:string=''constructor() {};
//这是定义的访问器类似于java的对这个属性生成get和set方法一样get getShow():string{console.log('测试文件数据存在'+this.usernma)return '这是一个数据存在的事件'}}
//这是下面的具体调用模块
import { Component } from '@angular/core';
import { StorangeService } from './Service/storange.service'// import {NgModel} from '@angular/forms'
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.less']
})
export class AppComponent {title = 'AngularApp';NumberMath = 12213public storangeService:StorangeService=null;constructor(storangeService:StorangeService) { this.storangeService=storangeService}ngOnChanges()	{alert('0')console.log(this.storangeService)}// usernanm = "用户名";// Obj = {//   type: true// };msg = '';getData(event) {this.msg = event.msgconsole.log(this.msg)};ceshi = ''getMsg(event) {console.log(event)// debuggerthis.ceshi = event.valueconsole.log(this.ceshi)};homer: any[] = [12, 4, 6, 6]//   send(e) {// //     debugger// console.log(e)//   };//   list = [//     {//       age: 1//     }, {//       age: 2//     }//   ]}//下面是服务直接的注入其实也就是相当于有一个容器你提前先注册进去以后后面就可以直接调用这个服务模块了
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './com/home/home.component';
import { ChangeUpperPipe } from './util/change-upper.pipe';
import { UpperdirectiveDirective } from './directive/upperdirective.directive';
import {StorangeService} from './Service/storange.service'
@NgModule({declarations: [AppComponent,HomeComponent,ChangeUpperPipe,UpperdirectiveDirective],imports: [BrowserModule,AppRoutingModule,FormsModule],
//这一步就是所谓的依赖注入模块providers: [StorangeService],bootstrap: [AppComponent]
})
export class AppModule { }

引入Forms模块的时候报错

//src/app/pages/welcome/welcome.component.html:32:17 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
//错误v信息解决方案:在你的模块导入的地方加上Forms和,ReactiveFormsModul这两模块即可