zoukankan      html  css  js  c++  java
  • AngularJS数据双向绑定

    AngularJS是近些年流行的前端语言,通过新的属性和表达式扩展了HTML,克服了HTML在构建应用上的不足。Angular声明式的模板功能强大,自带了丰富的指令,是一个完善的前端MVVM框架,实现了数据双向绑定、过滤器、依赖注入、模块化、服务等功能。AngularJS实现数据双向绑定分别表现在与浏览器交互和与用户交互。

    1.1.1 AugularJS与浏览器交互

    当浏览器访问到AngularJS脚本时,浏览器做了如下操作:

    1. 加载html,对DOM进行解析;
    2. 加载angularJS脚本;
    3. AngularJS等待DOMContentLoaded事件的触发;
    4. AngularJS寻找ng-app指令,找到应用程序边界;
    5. ng-app中指定的模块配置$injector;
    6. 使用$injector创建$rootScope和$complie服务;
    7. 使用$complie服务编译DOM并把它链接到$rootScope上;
    8. ng-init指令对$scope的变量进行赋值;
    9. 对表达式{{变量}}进行替换。

    整个流程图如图2-1所示。

     

    2-1 AngularJS与浏览器的交互图

    1.1.2 AugularJS与用户交互

    AngularJS与用户交互过程,整体上分为三个阶段:

    1. 浏览器的事件回路一直处于等待事件触发的状态,这些事件包括用户的交互操作、网络事件和定时事件。
    2. 一旦有事件触发浏览器的事件回路,就会进入Javascriptcontext中,使用回调函数对DOM进行修改。
    3. 回调函数执行完后,浏览器根据新的DOM进行重新渲染。

    AngularJS与用户的交互流程如图2-2所示。

     

    2-2 AngularJS与用户的交互图

  • 相关阅读:
    Ecshop屏幕wap
    SQLite命令
    初识SQLite
    last_insert_id()
    php中的全局变量global(低级错误啊)
    在搜索框加入语音搜索
    解压zip文件出现bash:unzip:commond not found
    DataView.RowFilter使用
    设计自己的模板引擎(一)模板替换中的嵌套循环处理
    没完没了的Cookie,读懂asp.net,asp等web编程中的cookies 
  • 原文地址:https://www.cnblogs.com/ACMessi/p/8728762.html
Copyright © 2011-2022 走看看