1.安装脚手架

npm install -g @angular/cli

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果有警告修改环境变量

2.新建项目 cd 文件

ng new 项目名

跳过依赖包

ng new 项目名 --skip-install

3.编译运行

ng serve --open

4.在vscode中编译，代码高亮 安装插件

5.安装组件

ng g component components/home

创建提个home组件

6.各个目录结构的含义

7.ts的空模板

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
 //第一变量
  constructor() { }
 
  ngOnInit() {
  }
  //定义方法
 
}

8.路由跳转script中
点击事件触发

Ts

{
    path: 'tab3',
    component:Tab3Component,
    children: []
 },

//html按钮

<button (click)="tab3()">进入tab3</button>

//路由

tab3(){
    this.router.navigateByUrl("tab3")
    //或者是以下这种
    this.router.navigate(["tab3"])
  }

9.父子组件之间的传值
父组件

<app-header 
="title"></app-header>

定义属性

title='我是父组件的title'

子组件
1.引入Input模块

import { NgModule,Input } from '@angular/core';

@Input() title:any;

10.父组件传方法 父组件自己的全部给子组件
父组件

<app-header [run]="run"></app-header>
alert("sasss")    
}

子组件

<button (click)="getMethod()">点击</button>
@Input() run:any;
getMethod(){
this.run();//加括号表示执行

}

执行方法

传整体
<app-header [home]=”this”></app-header>
子组件

<button (click)="getMethod()">点击</button>
@Input() home:any;
getMethod(){
this.home.run()
}

传方法与父组件全部都要经过事件处理

11.父组件获取子组件
@ViewChild
子组件定义一个属性

public childinfo:any="我是子组件的数据"

childmethod(){
    alert("我是子组件的方法")
}

父组件

import { NgModule,ViewChild } from '@angular/core';

@ViewChild('footer') footer:any;

通过事件触发

<button (click)="childrun()">点击获取子组件的值</button>
childrun(){
    alert(this.footer.childinfo);
}
childrun(){
    this.footer.childmethod()//执行子组件的方法
}