揭秘Angular(2):Angular简介

作者: 麻辣阁 分类: Angular 发布时间: 2019-01-13 22:13

Angular 的七大核心概念

  • 指令和组件两个概念强相关
  • 模板和数据绑定两个概念强相关
  • 服务和依赖注入两个概念强相关

1.模块: Modules

在 Web开发中,通过依赖全局状态或变量, 以及JavaScript文件引入顺序, 来保证正确加载相应的类库.

在新的语言标准 ES6中, 提供了 import 来导入其他文件中定义的模块, 用 export 将诸如 JQuery,moment 这样的依赖到处到业务代码模块中

2.指令:Directives

  • 指令可以为特定的 DOM 元素添加新的行为特征, 从而扩展元素的功能
  • 指令与HTML元素属性的使用方式非常相似, 其可自定义性弥补了 HTML 元素属性功能的不足, 为多样的 Web前端开发创造了更多的可能性

3.组件: Components

  • 组件是指令的一种类型.
  • 组件用于处理界面和交互相关的功能
  • 以组件为基础的架构模式是现在 Web前端开发的主流模式,开发方式就是构建一个个小的组织代码单元, 每个代码单元的职责定义清晰,并且可以在多个应用中复用.例如:想使用 Google地图组件, 就在页面引入如下所示的语义化标签:
<google-map pointer="46.471089,11.332816"></google-map>
  • 在 Angular中, 组件是”一等公民”
  • 一般来说, 每个 Angular 应用都是一颗组件树, 由应用组件(或者称为顶层的根组件)和许多子组件及兄弟组件组成
  • 组件树是很重要的概念,有很多作用, 比如:
    • 能形象的勾勒出UI界面的组成
    • 这种树形结构也体现了从一个组件到另一个组件的数据流动
    • Angular 也依赖组件树做出合适的变化检测策略. 变化检测是 Angular 在应用的数据变化后,用于决定哪个组件需要随之刷新的机制.

4.模板: Templates

当使用组件标签时,可以通过 template 或 templateUrl属性引入 HTML 来描述让 Angular渲染显示的界面内容.

5.数据绑定: Data Binding

数据绑定机制用来实现把数据映射到模板上, 或者从模板(如 input组件)中取回数据

6.服务:Services

  • 服务用于书写和放置可重用的公共功能(如日志处理,权限管理等), 以及复杂的业务逻辑的地方
  • 服务可以被共享, 从而可以被多个组件复用
  • 在 Angular中,一个服务就是一个简单的类
  • 通常在组件中引用服务来处理数据和实现逻辑

7.依赖注入: Dependency Injection

依赖注入可以帮助应用解耦, 一般通过对实现服务的类加上 @Injectable 装饰器,同时把它注册到 Provider(可以在模块,其他服务,根组件,或者需要注入服务的上层组件中实施), 从而将服务提供给调用者使用.

Angular平台简介

Angular是一个平台,二不是简单的类库或者单一的框架.

1.框架核心

  • 编译服务Compile
  • 依赖注入
  • 装饰器支持
  • Zones
  • 变化监测
  • 渲染引擎 Render

2.完善的工具体系

  • Angular CLI命令行: 为开发者提供了工作流自动化解决方案, 涵盖创建项目,生成组件,配置路由,代码格式化,启动开发服务器,构建测试,运行测试,预处理CSS样式和部署前的构建等
  • 语言服务: 支持IDE中的代码补全,语法检查等
  • Augury: 用于调试,分析性能和可视化查看应用组件树,是帮助开发者快速定位问题和调优的工具利器.
  • Lint/Style工具:官方支持的代码风格指南和检查
  • 可以快速搭建项目的 Yeoman Generator, Webpack Starter 等脚手架

3.外部工具库

  • Angular Material: Google官方的 Material 设计风格的 UI组件库
  • Kendo UI, Onsen UI 2 等UI库
  • Angular Mobile Toolkit:提供工具和代码技巧来协助开发高性能的移动应用
  • ionic2, NativeScript, React Native 等移动端技术, 用来开发跨平台的混合或原生应用
  • Angular Universal: 用来实现后端渲染, 从而加速首屏渲染和实现搜索引擎优化等
  • Meteor 等框架, 可以实现 JavaScript 全栈式开发和高效整合

4.辅助模块

  • i18n:国际化
  • 路由模块:用来构建多界面状态的单页应用
  • 动画模块
  • Upgrade模块:升级 AngularJS1.x应用

Angular CLI工程化流程

  • 创建项目
  • 生成组件
  • 启动开发服务
  • 生成路由
  • 格式检查
  • 生成测试
  • 运行测试
  • CSS预处理
  • 生成构建
  • 部署上线

发表评论

电子邮件地址不会被公开。 必填项已用*标注