一. 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方法通过依赖注入到相应的控制器中。

使用AngularJS实现的前后端分离的数据交互过程的更多相关文章

  1. 前后端分离后API交互如何保证数据安全性

    前后端分离后API交互如何保证数据安全性? 一.前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC ...

  2. [开源] angularjs + Asp.net 前后端分离解决方案

    本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ...

  3. AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC

    一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...

  4. 前后端分离-模拟数据之RAP2快速入门

    是啥? RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率.我们的口号:提高效率,回家吃晚饭! 可视化编辑, ...

  5. 前后端分离后API交互如何保证数据安全性?

    一.前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了 ...

  6. 前后端分离构架 与 json ajax简介

    前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服 ...

  7. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  8. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  9. 在前后端分离Web项目中,RBAC实现的研究

    最近手头公司的网站项目终于渐渐走出混沌,走上正轨,任务也轻松了一些,终于有时间整理和总结一下之前做的东西. 以往的项目一般使用模板引擎(如ejs)渲染出完整页面,再发送到浏览器展现.但这次项目的处理方 ...

随机推荐

  1. MSCRM 2011 JavaScript 开发文档

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91eXVqaWUxMTI3/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. Java之进阶(1) -《Effective Java》

    第1章 引言 第2章 创建和销毁对象 第1条:考虑用静态工厂方法代替构造器(Consider static factory methods instead of constructors) 第2条:遇 ...

  3. ThreadPoolExecutor中策略的选择与工作队列的选择(java线程池)

    工作原理 1.线程池刚创建时,里面没有一个线程.任务队列是作为参数传进来的.不过,就算队列里面有任务,线程池也不会马上执行它们. 2.当调用 execute() 方法添加一个任务时,线程池会做如下判断 ...

  4. myDate97 设置开始时间和结束时间

      myDate97 设置开始时间和结束时间 CreationTime--2018年8月28日16点46分 Author:Marydon 1.简单示例 第一步:引入My97DatePicker/Wda ...

  5. 〖Linux〗使用root权限,telnet登录开发板

    1. 在开发板上的/etc/securetty添加 pts/ pts/ pts/ pts/ 2. 设定开发板的root密码 [root@Link /root]# passwd Changing pas ...

  6. 开源爬虫Labin,Nutch,Neritrix介绍和对比

    crawler 开发 语言 功能 单一 支持分布式 爬取 效率 镜像 保存 Nutch Java × √ 低 × Larbin C++ √ × 高 √ Heritrix Java √ × 中 √ ** ...

  7. 【LeetCode】98. Validate Binary Search Tree (2 solutions)

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  8. C#:Application操作(待补充)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. exception in initAndListen: 12596 old lock file, terminating

    #mongd -f /etc/mongodb.conf时报错 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFjc29uX2JhaQ==/font/5a ...

  10. js 根据title从下级往上级查找

    var menuData = [{ name: 'manage', title: '测试1', icon: 'home', }, { title: '测试2', name: 'car-parent', ...