Angular学习笔记

简介: angular是面向未来的前端开发框架,学习她理解思想比代码重要,体现的是跨越前后端、大成、优秀的编程思想。她是一个完善的工具链和开发链。写angular,你会感觉是在写java,更像写c#,面向对象和组件化的思想。

angular是面向未来的前端开发框架,学习她理解思想比代码重要,体现的是跨越前后端、大成、优秀的编程思想。她是一个完善的工具链和开发链。

写angular,你会感觉是在写java,更像写c#,面向对象和组件化的思想。

我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。

angular是围绕组件化构建整个项目的,辅助功能:指令,服务,管道等

img_bfe8747fefdd21991fb3ae54cb741d0c.png
img_9a085cec57e2f778b9f3d1c52992077d.png
所有的文件类型

组件:模块

每个 Angular 应用至少有一个模块(根模块),习惯上命名为AppModule

组件间通信

传入(父对子组件通信) @Input()
传出(子对父组件通信) @Output()
Service(因为service是全局单例的)
路由方式

生命周期钩子

img_55799d26ace5e4a3d78e844b4851eb2e.png
生命周期钩子

管道

img_7938151d74d9edf1f596e4a6c35294fa.png
内置管道

模块懒加载

img_f4ade40cbdebaa949f90d9f1aca35256.png
模块和懒加载

路由和动态加载

img_34d3ee36ca35be557756c5d8e589d605.png

路由传递参数

img_bb277b8792371fec4772b0fa55f38f36.png
img_d8262dd97d2213e943bd71bece188339.png

路由守卫

img_71f42a8998b0393e850b09a747899cfc.png
注入一个服务来判断是否可以访问该路由

表单和数据校验

  • 模板驱动型表单 (内容都写在html中)
  • 响应式表单(把逻辑放到class中也就是js中)
  • 动态表单(表单几乎都是由js代码动态创建的)
    数据校验
img_42508a3a424ee616f47b03d4eb75ef98.png
内置数据校验规则

自定义的校验规则可以借助指令来实现

相关文章
|
7月前
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
72 0
|
7月前
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
39 0
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
118 0
Angular Universal 学习笔记
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
153 0
Angular Form (响应式Form) 学习笔记
|
JSON API 数据格式
Angular CLI builder 学习笔记
Angular CLI builder 学习笔记
103 0
Angular CLI builder 学习笔记
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
173 0
Angular library 学习笔记
|
设计模式 JavaScript 前端开发
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
293 0
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
|
JavaScript 开发者
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法
Angular Jasmine 里一些常用概念学习笔记 - describe, it, beforeEach的用法
describe: 定义一个test spec group,用来包裹多个specs,也称为suite:
257 0
Angular Jasmine 里一些常用概念学习笔记 - describe, it, beforeEach的用法

热门文章

最新文章