本教程由開(kāi)發(fā)『教務(wù)管理系統(tǒng)』實(shí)例入手,逐步展示了一個(gè)系統(tǒng)從無(wú)到有的過(guò)程。在教程中,我們將Angular的知識(shí)點(diǎn)一步步地帶入,同時(shí)結(jié)合對(duì)官方文檔的學(xué)習(xí)。我們希望最后大家?guī)ё呋A(chǔ)知識(shí)的同時(shí),將我們長(zhǎng)期以來(lái)積累的學(xué)習(xí)方法也一并帶走。如果你恰好是河北工業(yè)大學(xué)的一員,熱愛(ài)編程并愿意投入自己寶貴的時(shí)間與我們共同學(xué)習(xí),那么請(qǐng)選擇校內(nèi)選修課程《商業(yè)網(wǎng)站開(kāi)發(fā)入門》,我們期待在最近的春天里與你相逢。
# 適用人群
Angular是款優(yōu)秀的前端框架,使用了前沿的技術(shù),融入了大量的軟件設(shè)計(jì)思想,設(shè)計(jì)模式,使用了廣泛關(guān)注的Typescript替代了javaScript,這注定了它并不適合新手。本教程在教學(xué)過(guò)程中,將假設(shè)你已備具如下經(jīng)驗(yàn):
* 擁有使用其它框架(如ThinkPHP)開(kāi)發(fā)小型系統(tǒng)的能力。
* 對(duì)面向?qū)ο笥幸欢ǖ牧私猓瑥幕旧狭私鈱?duì)象與類的區(qū)別,熟練的掌握一般的控制語(yǔ)句。
* 對(duì)基本的數(shù)據(jù)結(jié)構(gòu)有了解。
* 有HTML基礎(chǔ),可以使用HTML+CSS完成個(gè)人主頁(yè)的開(kāi)發(fā)。
欲速則不達(dá),如果你還處于計(jì)算機(jī)小白階段,我們強(qiáng)烈的推薦你先學(xué)習(xí)一些基礎(chǔ)的知識(shí)。多年的教學(xué)經(jīng)驗(yàn)來(lái)看,這些基礎(chǔ)的知識(shí)是早晚都要學(xué)習(xí)且躲不過(guò)的。
團(tuán)隊(duì)前置課程如下:
* [商業(yè)網(wǎng)站開(kāi)發(fā)入門(免費(fèi))](https://mengyunzhi.github.io/WebCourse2017/)
* [ThinkPHP6入門實(shí)例教程(核心章節(jié)免費(fèi))](http://www.imay365.com/yunzhiclub/thinkphp6guide)
# 寫點(diǎn)廢話
>[info] 本節(jié)可忽略
本教程中的對(duì)很多問(wèn)題的解釋基于當(dāng)前我們自身的水平以及我們揣測(cè)的讀者的水平。在軟件開(kāi)發(fā)過(guò)程中,很自然的會(huì)遇到一些問(wèn)題,在解決問(wèn)題的過(guò)程中,我們傾向于找到一個(gè)自己可以認(rèn)同并適用于解決當(dāng)前問(wèn)題的理論來(lái)支撐自己解決問(wèn)題的方法。這個(gè)方法是否真的正確其實(shí)并不重要,只要在當(dāng)前給我們足夠支撐就夠了。所以在教程中,有些東西我們會(huì)用自動(dòng)來(lái)解釋。問(wèn):為什么會(huì)是這樣? 答: 自動(dòng)。在筆者的教學(xué)與開(kāi)發(fā)經(jīng)驗(yàn)中,我認(rèn)為這不失為一種特別有效的教學(xué)與學(xué)習(xí)方法。
有人說(shuō)老師既然有些東西你明明知道講的不對(duì)或是講的不恰當(dāng),為什么不深入的講一下呢?一方面是由于在適用的就是最好的這個(gè)理論的驅(qū)動(dòng)下,有些事情我也沒(méi)有搞清楚更深層次的原理;另一方面則還是在適用的就是最好的這個(gè)理論的驅(qū)動(dòng),我認(rèn)為大家也沒(méi)有必要非要在當(dāng)前階段搞清楚。這和平常我們學(xué)習(xí)一下,一定要清楚自己當(dāng)前的學(xué)習(xí)目標(biāo)。
比如:我們高中學(xué)習(xí)的經(jīng)典物理中的牛頓的三定律,其中第二條是加速度定律,它在高中階段為我們解決了很多的物理問(wèn)題現(xiàn)實(shí)問(wèn)題。但是如果是這樣:這個(gè)我們一直某個(gè)物體上施加力F,那么就會(huì)有一直有加速度a,速度v必然會(huì)越來(lái)越大,上限應(yīng)該是正無(wú)窮。這與在大學(xué)期間老師講的一切物體的最大速度都不可能超載光速就相違背了。當(dāng)我們發(fā)現(xiàn)f=ma在某些時(shí)候不適用的時(shí)候,我們進(jìn)步了,得出了更適用的結(jié)論:牛二定律只有在速度不太大,質(zhì)量不太小的時(shí)候是適用的。
>[success] 適用的就是最好的,證真初步認(rèn)識(shí)、證偽提升認(rèn)識(shí)。人類的科學(xué)史也是證真、證偽中逐步發(fā)展向前的。
# 團(tuán)隊(duì)系列課程
| 序號(hào) | 名稱 | 地址 | 主要內(nèi)容 |
| ---- | ---- | ---- | ---- |
| 1 | 商業(yè)網(wǎng)站開(kāi)發(fā)入門 | [https://mengyunzhi.github.io/WebCourse2017/](https://mengyunzhi.github.io/WebCourse2017/) | 基本的HTML、CSS入門實(shí)例教程 |
| 2 | ThinkPHP6入門實(shí)例教程 | [http://www.imay365.com/yunzhiclub/thinkphp6guide](http://www.imay365.com/yunzhiclub/thinkphp6guide) | 掌握使用ThinkPHP6開(kāi)發(fā)小型系統(tǒng)的能力,了解面向?qū)ο?、?shù)據(jù)流、MVC分層思想、過(guò)濾器、軟刪除、實(shí)體間關(guān)系、關(guān)聯(lián)操作等基本的思想 |
| 3 | Angular10入門實(shí)例教程 | 本文 | |
| 4 | Spring Boot入門實(shí)例教程 | | |
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)