MVVM框架的組成：

數(shù)據(jù)綁定、指令系統(tǒng)、組件式編程、路由和導(dǎo)航、狀態(tài)保持、第三方組件庫

Angular框架

AngularJS v1.x官網(wǎng)：https://angularjs.org/

AngularJS v2.x~v8.x官網(wǎng)：https://angularjs.io

AngularJS 中文鏡像網(wǎng)站：https://www.angular.cn/

是由Google 2009年開發(fā)的MVVM框架,最新版為8.2，可用于開發(fā)web、移動(dòng)、桌面應(yīng)用的中大型框架

Vue.js開發(fā)方式：1.script引入vue.js 2.腳手架方式

AngularJS v1.x 開發(fā)方式：1.script引入vue.js 2.腳手架方式

AngularJS v2.x開發(fā)方式：1.腳手架方式

小知識(shí)：

使用第三方NPM下載倉庫

查看當(dāng)前NPM默認(rèn)的下載倉庫地址：

npm config get registry

修改NPM默認(rèn)的下載倉庫地址為國(guó)內(nèi)鏡像網(wǎng)站

npm config set registry 新倉庫地址

例如：可以使用淘寶提供的NPM鏡像：

npm config set registry https://registry.npm.taobao.org

搭建Angular開發(fā)環(huán)境

前提：NG需要Node.jsV10.x以上

1.下載并安裝腳手架工具

npm install -g @angular/cli

此步驟會(huì)下載全局工具ng.cmd

2.運(yùn)行腳手架工具創(chuàng)建空白項(xiàng)目

ng new myngapp01

3.進(jìn)入空白項(xiàng)目并運(yùn)行開發(fā)服務(wù)器

cd myngapp01

npm start

4.客戶端訪問測(cè)試

http://127.0.0.1:4200

下載腳手架工具常見錯(cuò)誤：

1.ENOENT：no such file or directory,access to C:/user/…Roaming/npm

解決方案：使用管理員賬戶重新登錄

2.npm ERR:Cannot read property resolve of undefined

解決方案：稍后重試，或者更改倉庫地址

3.-4048 EPERM：operation not permitted unlink

解決方案：使用管理員賬戶重新登錄

4.git命令沒有找到

解決方案：在電腦安裝Git軟件，并配置用戶名和郵箱

英語單詞：

Model:模型，即數(shù)據(jù)，MVVM中第一個(gè)MModule:模塊，1.Node.js 2.ES6 3.NG中Modal:模態(tài)對(duì)話框

Angular.js項(xiàng)目啟動(dòng)過程分析：

(1)angular.json：NG項(xiàng)目的配置

index.js：./src/index.html <app-root></app-root>main: ./src/main.ts

(2)main.js >bootstrapModule(AppModule)

(3)app.module.ts >bootstrap:[AppComponent]

(4)app.component.ts > selector:‘a(chǎn)pp-root’

>templateUrl:'app.component.html'

(5)app.component.html >HTML片段…

2.Angular核心概念之一：模塊

Module：不同于Node.js或ES6中的模塊，NG中的模塊就是一個(gè)抽象的容器，用于對(duì)組件進(jìn)行分組。

整個(gè)應(yīng)用初始時(shí)有且只有一個(gè)主組件：AppModule

3.Angular核心概念之二：組件

組件：是一段可以反復(fù)使用的頁面片段，如頁頭、輪播、手風(fēng)琴…

組件(Component)=模板(Template)+腳本(Script)+樣式(Style)

提示：NG中，任何一個(gè)組件都必須聲明在一個(gè)模塊中！

自定義組件步驟：

1.創(chuàng)建組件 class

@Component({selector:'myc01',template:'<h2></h2>'})export class MyC01Component{ }2.在某個(gè)模塊中注冊(cè)組件class//app.module.tsdeclaration:[AppComponent,MyC01Component]3.使用已經(jīng)注冊(cè)過的組件//app.component.html<myc01></myc01>

Angular提供的創(chuàng)建組件的簡(jiǎn)化工具：

ng generate component 組件名npx ng generate component 組件名上述命令可以簡(jiǎn)化為：ng g comonent 組件名npx ng g component 組件名 命令行輔助工具(ng)

Node.js官方安裝的工具：

npm:第三方模塊的維護(hù)工具npx:第三方可執(zhí)行文件的執(zhí)行工具，Node Package Executor npx 可用于執(zhí)行當(dāng)前項(xiàng)目中 node_modules/.bin 目錄下的可執(zhí)行文件

4.Angular核心概念之三：數(shù)據(jù)綁定

(1)HTML綁定：{{NG表達(dá)式}}

測(cè)試：NG表達(dá)式中可以執(zhí)行哪些代碼？算術(shù)運(yùn)算? ----可以比較運(yùn)算? ----可以邏輯運(yùn)算？----可以三目運(yùn)算符 ----可以調(diào)用函數(shù)？ ----不可以,NG表達(dá)式中禁止出現(xiàn)new關(guān)鍵字JSON序列化？ ----不可以，NG表達(dá)式中JSON是undefined

(2)屬性綁定: Vue.js： v-bind或簡(jiǎn)寫為：

形式1：直接在屬性上用{{}} <p title="{{msg}}"></p>形式2：使用[]做屬性綁定 <p [title]="msg"></p>

(3)指令綁定

(4)事件綁定：

Vue.js： v-on或簡(jiǎn)寫為@

(5)雙向數(shù)據(jù)綁定

總結(jié)

以上是生活随笔為你收集整理的Angular框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。