個人理解angular
建立乙個專案
專案目錄結構分析
主要需要知道的檔案:
建立元件
如何在其他頁面復用元件?
在新建立的元件中的news.component.ts檔案中,有乙個selector屬性就是名字,如果需要呼叫只需要在其他頁面中寫入 即可,這樣頁面**量少、**復用率高。
@component()
定義資料
定義資料的幾種方式:
1.定義基本資料
title ="我是新聞元件";
public title ="我是新聞元件";
public title:string ="我是新聞元件"; //最標準的定義方式
public message:any;//定義空資料
2.定義物件
public userinfo:object=;
3.定義陣列的幾種方式
//普通陣列
arr=[a,b,c];
public arr:arr =['111','222','333'];
public list:array=[123,321,456,654];//如果<>裡面是number則陣列必須是number
//物件陣列
public userlist:array=[,,
];//複雜陣列
public cars:array=[,,
]}, ,,]
}, ,,]
}];
資料繫結 (1)}}}
}}張三1+2=}
}
資料繫結 (2)
1.引入
html:
ts:
public imgsrc:any="";
2.迴圈資料顯示資料的索引(key)
html:
ts:
public list:array=[
,,];
3.條件判斷語句 *ngif
html:
;
ts:
public list:array=[
,,];
4.條件判斷語句 ngswitch
html:
已經支付
已經支付並確認訂單
已經發貨
已經收貨
無效訂單
ts:
public orderstatus:number=5;//1表示已經支付 2表示已經支付並確認訂單 3表示已經發貨 4表示收貨 5表示無效
5.屬性ngclass ngstyle
html:
111111111111111111111
222222222222222222222
css:
.red
.pink
.blue
ts:
public flag:boolean=true;
6.迴圈陣列讓資料變成紅粉藍
html:
html:
我是乙個p標籤
我是乙個p標籤
我是乙個p標籤
7.管道
html:
日期:}
ts:
public today:any= new date();
8.事件
html:
}執行事件
執行事件,獲取資料
執行事件,改變資料
ts:
public title:string="我是乙個標題";
run(e)
getdata)
updatedata()
9.表單事件 事件物件
html:
ts:
keydown(e)else
}keyup(e)
}
10.雙向資料繫結 mvvm
html:
}
改變keywords的值
獲取keywords的值
ts:
public keywords:any="我是keywords";
changekeywords()
getkeywords()
Angular 7 學習資料 (1)
angular 是乙個用 html 和 typescript 構建客戶端應用的平台與框架。angular 本身就是用 typescript 寫成的。它將核心功能和可選功能作為一組 typescript 庫進行實現,你可以把它們匯入你的應用中。angular 的基本構造塊是 ngmodule,它為元件...
Angular7上手體驗
檢視當前你的node版本可以在cmd中輸入 開發工具強烈推薦 用cli命令建立 ng7demo 這裡前面我用ng7 demo的時候報錯 應該是不能用下劃線 這裡誇獎下,7加入了cli prompts 建立的時候可以選是否啟用router 及 css用scss,sass等 暫時只有這2個prompts...
Angular7需要的基本操作
angular4和vue2是越來越像了 全域性安裝angular cli 腳手架工具 使用npm命令安裝 npm install g angular cli 安裝cnpm 國內直接裝經常會出問題,所以設定為 映象位址會更好。npm install g cnpm registry 安裝angular ...