本教程由开发『教务管理系统』实例入手,逐步展示了一个系统从无到有的过程。在教程中,我们将Angular的知识点一步步地带入,同时结合对官方文档的学习。我们希望最后大家带走基础知识的同时,将我们长期以来积累的学习方法也一并带走。如果你恰好是河北工业大学的一员,热爱编程并愿意投入自己宝贵的时间与我们共同学习,那么请选择校内选修课程《商业网站开发入门》,我们期待在最近的春天里与你相逢。
# 适用人群
Angular是款优秀的前端框架,使用了前沿的技术,融入了大量的软件设计思想,设计模式,使用了广泛关注的Typescript替代了javaScript,这注定了它并不适合新手。本教程在教学过程中,将假设你已备具如下经验:
* 拥有使用其它框架(如ThinkPHP)开发小型系统的能力。
* 对面向对象有一定的了解,从基本上了解对象与类的区别,熟练的掌握一般的控制语句。
* 对基本的数据结构有了解。
* 有HTML基础,可以使用HTML+CSS完成个人主页的开发。
欲速则不达,如果你还处于计算机小白阶段,我们强烈的推荐你先学习一些基础的知识。多年的教学经验来看,这些基础的知识是早晚都要学习且躲不过的。
团队前置课程如下:
* [商业网站开发入门(免费)](https://mengyunzhi.github.io/WebCourse2017/)
* [ThinkPHP6入门实例教程(核心章节免费)](https://ihavenolimitations.xyz/yunzhiclub/thinkphp6guide)
# 写点废话
>[info] 本节可忽略
本教程中的对很多问题的解释基于当前我们自身的水平以及我们揣测的读者的水平。在软件开发过程中,很自然的会遇到一些问题,在解决问题的过程中,我们倾向于找到一个自己可以认同并适用于解决当前问题的理论来支撑自己解决问题的方法。这个方法是否真的正确其实并不重要,只要在当前给我们足够支撑就够了。所以在教程中,有些东西我们会用自动来解释。问:为什么会是这样? 答: 自动。在笔者的教学与开发经验中,我认为这不失为一种特别有效的教学与学习方法。
有人说老师既然有些东西你明明知道讲的不对或是讲的不恰当,为什么不深入的讲一下呢?一方面是由于在适用的就是最好的这个理论的驱动下,有些事情我也没有搞清楚更深层次的原理;另一方面则还是在适用的就是最好的这个理论的驱动,我认为大家也没有必要非要在当前阶段搞清楚。这和平常我们学习一下,一定要清楚自己当前的学习目标。
比如:我们高中学习的经典物理中的牛顿的三定律,其中第二条是加速度定律,它在高中阶段为我们解决了很多的物理问题现实问题。但是如果是这样:这个我们一直某个物体上施加力F,那么就会有一直有加速度a,速度v必然会越来越大,上限应该是正无穷。这与在大学期间老师讲的一切物体的最大速度都不可能超载光速就相违背了。当我们发现f=ma在某些时候不适用的时候,我们进步了,得出了更适用的结论:牛二定律只有在速度不太大,质量不太小的时候是适用的。
>[success] 适用的就是最好的,证真初步认识、证伪提升认识。人类的科学史也是证真、证伪中逐步发展向前的。
# 团队系列课程
| 序号 | 名称 | 地址 | 主要内容 |
| ---- | ---- | ---- | ---- |
| 1 | 商业网站开发入门 | [https://mengyunzhi.github.io/WebCourse2017/](https://mengyunzhi.github.io/WebCourse2017/) | 基本的HTML、CSS入门实例教程 |
| 2 | ThinkPHP6入门实例教程 | [https://ihavenolimitations.xyz/yunzhiclub/thinkphp6guide](https://ihavenolimitations.xyz/yunzhiclub/thinkphp6guide) | 掌握使用ThinkPHP6开发小型系统的能力,了解面向对象、数据流、MVC分层思想、过滤器、软删除、实体间关系、关联操作等基本的思想 |
| 3 | Angular10入门实例教程 | 本文 | |
| 4 | Spring Boot入门实例教程 | | |
- 序言
- 第一章 Hello World
- 1.1 环境安装
- 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 请求后台数据
- 2.2.1 HttpClient
- 2.2.2 请求数据
- 2.2.3 模块与依赖注入
- 2.2.4 异步与回调函数
- 2.2.5 集成测试
- 2.2.6 本章小节
- 2.3 新增教师
- 2.3.1 组件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 对接后台
- 2.3.4 路由
- 2.4 编辑教师
- 2.4.1 组件初始化
- 2.4.2 获取路由参数
- 2.4.3 插值与模板表达式
- 2.4.4 初识泛型
- 2.4.5 更新教师
- 2.4.6 测试中的路由
- 2.5 删除教师
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome图标库
- 2.6.3 firefox
- 2.7 总结
- 第三章 用户登录
- 3.1 初识单元测试
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 着陆组件
- 3.5 @Output
- 3.6 TypeScript 类
- 3.7 浏览器缓存
- 3.8 总结
- 第四章 个人中心
- 4.1 原型
- 4.2 管道
- 4.3 对接后台
- 4.4 x-auth-token认证
- 4.5 拦截器
- 4.6 小结
- 第五章 系统菜单
- 5.1 延迟及测试
- 5.2 手动创建组件
- 5.3 隐藏测试信息
- 5.4 规划路由
- 5.5 定义菜单
- 5.6 注销
- 5.7 小结
- 第六章 班级管理
- 6.1 新增班级
- 6.1.1 组件初始化
- 6.1.2 MockApi 新建班级
- 6.1.3 ApiInterceptor
- 6.1.4 数据验证
- 6.1.5 教师选择列表
- 6.1.6 MockApi 教师列表
- 6.1.7 代码重构
- 6.1.8 小结
- 6.2 教师列表组件
- 6.2.1 初始化
- 6.2.2 响应式表单
- 6.2.3 getTestScheduler()
- 6.2.4 应用组件
- 6.2.5 小结
- 6.3 班级列表
- 6.3.1 原型设计
- 6.3.2 初始化分页
- 6.3.3 MockApi
- 6.3.4 静态分页
- 6.3.5 动态分页
- 6.3.6 @Input()
- 6.4 编辑班级
- 6.4.1 测试模块
- 6.4.2 响应式表单验证
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定义FormControl
- 6.4.6 代码重构
- 6.4.7 小结
- 6.5 删除班级
- 6.6 集成测试
- 6.6.1 惰性加载
- 6.6.2 API拦截器
- 6.6.3 路由与跳转
- 6.6.4 ngStyle
- 6.7 初识Service
- 6.7.1 catchError
- 6.7.2 单例服务
- 6.7.3 单元测试
- 6.8 小结
- 第七章 学生管理
- 7.1 班级列表组件
- 7.2 新增学生
- 7.2.1 exports
- 7.2.2 自定义验证器
- 7.2.3 异步验证器
- 7.2.4 再识DI
- 7.2.5 属性型指令
- 7.2.6 完成功能
- 7.2.7 小结
- 7.3 单元测试进阶
- 7.4 学生列表
- 7.4.1 JSON对象与对象
- 7.4.2 单元测试
- 7.4.3 分页模块
- 7.4.4 子组件测试
- 7.4.5 重构分页
- 7.5 删除学生
- 7.5.1 第三方dialog
- 7.5.2 批量删除
- 7.5.3 面向对象
- 7.6 集成测试
- 7.7 编辑学生
- 7.7.1 初始化
- 7.7.2 自定义provider
- 7.7.3 更新学生
- 7.7.4 集成测试
- 7.7.5 可订阅的路由参数
- 7.7.6 小结
- 7.8 总结
- 第八章 其它
- 8.1 打包构建
- 8.2 发布部署
- 第九章 总结