【Angular】技术入门

前言

在项目中应用了前端工程化，从而实现了前后端分离，即前后端共同开发互不影响。经过架构组的讨论，最后项目中使用Angular作为前端框架。目前Angular的版本已经升级到6了，项目中为了稳定开发使用的是Angular4。Angular语言是基于TypeScript的。

扩展

• JavaScript：JavaScript(以下简称JS)是一种面向对象的解释型的程序设计语言，基于对象和事件驱动并具有相对安全性的客户端脚本语言。【JavaScript】01入门；
• ECMAScript：是JavaScript的核心之一，定义JS语言的基础；
• ES5：ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。
• ES6：ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。（参考：http://es6.ruanyifeng.com/）
• TypeScript：TypeScript具有类型系统，且是ES5、ES6的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

1、定义

特征

Angular 2比Angular 1更快更容易。

它支持最新版本的浏览器，还支持旧版浏览器，包括IE9 +和Android 4.1+。

它是一个跨平台框架。

Angular 2主要关注移动应用。

代码结构比以前版本的Angular非常简单。

优点

如果应用程序是一个重负载，那么Angular 2保持它完全UI响应。

它使用服务器端渲染在移动设备上获得快速视图。

它适用于ECMAScript和其他编译为JavaScript的语言。

它使用依赖注入来维护应用程序，而不用写太长的代码。

一切都将是基于组件的方法。

为什么要用Angular?

1.开发快速 & 代码生成

2.代码组织 & 代码生成率

3.动态页面

4.跨平台

5.嵌入单元测试

2、工作原理

模板 (Templates)是由 Angular 扩展的 HTML 语法组成，组件 (Components)类用来管理这些模板，应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件，最后通过引导根模块来启动应用

3、环境搭建

node.js

cnpm

TypeScript和typings

@angular/cli——脚手架

开发IDE

webstorm、vscode

命令

参考：https://blog.csdn.net/yxf15732625262/article/details/78578038

4、架构

1、模块 (Modules)

2、组件 (Components)

组件类：用以维护组件的数据模型及功能逻辑

3、模板 (Templates)

模板视图：与用户直接交互，模板视图并不是独立的模块。html

4、元数据 (Metadata)

5、数据绑定 (Data Binding)

1.属性绑定：是一种单向的数据绑定，数据从组件类流向模板。

2.事件绑定：是一种单向数据绑定形式，数据从模板流向组件类。

3.双向绑定：将以上二者结合起来就是双向绑定。

6、指令 (Directives)

指令：与模板相互关联，最重要的作用是增强模板特性，间接扩展了模板的语法。

7、服务 (Services)

服务：是封装若干功能逻辑的单元，这个功能逻辑可以通过依赖注入机制引入到组件内部，作为组件功能的扩展。

8、依赖注入 (Dependency Injection)

9、路由

路由：是控制组件的创建和销毁，从而驱使应用界面跳转切换。

参考博客：https://blog.csdn.net/yxf15732625262/article/details/70552358

用户和模板直接进行交互 模板接收用户的操作后，通过数据绑定和相应的组件类进行交互 组件类完成处理后更新模板视图 服务来扩展组件类，指令来扩展模板

5、实践

将前端生产构建好的包放在Nginx里，配置nginx.conf文件即可实现部署。

https://blog.csdn.net/yxf15732625262/article/details/79140642

6、最后的话

• 本文知识理论依据angular2，此版本较基础，而本人最早在项目中应用时使用的是Angular4，现在很多项目已经升级到Angular5、Angular6了。
• 宏观把控的能力，只有有一张大的知识网体系，在遇到问题时，有对应的解决思路。
• 站在巨人的肩膀上，看更高的风景。文中出现了大量的分享链接，大部分是大牛们的宝贵经验，将这些整合基本上就是自己的知识了。快速学习的渠道之一就该是如此了吧。
• 最后分享一波：

前端开发工程化探讨--基础篇（长文）： https://blog.coding.net/blog/frontend-engineering

angular资源： https://blog.csdn.net/yxf15732625262/article/details/77624388