【前端】—聊聊我认识的Angular

前言

    最近接触的项目前端用到了Angular框架，之前略有耳闻，从vue换到Angular,感觉东西差不多，还是要系统学习的，先来了解下。

正文

1、Angular 的发展

AngularJS 是一款来自Google的前端JavaScript框架，也是SPA(single-page-application,单页应用)框架，体积小，但是功能强大，极大地简化了前端开发的负担，帮助开发者从事WEB开发。

Angular 其实是AngularJS，在Angular1的时候还是AngularJs，从Angular2 已经开始叫Angular，随着版本的不断更新升级，现在已经从Angular2直接跳到了Angular4,再到Angular5,Angular6。Angular1基于JavaScript的框架， 主要用于PC端的web 开发；Angular2 基于TypeScript的框架，对于移动应用，Angular2 及以后的版本有更佳的用户体验，越来越快了。

2、为什么选择Angular?

• Angular 是一个完整的框架，将需要的所有功能做了不错的整合，vue 需要开发者做很多的选择。
  
• Angular的开发文档更全，世界范围内社区更活跃；Angular 是一个谷歌团队在维护，vue 是一个人在维护。
• Angular是熟悉后端开发技术的福音，Angular 引用了依赖注入与服务的概念，使后端程序员更快了解。
• 更多

3、Angular 基本介绍

    Angular主要分为八大构造块：模块、组件、模板、元数据、数据绑定、指令、依赖注入。
【模板】
模板是在页面中要显示的内容，也就是html文件，以Html的形式告诉Angular如何渲染组件。
【组件】
一个组件控制着屏幕上的一块我们称为视图的区域，也是自定义的一段html代码，我们给他起个名字，就可以当做html的标签使用了。

<div>
  <my-app><my-app>//可以像原生标签一样添加属性，而且组件能接收的属性更丰富
           //标签里面也可以放内容
div>

【服务】
封装业务逻辑。
【模块】
将一系列的组件、指令和服务整合到一起，提供一个完整的功能。
【指令】
指令是包含指令元素的一个类，允许你向html元素中添加自定义行为，根据指令动态渲染页面。

【元数据】
元数据告诉我们如何处理一个类。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

【依赖注入（DI）】
Angular使用依赖注入来提供新组件以及组件所需的服务。

 constructor(public measageService:MessageService) { }

【数据绑定】
一种数据处理模式，是数据模型（model）与视图（view）组件的自动同步，当模型改变时，视图就能反映这种改变，反之亦然。

实际上，模板、组件、元数据共同定义了angular的视图。
下面这张图展示了这些部分是如何关联起来的：

说明：
模板渲染组件，数据绑定提供了数据模型和视图之间的数据流方式，元数据修饰组件，服务提供逻辑，组件提供页面的展示，依赖注入为组件提供了服务入口，模块对应着一个功能的开发。

4、Angular 的MVVM框架

• View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
• ViewModel：它负责View和Model的交互和协作，负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；
  在angular中$scope对象充当了这个ViewModel的角色；
• Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；
• Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。

总结

    以上介绍了对于angular的宏观认识，具体在项目中的用法及其他细节知识，将在后续博客中一一介绍。