使用AngularJS实现的前后端分离的数据交互过程

清疚 2022-05-08 13:12 206阅读 0赞

### 一. AngularJS简介 ###

1.  AngularJS是什么
    
    > AngularJS是一个开源Web应用程序框架。最初是由MISKO Hevery和Adam Abrons于2009年开发，现在是由谷歌维护。
2.  AngularJS的特性
    
    > 1.  AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。
    > 2.  AngularJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型-视图-控制器)的方式来编写客户端应用程序。
    > 3.  AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。
    > 4.  AngularJS是开源的，完全免费的，并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。  
    >     总体来说，AngularJS是一个用来构建大型应用，高性能的Web应用程序的框架，同时使它们易于维护。
3.  AngularJS的核心特征
    
    > 1.  数据绑定: 模型和视图组件之间的数据自动同步。
    > 2.  适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。
    > 3.  控制器: 这些Javascript函数绑定到特定的范围。
    > 4.  服务: AngularJS配有多个内置服务，例如$http可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。
    > 5.  过滤器: 从一个数组的条目中选择一个子集，并返回一个新的数组。
    > 6.  指令: 指令是关于DOM元素标记(如元素，属性，CSS等等)。这些可以被用来创建作为新的，自定义部件的自定义HTML标签。AngularJS设有内置指令(如：ngBind，ngModel...)
    > 7.  模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html)，或使用“谐音”在一个页面多个视图。
    > 8.  路由: 它是切换视图的概念。
    > 9.  模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型，视图和控制器)，每个都有不同的职责。
    > 10. 深层链接: 深层链接，可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。
    > 11. 依赖注入: AngularJS有一个内置的依赖注入子系统，开发人员通过使应用程序从而更易于开发，理解和测试。

### 二. 场景简介 ###

1.  后端全是REST风格API；
2.  前端通过AngularJS实现；

### 三. 前后端交互过程 ###

1.  前端通过AngularJS的路由功能来区分不同的逻辑页面并将不同的页面绑定到对应的控制器上；
2.  控制器负责将相应的数据和方法绑定到页面元素并执行相应的操作（包括factory方法的调用）；
3.  工厂方法主要用来动态获取（REST）页面的数据，即请求server端的路由（比如：overview/overview），调用相应的路由函数获取数据；
4.  factory方法通过依赖注入到相应的控制器中。