入門

安裝環境搭建

安裝前的準備工作

安裝node.js

安裝angular的計算機上面必須安裝最新的nodejs–注意安裝nodejs的穩定版本

安裝cnpm

npm可能會安裝失敗，建議先使用npm安裝下，如果安裝不成功，就是用cnpm淘寶鏡像來安裝

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

通過node中的npm安裝angular環境:

npm install -g @angular/cli

但是npm可能會安裝不成功，就通過安裝淘寶鏡像，然后根據鏡像來安裝（不推薦）：

cnpm install -g @angular/cli

踩坑： 通過淘寶鏡像安裝的腳手架，生成項目會報錯，提示setTimeout is not defined，遇到這個錯誤記得刪除淘寶鏡像安裝的腳手架，然后使用npm來安裝。

查看angula環境是否安裝成功

ng v

創建項目

創建項目并安裝依賴：

ng new 項目名稱

只創建項目不安裝依賴：

創建項目：

ng new 項目名稱 --skip-install

安裝依賴（注意：安裝依賴的時候要切換到安裝的項目目錄里面）【注：cd 項目名稱】：

npm install // 簡寫npm i 或者使用 cnpm install

運行項目

ng serve --open

踩坑：通過cnpm安裝依賴后Cannot findwebpack-dev-server ，解決之后ng serve后，又Cannot find module ‘webpack-cli’，真的是心態炸了，有時候可能是包版本的問題，也有可能是缺少包…，還有其他的可能，萬能解決大法，刪除nodemodules，然后重新安裝依賴，完美解決。踩坑還在繼續，加油打工人！

指定端口號運行：

ng serve --open 端口號

插件推薦：

項目目錄結構分析

自定義組件

官網鏈接：https://cli.angular.io/

創建組件（在components文件夾下創建一個header組件）：

ng g component components/header // 簡寫 ng g c components/組件名

在創建組件的時候，要在項目中創建（cd 項目文件夾下）


如果不是通過命令行來創建的組件，需要在app.module.ts入口文件中配置組件（通過命令行創建的組件會自動添加配置項）：

組件的使用：

• 創建組件

• 在父組件(app.module.ts)中引入子組件

  import { IndexComponent } from './components/index/index.component';

• 在父組件中直接通過組件名來調用子組件
  
  

數據的綁定

在ts文件中定義數據注意數據不需要寫數據類型，默認為public，使用時直接通過雙括號加上數據名來使用，{{name}}

定義數據的方式：

public 屬性名 = ‘屬性值’ （簡寫：屬性名 = ‘屬性值’）

public 數據類型:屬性名 = ‘屬性值’ （指定固定數據類型的數據）（簡寫：數據類型:屬性名 = ‘屬性值’）

msg = "肖晨"; // 默認是public的 public msg = "肖晨"; public msg:any = "肖晨"; // 推薦使用這種arr = ['111', '222', '333']; public arr:any[] = ['111','222', '333']; // 推薦使用這種 public arr:Array<any> = ['111', '222', '333'];//獲取 item.username public uerlist:any[] = [{ username:'張三', age:18 }, { username:'張三', age:18 }];

注：在項目中通過public item: string = 'Life is not only the present, but also the poem and the distance';定義屬性時，會報錯，是因為tslint根據右邊的數據值判斷出了數據的類型，覺得再次聲明類型值，是多此一舉的行為，解決方法（1、將數據類型改為any；2、在tslint.json添加”ignore-properties”）

聲明屬性的方式：

public：公有屬性，全局屬性

private：私有屬性，只能在當前類中使用

protected：保護屬性，只能在當前類和它的子類中使用

數據綁定的實例

