Angular框架
MVVM框架的組成：
數(shù)據(jù)綁定、指令系統(tǒng)、組件式編程、路由和導(dǎo)航、狀態(tài)保持、第三方組件庫(kù)
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年開(kāi)發(fā)的MVVM框架,最新版為8.2，可用于開(kāi)發(fā)web、移動(dòng)、桌面應(yīng)用的中大型框架
Vue.js開(kāi)發(fā)方式：1.script引入vue.js 2.腳手架方式
AngularJS v1.x 開(kāi)發(fā)方式：1.script引入vue.js 2.腳手架方式
AngularJS v2.x開(kāi)發(fā)方式：1.腳手架方式
小知識(shí)：
使用第三方NPM下載倉(cāng)庫(kù)
查看當(dāng)前NPM默認(rèn)的下載倉(cāng)庫(kù)地址：
npm config get registry修改NPM默認(rèn)的下載倉(cāng)庫(kù)地址為國(guó)內(nèi)鏡像網(wǎng)站
npm config set registry 新倉(cāng)庫(kù)地址例如：可以使用淘寶提供的NPM鏡像：
npm config set registry https://registry.npm.taobao.org搭建Angular開(kāi)發(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)行開(kāi)發(fā)服務(wù)器
cd myngapp01
npm start
4.客戶端訪問(wèn)測(cè)試
http://127.0.0.1:4200
下載腳手架工具常見(jiàn)錯(cuò)誤：
1.ENOENT：no such file or directory,access to C:/user/…Roaming/npm
解決方案：使用管理員賬戶重新登錄
2.npm ERR:Cannot read property resolve of undefined
解決方案：稍后重試，或者更改倉(cāng)庫(kù)地址
3.-4048 EPERM：operation not permitted unlink
解決方案：使用管理員賬戶重新登錄
4.git命令沒(méi)有找到
解決方案：在電腦安裝Git軟件，并配置用戶名和郵箱
英語(yǔ)單詞：
Model:模型，即數(shù)據(jù)，MVVM中第一個(gè)MModule:模塊，1.Node.js 2.ES6 3.NG中Modal:模態(tài)對(duì)話框Angular.js項(xiàng)目啟動(dòng)過(guò)程分析：
(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ù)使用的頁(yè)面片段，如頁(yè)頭、輪播、手風(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è)過(guò)的組件//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é)
- 上一篇： 从码奴到码神之路--初级到中级再到高级程
- 下一篇： 随机数是真是假你说了算？？？