angular-virtual-dom:一个基于虚拟 DOM 的 AngularJS 视图渲染器,设计用于不可变数据结构

  • O8_212108
    了解作者
  • 850.7KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-14 04:04
    上传日期
angular-virtual-dom angular-virtual-dom 是一个实验性的基于的 AngularJS 视图渲染器,设计用于不可变数据结构,例如和 。 angular-virtual-dom 允许您使用常规的 AngularJS 模板和表达式将数据绑定到 DOM,但在幕后使用 Virtual DOM diffing。 angular-virtual-dom 支持使用指令的可扩展性 - 尽管仅适用于支持 Virtual DOM 的指令。 这意味着 angular-virtual-dom 不是 AngularJS 指令编译器的直接替代品,并且旨在用于有限的上下文。 angular-virtual-dom 适用于 AngularJS 1.2 及更新版本。 用法 angular . module ( 'myModule' , [ 'teropa.virtualDom'
angular-virtual-dom-master.zip
  • angular-virtual-dom-master
  • release
  • angular-virtual-dom.min.js
    21.1KB
  • angular-virtual-dom.js
    52.9KB
  • src
  • clone_tree.js
    451B
  • virtualize.js
    1.2KB
  • v_root_directive.js
    1.2KB
  • v_repeat_directive.js
    2.9KB
  • directive_normalize.js
    610B
  • get_attribute.js
    295B
  • v_if_directive.js
    458B
  • link.js
    2.6KB
  • angular-virtual-dom.js
    259B
  • build
  • angular-virtual-dom.min.js
    21.1KB
  • angular-virtual-dom.js
    52.9KB
  • config
  • karma.js
    280B
  • karma-angular-1.2.28.js
    280B
  • karma-angular-1.4.0-beta.3.js
    286B
  • examples
  • hello
  • index.js
    640B
  • index.html
    906B
  • README.md
    86B
  • package.json
    522B
  • test
  • v_if_directive_spec.js
    904B
  • virtualize_spec.js
    2KB
  • get_attribute_spec.js
    1KB
  • v_repeat_directive_spec.js
    8.6KB
  • link_spec.js
    7.1KB
  • v_root_directive_spec.js
    2.7KB
  • clone_tree_spec.js
    1.5KB
  • lib
  • angular-1.4.0-beta.3
  • angular-mocks.js
    78.2KB
  • angular.js
    963.3KB
  • angular-1.3.12
  • angular-mocks.js
    78.2KB
  • angular.js
    930.3KB
  • angular-1.2.28
  • angular-mocks.js
    67.2KB
  • angular.js
    770.8KB
  • mori.js
    183.1KB
  • immutable.js
    135.4KB
  • virtual-dom.js
    42.4KB
  • bower.json
    392B
  • README.md
    6.9KB
  • .gitignore
    28B
  • files.js
    626B
  • Gruntfile.js
    5.7KB
  • CHANGELOG.md
    384B
  • package.json
    1.2KB
  • LICENSE
    1.1KB
内容介绍
# angular-virtual-dom [![npm version](https://badge.fury.io/js/angular-virtual-dom.svg)](http://badge.fury.io/js/angular-virtual-dom) [![Bower version](https://badge.fury.io/bo/angular-virtual-dom.svg)](http://badge.fury.io/bo/angular-virtual-dom) angular-virtual-dom is an experimental [Virtual DOM](https://github.com/Matt-Esch/virtual-dom) based AngularJS view renderer designed to be used with immutable data structures such as [immutable-js](https://github.com/facebook/immutable-js) and [mori](http://swannodette.github.io/mori/). angular-virtual-dom lets you use regular AngularJS templates and expressions to bind data to the DOM, but uses Virtual DOM diffing behind the scenes. angular-virtual-dom supports extensibility using directives - though only with directives that are Virtual DOM aware. That means angular-virtual-dom is not a drop-in substitute for the AngularJS directive compiler, and is meant to be used in limited contexts. angular-virtual-dom works with AngularJS versions 1.2 and newer. ## Usage ```` js angular.module('myModule', ['teropa.virtualDom']) .controller('MyCtrl', function($timeout) { this.myData = Immutable.fromJS({ cols: [ {name: 'One', cssClass: 'one', key: 'one'}, {name: 'Two', cssClass: 'two', key: 'two'} ], rows: [ {one: 'A1', two: 'B1'}, {one: 'A2', two: 'B2'} ] }); // A new version of the immutable data structure triggers // DOM diffing later. $timeout(function() { this.myData = this.myData.updateIn(['rows'], function(rows) { return rows.push(Immutable.Map({one: 'A3', two: 'B3'})); }); }.bind(this), 1000); }); ```` ```` html <div ng-controller="MyCtrl as myCtrl"> <table v-root="myCtrl.myData"> <thead> <th v-repeat="col in myCtrl.myData.get('cols')" class="{{col.get('cssClass')}}"> {{col.get('name')}} </th> </thead> <tbody> <tr v-repeat="row in myCtrl.myData.get('rows')" class="{{$even ? 'even' : 'odd'}}"> <th v-repeat="col in myCtrl.myData.get('cols')"> {{row.get(col.get('key'))}} </th> </tr> </tbody> </table> </div> ```` * `v-root` establishes a Virtual DOM tree. The `table` tag and all of its descendants will be rendered using [virtual-dom](https://github.com/Matt-Esch/virtual-dom), bypassing Angular's own DOM compiler. * Virtual DOM diffing and patching occurs when `myCtrl.myData` changes. *The whole Virtual DOM tree uses a single (reference) watch*, and only when it fires does the view re-render. The idea is to attach an immutable data structure on the scope, refer to it in `v-root`, and let Virtual DOM diffing take care of updates when new versions of the data structure are produced. * The expressions within the table are normal AngularJS expressions. However, they are *not being watched*, and are only re-evaluated when diffing is triggered by the containing `v-root`. * Directives bundled with angular-virtual-dom can be used within the Virtual DOM tree. Custom directives can also be created (see below). ## Installation ### With NPM / Browserify ``` sh npm install angular-virtual-dom ``` Require the module and include it in your AngularJS modules: ``` js require('angular-virtual-dom') angular.module('myModule', ['teropa.virtualDom']) ``` Or just: ``` js angular.module('myModule', [ require('angular-virtual-dom') ]) ``` ### With Bower The library is available as a Bower dependency: ``` sh bower install angular-virtual-dom --save ``` After installation, add one of the following to your loaded scripts: * `angular-virtual-dom/release/angular-virtual-dom.js` * `angular-virtual-dom/release/angular-virtual-dom.min.js` Finally, include the `teropa.virtualDom` module in your AngularJS modules: ``` js angular.module('myModule', ['teropa.virtualDom']) ``` ## API ### v-root Use the `v-root` directive in your Angular templates to establish a Virtual DOM. This will short-circuit Angular's normal DOM compilation and build the Virtual DOM template from the contained elements. The directive accepts an expression, and changes to that expression's value cause the Virtual DOM tree to be re-rendered: ``` html <div v-root="baseData"> <!-- Nested DOM structures built into a Virtual DOM tree --> </div> ``` ### Expressions Within a `v-root`, any AngularJS expressions are evaluated whenever DOM diffing occurs: ``` html <div v-root="baseData"> <h1 class="{{anExpression}}"> {{anotherExpression}} </h1> </div> ``` Typically, though not necessarily, the expressions will access data from the data structure referred to in `v-root`: ``` html <div v-root="baseData"> <h1 class="{{baseData.headerClass}}"> {{baseData.headerText}} </h1> </div> ``` ### Directives #### v-if Includes the node in the Virtual DOM only when the expression evaluates to a truthy value. Analogous with `ng-if`. ``` html <div v-root="baseData"> <h1 v-if="{{baseData.headerText}}"> {{baseData.headerText}} </h1> </div> ``` #### v-repeat Includes a collection of nodes in the Virtual DOM, for each item in a collection. Analogous with `ng-repeat`. Supports at least the following types of collections: * [immutable-js](https://github.com/facebook/immutable-js) lists, maps, stacks, ordered maps, sets, and ordered sets. * [mori](http://swannodette.github.io/mori/) lists, seqs, vectors, maps, sets, sorted sets, and queues. * JavaScript arrays an objects. Should additionally support any ES6 iterable collections. Usage with sequential data structures: ``` html <ul v-root="data"> <li v-repeat="item in data"> {{item}} </li> </ul> ``` Usage with associative data structures: ``` html <ul v-root="data"> <li v-repeat="(k, v) in data"> {{k}}: {{v}} </li> </ul> ``` Additionally makes the special variables `$index`, `$even`, and `$odd` available within the template scope. ## Writing Custom Directives *Note:* The directive API should be considered highly unstable. Virtual DOM directives are registered as normal AngularJS directives, but must define a `linkVirtual` function in the directive definition object. This should be a *pure function* that take a Virtual DOM node as an argument, and returns a modified Virtual DOM node or collection thereof. The Virtual DOM nodes used by this library always hold a `$scope` attribute, referring to the current scope. A directive may create a new scope and attach it to the `$scope` attribute of the returned node. ## Usage with Mutable Data Structures While angular-virtual-dom is designed to be used with immutable data structures, it is not a hard requirement. Regular, mutable JavaScript data structures and objects work just as well. You will, however, need to manually trigger re-renders by reassigning `v-root` to a new value unless your code does so naturally. ## Contribution Use Github issues for requests. ## Author [Tero Parviainen](http://teropa.info) ([@teropa on Twitter](https://twitter.com/teropa)) Leans heavily on [virtual-dom by Matt-Esch](https://github.com/Matt-Esch/virtual-dom).
评论
    相关推荐
    • angular-models
      用于将基于模型的业务逻辑混合到从 Angular 服务返回的简单 JSON 数据结构中的工具集。 有关更多信息,请参阅“富对象模型和 Angular.js”博客系列: 使用运行测试。 要执行测试,请转到项目根目录并运行: npm ...
    • tutorius:Angular 和 D3.js 应用
      数据结构可视化 ================================ 用法 克隆仓库 安装 凉亭安装 mongod --dbpath ./db 咕噜构建:开发 节点服务器.js
    • angular2-immutable:Angular 2 IterableDiff和KeyValueDiff用于增强不可变数据
      angular2不可变 Angular 2更改检测增强功能可增强不可变数据结构的强大功能。
    • FreeCodeCamp:Javascript算法和数据结构
      JavaScript算法和数据结构 我的个人 :triangular_flag: 我们的目标是完成我的FreeCodeCamp JavaScript算法和数据结构认证,并且 :party_popper: 这里是。 我学到的东西
    • 英文字典 中国地质大学数据结构A上机3
      中国地质大学(武汉)本科教育课程数据结构A的第三次上机实习作业代码文件,主要使用哈希表实现。仅仅提供实现上的参考。
    • angular:Aprendiendo Angular
      角度9 入门课程: 引导安装 创建组件 字符串插值 财产约束 事件绑定 双向绑定 ngIf ngStyle ngClass ngFor 项目大纲: ...深度数据查询: ...通过属性绑定传递数据 通过属性和事件绑定传递数据 ...结构指令
    • 数据结构:用于显示数据结构如何工作的Angular应用程序。 实施接口和设计模式以通用方式使用结构
      数据结构 重要 使用的数据结构: 订购清单 队列 叠放 可以在src / app / shared / models中找到模型 类图 设定指南 该项目是使用版本11.0.5生成的。 您必须已安装节点,运行npm install然后再npm start 进一步的...
    • angular-datastore:角度数据存储
      #角度数据存储 例子 需要pd到您的 angular-app。 var myApp = angular.module('myApp', ['pd']); 创建一个backend服务,它定义您的后端结构。 myApp.factory('backend', function(DS){ var store = DS.connect...
    • angular-treeRepeat:AngularJS 的递归转发器
      这个想法不是拥有一个整体的完整树组件,而是一个低级递归转发器,它允许构建具有任何模板和任何数据结构类型的树。 当然,使用这些低级指令构建的任何类型的树都可以将其自身打包在一个随时可用的指令中。 有5个...
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档