// 綁定數據 <div>{{ name }}</div>// 綁定屬性 <div [title]="年齡">20歲</div>// 綁定標簽 解析出來是div中含有一個p標簽,并且p標簽的值的顏色為紅色 <div [innerHTML]="<p>我是p標簽</p>" style="color:red;"></div>// 數據循環 *ngFor <ul><li *ngFor="let item of list">{{ item }}</li> </ul>// 條件判斷 *ngIf // flag條件為真時顯示1,為假顯示2 <div *ngIf="flag">1</div> <div *ngIf="!flag">1</div>// *ngSwitch 和(switch,case相似) <ul [ngSwitch] = "score"><li *ngSwitchCase="1">1</li><li *ngSwitchCase="2">2</li><li *ngSwitchDefault>0</li> </ul>// [ngClass] <div [ngClass]="{'bule': true, 'red': false}">紅色</div> <div [ngClass]="{'bule': flag, 'red': !flag}">紅色</div>// [ngStyle] <div [ngStyle]="{'color':'red'}">紅色</div> //有引號表示自定義值 <div [ngStyle]="{'color':color}">紅色</div> // 沒有引號表示綁定的屬性// 管道(數據之間的轉換) public today:any = new Date(); <div>{{ today:'yyyy-MM-dd HH:mm ss'}}</div> // 把時間戳轉換成日期//執行事件 <button (click) = "run()">點我</button> run() {alert('執行點擊事件'); } getTitle() {alert(this.title); //執行事件獲取數據 } setDate() {alert(this.title = '我是改變后的title'); //執行事件改變數據 }// 表單事件 事件對象 <input type="text" (keydown)="keydown()" (keydown)="keydown2($event)"/> keydown() {console.log('keydown'); // 鍵盤每次按下都會觸動鍵盤事件,然后打印輸出keydown } keydown2(e) {// e.target 獲取當前的dom節點console.log(e.target.value); //獲取當前輸入的值let data = e.target;data.style.color = "red"; }// 雙向數據綁定--MVVM(model改變影響視圖,視圖改變也影響model)--MVVM只是針對表單 <input [(ngModel)]="inputValue" /> {{ inputValue }} //注意: 引入FormsModule(在app.module.ts中) import { FormsModule } from '@angular/forms'; imports: [BrowserModule,FormsModule ],

獲取屬性的值,改變屬性的值

獲取屬性的值: this.屬性名

改變屬性的值: this.屬性名 = 改變后的值(在構造函數中改變)

雙向數據綁定（MVVM）（只是針對表單）

通過ngModel實現表單的提交

angular中的服務

組件可以調用服務,服務不能調用組件,服務可以調用服務

組件與組件之間的方法是不能調用的,但是有了服務就可以.通俗易懂的講,服務是組件之間通信的橋梁.

實現: 把公共方法封裝在服務中,然后調用,實現方法的共享.

常用于數據緩存的方法,將用戶的操作緩存在local Storge中.

創建服務的命令

ng g service storage創建到指定目錄下面 ng g service services/storage

app.module.ts中引入,配置服務

// 引入并且配置服務 import { StorageService } from './services/storage.service'; // 聲明 providers: [StorageService],

使用服務中封裝的方法

// 引入服務(注意路徑)[在使用的組件中引入服務] import { StorageService } from '../../services/storage.service';// 1 通過實例化來使用(不推薦使用) //實例化 var storage = new StorageService();// 2 通過構造函數傳參,獲取服務的實例 constructor(public storage:StorageService) {// 獲取服務的實例 this.storage// 調用實例中的方法---獲取方法的實例console.log(this.storage.get()); }

服務的使用

在項目中創建服務

在app.module.ts里面引入創建的服務 并且聲明

在用到的組件里面 引入服務 初始化服務 就可以使用服務里面的數據了

angular中的dom操作

原生js

不含有指令操作的獲取方法:

