【前端】—聊聊我认识的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的宏观认识,具体在项目中的用法及其他细节知识,将在后续博客中一一介绍。

猜你喜欢

转载自blog.csdn.net/zt15732625878/article/details/80378201