Angular 学习（二）：Angular 简介

一、 Angular 介绍

在介绍 Angular 之前， 需要介绍一下 Angular 的前身 AngularJS。

AngularJS

特性

• 模板功能强大丰富 如： 数据双向绑定；
• 比较完善的前端 MVC 框架， 包含模板、 数据双向绑定、 服务、 路由、 依赖注入、 模块化、 过滤器等；
• 引入了 Java 的一些概念， 如依赖注入、 单元测试等， 可以很容易地编写可复用的代码；

存在的问题

• 性能问题

数据双向绑定， 是一把双刃剑。 随着组件的增加， 项目越来越复杂， 数据双向绑定会带来性能问题。 由于 AngularJS 实现了数据脏检查机制， 当变量、 对象改变时， 会发出通知， 跟踪数据的改变， 动态地更新用户界面。 在 AngularJS 的作用域中， 任何的数据操作都会引起数据的脏检查。 当随着绑定的数量的增加， 性能会越来越差。

• 路由功能单一

路由指令只能有一个， 不能嵌套。

• 作用域

AngularJS 中的作用域把 AngularJS 的执行环境和浏览器的环境隔离开， 所有原生的事件都无法影响 AngularJS 的作用域， 原生事件无法直接绑定。

• 表单验证

AngularJS 中表单显示错误信息的功能比较薄弱， 需要写很多的模板标签。

• JavaScript 语言本身问题

JavaScript 没有类型系统， 面向对象的能力不足。 Angular 使用 TypeScript 语言。

以上存在的问题都在 Angular 中已经解决。

Angular

新特性

• 命令行工具 Angular CLI

方便开发， 如构建基础项目、 生成组件、 调试、 编译、 部署代码、 运行自动化单元测试等。

• 服务器端渲染

快速加载单页应用， 可以使单页应用针对每一个视图做 SEO（搜索引擎优化）。

• 移动和桌面兼容

二、 AngularJS 架构与 Angular 架构

AngularJS 架构

基于 MVC 框架

Angular 架构

基于组件树， 用户看到的界面就是组件树上几个被激活的组件组成， 用户可以通过操作从一个组件路由到另一个组件。 组件可以通过 DI（依赖注入） 引入一些服务， 并用这些服务处理用户的操作， 或与服务器通信。

三、 Angular 项目目录介绍

命令行工具是按一定的规则生成的项目文件， 所以不要随便更改生成的文件， 否则会引起命令行工具的一些功能无法使用。

• e2e

端到端的测试项目， 用于自动化测试

• node_modules

存放第三方的依赖包

• src

源代码目录

• app

存放应用的代码

• assets

存放静态资源， 如图片

• environments

存放 angular 环境配置文件

• index.html

整个应用的根 html

• karma.conf.js

karma 单元测试配置文件

• main.ts

整个应用程序的入口， 项目的启动文件， 引导 angular 程序的启动

• polyfills.ts

导入一些必要的库

• styles.css

全局的 CSS 样式配置文件

• test.ts

单元测试文件

• angular.json

angular 命令行工具的配置文件

• package.json

标准 npm 配置文件

UI 库

• PrimeNG： 到目前为止最完善的开源免费 UI 组件库
• NG-Zorro：来自阿里云的开源组件库
• Jigsaw：来自 ZTE 中兴通讯的开源组件库
• Clarity：来自 Vmware 的组件库
• Angular-Material：Angular 官方提供的组件库（不推荐使用）
• lonic：专门为 Angular 设计的移动端组件库

参考项目

ngx-admin: https://github.com/akveo/ngx-admin

ng-alain: https://github.com/ng-alain/ng-alain

NiceFish: https://gitee.com/mumu-osc/NiceFish

参考

Angular 组件基础内容：https://gitee.com/learn-angular-series/learn-component