初學angularjs

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]="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()//執行子組件的方法
}