ngOnInit() {// 組件和指令初始化完成 并不是真正的dom加載完成 如果含有指令操作 節點就會獲取不到let oBox:any = document.getElementById('box');oBox.style.color = "red";console.log(oBox); }

含有指令操作的獲取方法:

// 視圖加載完成之后觸發的方法 dom加載完成 ngAfterViewInit() {// 注意在聲明變量的時候一定要指定數據類型,不然會報錯let oBox1:any = document.getElementById('box');oBox.style.color = "red";console.log(oBox); }

ViewChild

在模板中給節點命名: #myBox

<div #myBox>我是一個dom節點 </div>

在業務邏輯里面引入ViewChild

import { Component,OnInit,ViewChild } from '@angular/core';export class HeadComponent implements OnInit {//獲取節點的實例@ViewChild('myBox') myBox:any; }ngAfterViewInit() {console.log(this.myBox.nativeElement);this.myBox.nativeElement.style.color = "red"; }

父組件通過ViewChild調用子組件的方法

在父組件中引用子組件:

<app-header></app-header>

在子組件ts中獲取節點:

export class HeadComponent implements OnInit { // 獲取子組件的實例@ViewChild('header') header:any; }ngAfterViewInit() {// 調用子組件里面的方法this.header.run(); }

父子組件的通信

通信:

• 父組件給子組件傳值
  • 子組件可以獲取父組件中的數據
  • 子組件可以執行父組件中的方法
• 子組件給父組件傳值
  • 父組件可以獲取子組件的數據
  • 父組件可以獲取子組件的方法
• 非父子組件(ViewChild, localStroge)
  • 組件之間的傳值
  • 共享方法

父組件給子組件傳值-@input

父組件不僅可以給子組件傳遞簡單的數據,還可以把自己的方法及整個([home]=“this”)父組件傳遞給子組件.

父組件調用子組件的時候傳入數據

<app-header [msg] = "msg"></app-header>

子組件引入input模塊

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

子組件中@input接收父組件傳遞過來的數據

export class HeadComponent implements OnInit {@Input() msg:string; // 屬性值@Input() run:any; // 方法 }getRun() {this.run(); }

子組件通過@Output觸發父組件的方法(也可以通過ViewChild)

組組件引入Output和EventEmitter

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

子組件中實例化EventEmitter

// 用EventEmitter和output裝飾器配合使用 <string>指定類型變量 @Output() private outer=new EventEmitter<string>();

子組件通過EventEmitter對象output實例廣播數據

sendParent() {this.outer.emit('msg from child'); }

父組件調用子組件的時候,定義接收事件,outer就是子組件的EventEmitter對象outer

<app-header (outer)="returnParent($event)"></app-header>

父組件收到數據會調用自己的returnParent方法,這個時候就能拿到子組件的數據

returnParent(e) {console.log(e); }

angular中的生命周期函數

生命周期函數通俗的講就是組件創建，組件更新，組件銷毀的時候觸發的一系列方法。

|ngOnChanges() | 常用于 父子組件的傳值中 |
|ngOnInit()|常用于請求數據|
| ngDoCheck() / ngAfterContentChecked() / ngAfterViewChecked() | 常用于做自定義操作 |
| ngAfterContentInit() | 常用于做組件渲染完成之后 |
| ngAfterViewInit() | 常用于進行dom操作|
| ngOnDestroy() | 常用于組件銷毀的時候【路由跳轉之間的銷毀 / 掛載卸載組件】|

Rxjs快速入門

Rxjs是ReactiveX編程理念的JavaScript版本，來自于微軟，它是一種針對異步數據流的編程，簡單地說是，他將一切數據包裝成流的形式，然后用操作符對流進行處理，達到能以同步編程的方式處理異步數據，并結合不同的操作符來輕松優雅的實現所需功能。

RxJS是一種針對異步數據流編程工具（響應式擴展變成），angular引入Rxjs就是為了讓異步可控，更簡單。（和promise類似，但是比promise更強大）。

RxJS里面最常用的Observable和formEvent。

目前常見的異步編程的方法：

回調函數

事件監聽/發布訂閱

Promise

RxJS（比Promise更強大，比如可以中途撤回，可以發射多個值，提供了多種工具函數等）

取消訂閱 （中途撤回）

angular6.x之前使用Rxjs的工具函數map filter

注意： angular6以后使用以前的Rxjs方法，必須安裝rxjs-compat模塊才可以使用map，filter方法。

angular6以后使用：

npm install rxjs-compat import { Observable } from 'rxjs'; import 'rxjs/Rx;

angular中的數據交互

get（請求數據）

post（提交數據）

jsonp（請求跨域數據）

使用第三方模塊 axios 請求數據

angular中使用第三方模塊axios請求數據

安裝

cnpm install axios --save

再用到的地方引入 axios

import axios from 'axios';

angular中的路由

路由就是根據不同的url地址，動態的讓根組件掛載其他組件，來實現一個單頁面應用。
步驟：

創建項目

創建需要的組件

在app-routing.module.ts中配置路由(引入組件，配置路由)

配置完成（其實就是將配置的路由放在app.component.html里面的）


ng g component components/home
ng g component components/news
ng g component components/product

angular中的默認路由

路由選中樣式

路由跳轉傳參

get傳值

傳遞 [routerLink]="[ '/newsDetails' ]" [queryParams]="{aid:key}"

接收（引入 -> 賦值 -> subscribe）
注意：get傳值是通過queryParams來接收的

動態路由傳值

配置

通過 [routerLink]="[ '/newsDetails', key ]" 傳遞

通過 this.route.params.subscribe() 來接收
注意：動態路由傳值是通過params來接收的

動態路由的js跳轉

引入

初始化

4. get傳值js跳轉

父子路由（嵌套路由）

Ionic介紹及Ionic環境搭建

Ionic是一個開源的移動應用程序開發框架，它可以讓我們快速的使用web技術構建高質量的移動應用。它不僅可以開發移動App還可以開發移動端web頁面，微信公眾平臺應用，桌面應用程序（結合electron），混合app web等等。

最新的Ionic4.x，lonic5.x基于web components，具有更好的運行速度。

Ionic = Cordova + Angular + ionic CSS

lonic原生功能是基于Cordova，Cordova提供了使用JavaScript調用Native功能。

ionic官網

安裝cordova ionic

npm i -g cordova ionic

查看ionic的版本：

ionic -v

查看cordova的版本

cordova -v

創建項目：

ionic start myApp tabs(創建

項目概覽

項目的運行流程：

在app-routing.module.ts文件中匹配路由

執行匹配到的組件

ionic自定義公共模塊

封裝成公共的組件，再用到的時候引用公共組件
在ionic中所有的頁面都是由模塊組的，如果要引入公共的模塊，需要在路由里面注入組件，一個組件一次只能注入一個模塊（多個模塊沒法共用一個組件），所以在ionic中要實現模塊的公用，要將組件封裝成模塊，讓模塊引入模塊。

Typscript介紹

TypeScript是由微軟開發的一款開源的編程語言。

TypeScript是JavaScript的超集，遵循最新的ES6，Es5規范。TypeScript擴展了JavaScript的語法。

TypeScript更像后端Java，C#這樣的面向對象語言，可以讓js開發大型企業項目。

谷歌也在大力支持TypeScript的推廣，谷歌的angular2.X+就是基于TypeScript語法。

最新的Vue，React也可以集成TypeScript語法。

Node.js框架Nestjs，midway中用的就是TypeScript語法。

TypeScript安裝 編譯

在使用npm命令之前電腦必須得安裝node.js

安裝：

npm install -g typescript 或者 cnpm install -g typrscript 或者 yam global add typescript

運行：

tsc helloworld.ts

查看typescript是否安裝成功：

tsc -v

TypeScript開發工具VSCode自動編譯.ts文件

創建ts.config.json文件 tsc-init 生成配置文件

在vscode中點擊：：任務 -》 運行任務 -》 tsc：監視-tsconfig.json 然后就可以自動生成代碼了

總結

以上是生活随笔為你收集整理的angualr学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。