Angular 学习（二）：Angular 简介

怼烎@ 2021-09-29 01:44 724阅读 0赞

### 文章目录 ###

*   *   *  一、 Angular 介绍
         *   *  AngularJS
             *   *  特性
                 *  存在的问题
             *  Angular
             *   *  新特性
         *  二、 AngularJS 架构与 Angular 架构
         *   *  AngularJS 架构
             *  Angular 架构
         *  三、 Angular 项目目录介绍
         *  UI 库
         *  参考项目
         *  参考

### 一、 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 框架  
![angularJS][]

#### Angular 架构 ####

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

### 三、 Angular 项目目录介绍 ###

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

*  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][https_github.com_akveo_ngx-admin]

ng-alain: [https://github.com/ng-alain/ng-alain][https_github.com_ng-alain_ng-alain]

NiceFish: [https://gitee.com/mumu-osc/NiceFish][https_gitee.com_mumu-osc_NiceFish]

### 参考 ###

Angular 组件基础内容：[https://gitee.com/learn-angular-series/learn-component][https_gitee.com_learn-angular-series_learn-component]

[angularJS]: /images/20210920/2e0feb3dd4e34c4bbd76569ceff08223.png
[angular]: /images/20210920/f79bff240ce844c795286f6e513f1e28.png
[angular 1]: /images/20210920/d277aeae48434e9dbc45e8bd656ba7df.png
[20190725110239568.png]: /images/20210920/4cb06d30eb954ceaa99d80ce4a277638.png
[PrimeNG]: https://primefaces.org/primeng/#/
[NG-Zorro]: https://ng.ant.design/docs/introduce/zh
[Jigsaw]: https://jigsaw-zte.gitee.io/latest/#/
[Clarity]: https://design.teambition.com/
[Angular-Material]: https://material.angular.io/
[lonic]: https://ionicframework.com/
[https_github.com_akveo_ngx-admin]: https://github.com/akveo/ngx-admin
[https_github.com_ng-alain_ng-alain]: https://github.com/ng-alain/ng-alain
[https_gitee.com_mumu-osc_NiceFish]: https://gitee.com/mumu-osc/NiceFish
[https_gitee.com_learn-angular-series_learn-component]: https://gitee.com/learn-angular-series/learn-component