Angular实战开发
Angular 基础知识
Angular CLI
前端与移动开发在职加薪课 （博学谷） 提取码：7thp
模块
组件
模板
数据绑定
服务
路由
HttpClient（基于RxJS 响应式编程）
等等
实战项目
HMR系统
模块一：登录（用户登录、退出、访问控制）
模块二：员工管理（CRUD）
如何学习Angular
重点一：理解Angular的开发模式
cmＬ46679910
重点二：理清Angular中核心内容之间的关系
多多练习、多多思考
Angular介绍
Google开发的JavaScript前端框架
平台支持：移动端 & 桌面端
应用案例：Google内部600多款不同的产品
满足不同场景下的开发需求 更适合开发现代Web应用
Google开发的JavaScript前端框架
平台支持：移动端 & 桌面端
应用案例：Google内部600多款不同的产品
大而全的框架：从工程化角度出发
编程语言：TypeScript
性能高，体积小
Angular版本说明
AngularJS --> v1.x
Angular --> v2.x 及其以上版本
课程学习 Angular v6 版本（最新版）
知识储备
HTML CSS JavaScript ES6 TypeScript
Angular基础知识
模块
每个应用至少有一个 Angular 模块，称为根模块
它通常命名为 AppModule
根模块的作用：启动应用
模块是独立、封闭的
模块之间的引用通过 导入 和 导出 来完成
模块依赖
模块中包含的内容
组件
服务
指令
注意：这些内容必须在模块中配置后才有效
@NgModule 装饰器
装饰器是一个函数
作用：修饰紧随其后的类或属性
装饰器是 JavaScript 的一种语言特性，处于语法提案的stage 2阶段，是一个试验特性
装饰器又叫做注解
@NgModule是Angular提供的装饰器
用来告诉Angular将这个类当作 模块 来处理
语法：@NgModule({ 元数据对象 })
@NgModule 装饰器的元数据对象
declarations 该模块所拥有的组件
imports 该模块依赖的模块，比如：BrowserModule
providers 该模块所拥有的服务提供商
bootstrap 指定根组件，只有根模块需要该配置项Angular 创建它并插入 index.html 宿主页面。
exports 公开该模块其中的一部分，以便外部模块使用它们
@Component装饰器
selector 选择器（组件名称），对应HTML中的组件名称
template 组件的内联模板
templateUrl 组件模板文件的 URL
styleUrls 组件样式文件数组
数据绑定
1 插值表达式 {{}}
2 属性绑定 [href]=””
3 事件绑定 (click)=””
4 双向数据绑定 [(ngModel)]=””
双向数据绑定
Angular 语言服务
让你能在模板内获得以下功能：
1 自动完成
2 错误检查
3 给出提示
4 内部导航
等功能
学习过的指令
[(ngModel)] 在表单元素中实现双向数据绑定的指令
(click) 事件绑定指令
[href] 属性绑定指令
指令分类
组件 拥有模板的指令
属性型指令 改变元素外观和行为的指令
结构型指令 添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令
[ngClass] 动态添加或移除CSS类
[ngStyle] 动态设置内联样式
结构型指令
*ngIf 控制元素的展示和隐藏
*ngFor 重复器，遍历数据，批量生成元素
*ngFor添加trackBy
目的：提升渲染对象数组的性能
语法：trachBy: trackBy方法名称
todos案例
功能描述
1 任务展示
2 任务添加
3 任务删除
4 任务完成状态切换
todos案例升级
1 分离为专门的组件
2 抽离为模块
todos组件职责说明
父组件（todo） 提供待办事项数据
子组件（todo-header） 任务添加
子组件（todo-list） 任务展示、删除、状态切换
注意：组件是独立的，其它组件不能毫无限制的访问
