Node & Angular 4 学习记录（二）-- Angul

Node & Angular 4 学习记录（二）-- Angular 4

    前一篇我们记录了Node和相关使用，本篇我们记录一下Angular 4。说到Angular 4我还是存了一些怨念的，因为它和Angular.js的1.x版本差别太大，可以说已经不是一个东西了，不过好在好的东西都留了下来，是一个好的方向的提升。写Angular 4官方更希望我们用TypeScript来写一个Angular App，而我也是这样做的。

    Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架。该框架包括一系列库，有些是核心库，有些是可选库。我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务。然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

    下面介绍一下Angular的八个主要构造块和其他特性模块

• 模块：Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。
• 组件：组件负责控制屏幕上的一小块区域，我们称之为视图。
• 模板：我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。
• 元数据：元数据告诉 Angular 如何处理一个类。
• 数据绑定：Angular支持单向和双向数据绑定。
• 指令：Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。
• 服务：服务是一个广义范畴，包括：值、函数，或应用所需的特性。几乎任何东西都是一个服务，它应该做一件特定的事情并把它做好。
• 依赖注入：“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
• 动画：用 Angular 的动画库让组件动起来，而不需要对动画技术或 CSS 有深入的了解。
• 变更检测：变更检测文档会告诉你 Angular 是如何决定组件的属性值变化，什么时候该更新到屏幕， 以及它是如何利用区域 (zone) 来拦截异步活动并执行变更检测策略。
• 事件：事件文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。
• 表单：通过基于 HTML 的验证和脏检查机制支持复杂的数据输入场景。
• HTTP：通过 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。
• 生命周期钩子：通过实现生命周期钩子接口，可以切入组件生命中的几个关键点：从创建到销毁。
• 管道：在模板中使用管道转换成用于显示的值，以增强用户体验。例如，currency管道表达式，它把价格“42.33”显示为$42.33：
  <pre>price | currency:'USD':true</pre>
• 路由器：在应用程序客户端的页面间导航，并且不离开浏览器。
• 测试：使用 Angular 测试平台，在你的应用部件与 Angular 框架交互时进行单元测试。

    这样我们大概就能了解Angular是一个什么样的前端框架，和我们已有的认识做一些对比，接下来我们还是来构建项目：

项目伊始

    同样我们可以使用Node来下载并构建Angular项目，也可以下载Git上相关的quickstart项目，当然IDE也能生成一个简单的quickstart项目，但这都不一定是你想要的，所以我们就来自己用命令构建一个Angular 4项目吧。再构建项目之前，我们还是要做一下技术选型，譬如我们要用什么UI模块，用什么做国际化，用什么做模块管理，用什么打包前端代码。首先我们要确定我们要使用的模块管理工具，Angular官网使用过的是SystemJS，我们这里采用angular-cli，版本号前文也有提到。angular-cli可以让我更简单的工作，生成文件，打包文件，启动一个简单的服务器供前端代码开发时候使用。angular-cli的打包其实就是封装了webpack，有对应的配置文件，也可以用命令导出webpack相应的配置文件。下面我们来构建一个项目：

// 安装angular-cli
$ npm install -g angular-cli
// 构建angular app
$ ng new mean-app
// 进入程序根目录
$ cd mean-app
// 可以启动跑起来啦
$ ng serve

接下来很多关于angular的技术就不一一赘述，文档都很清楚，和上篇一样说一点坑和参考文档吧。

• 需要注意angular的跟模块很重要，每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
• 当应用很大的时候会有很多特性模块，用户没有必要再第一次访问就加载每一个特性模块，我们可以使用打包工具控制，也可以用angular的路由来控制特性模块的加载，使用异步路由惰性或者预加载模块。
• 应用访问的安全性也可以使用angular的路由守卫，再进入这个路由页面前进行验证及授权。
• 做纯前端部署的时候一定要设置baseUrl。
• 目录一定要清楚规范，注重组件复用性。
• http请求和跨域请求可以分别封装，angular.js的1.x版本使用的promise对象，angular 4推荐使用Observable
• 官网推荐的国家化配置方式我并不喜欢，可能也是因人而异，我们采用的是自己写一个服务，之后注入到angular app
• 有angular.js经验的一定看到差别，不能把angula.js的指令或者其他什么用到angular 4上
• angular 4也有提供把angular.js慢慢过渡到angular 4的方式，不过。。。差别那么大，重写也不多废多少气力了。
• angular
• angular-cli
• promise
• RxJS & Observable
• primeng(目前angular最大的组件库）
• webpack

完成了angular程序我们是要部署到生产环境的，下一篇记录一下我们是如何部署的。

这里是上一篇

想写一些东西分享，欢迎转载，请注明出处。
简书-板凳儿儿
https://www.jianshu.com/p/6df6d1b9073c