[Immutable + AngularJS] Use Immutable .List() for Angular array
const stores = Immutable.List([
{
name: 'Store42',
position: {
latitude: 61.45,
longitude: 23.11,
},
address: 'whatever'
},
{
name: 'Store2',
position: {
latitude: 61.48,
longitude: 23.87
},
address: 'whatever'
},
{
name: 'Store3',
position: {
latitude: 61.41,
longitude: 23.76
},
address: 'whatever'
},
{
name: 'Store4',
position: {
latitude: 61.42,
longitude: 23.40
},
address: 'whatever'
}
]); class StoreService {
constructor( $q) {
this.$q = $q; this.mockStores = stores;
} getStores( position ) {
return this.$q( ( resolve )=> {
return resolve( this.mockStores.toArray() );
} );
}
} export default ( ngModule ) => {
ngModule.service( 'StoreService', StoreService );
}
Try to only keep 'serivce' to deal with Immutable data, controller should have no knowledge about whether the data in mutable type or immutable type.
So when return the data to the controller, we sue '.toArray()' method to convert the Immutable data structure to normal Javascript array method.
------------------------------
The reason here we use both 'const' and Immutable is because:
const _person = {
name: "Zhentian"
};
class StoreService {
constructor( ) {
this.person = _person;
this.person.name = "John";
console.log(_person.name); // --> John
}
}
export default ( ngModule ) => {
ngModule.service( 'StoreService', StoreService );
}
In the contructor we define: '_person' assign to 'this.person', even _person is const type, but when we try to modiy the data thougth this.person object, we found actually we are able to do that.
So the const is not safe when deal with object!
So we still need Immutable to help us to keep data immutable.
[Immutable + AngularJS] Use Immutable .List() for Angular array的更多相关文章
- [Immutable.js] Transforming Immutable Data with Reduce
Immutable.js iterables offer the reduce() method, a powerful and often misunderstood functional oper ...
- Immutable Collections(3)Immutable List实现原理(中)变化中的不变
Immutable Collections(3)Immutable List实现原理(中)变化中的不变 文/玄魂 前言 在上一篇文章(Immutable Collections(2)Immutabl ...
- [AngularJS] Isolate State Mutations in Angular Components
Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem ...
- [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types
Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable ...
- AngularJS开发指南3:Angular主要组成部分以及如何协同工作
AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...
- AngularJS入门讲解1:angular基本概念
AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...
- AngularJS学习(二)——Angular应用的解析
本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式 模板(Template) 模板是您用HTML和CSS编写的文件,展现应用的视图.您可给HTML添加新的 ...
- [AngularJS] Adding custom methods to angular.module
There are situations where you might want to add additional methods toangular.module. This is easy t ...
随机推荐
- javaweb 学习的好地方
http://www.cnblogs.com/xdp-gacl/p/3729033.html 强烈推荐这个哥们的学习笔记.太赞了.
- hdu Phone List
Problem Description Given a list of phone numbers, determine if it is consistent in the sense that n ...
- PAT 64.Complete Binary Search Tree
题目链接: http://pat.zju.edu.cn/contests/pat-a-practise/1064 思路分析: 1)先对数组排好序. 2)采用中序遍历的方式,将排好序的元素逐个插入在完全 ...
- mysql to sql sersver
USE SCK_PARA GO /****** Object: StoredProcedure [dbo].[syncdata_mysql2sqlserver] Script Date: 08 ...
- freemarker 的replace功能
替换字符串 replace ${s?replace(‘ba’, ‘XY’ )} ${s?replace(‘ba’, ‘XY’ , ‘规则参数’)}将s里的所有的ba替换成xy 规则参数包含: i r ...
- windows安装Apache HTTP服务器报错:无法启动,因为应用程序的并行配置不正确
Apache HTTP服务器安装后报:无法启动,因为应用程序的并行配置不正确-(已解决) 0条评论 [摘要:本创做品,出自 “深蓝的blog” 专客,迎接转载,转载时请务必说明出处,不然有权穷究版 ...
- 制作 leanote docker 镜像
leanote 使用 mongodb 存储数据,如果把 mongodb 单独做成一个镜像,初始化数据时比较麻烦,所以最后还是决定把 mongodb 和 leanote 放到同一个镜像里边. docke ...
- Python 购物车---之商家部分
知识点:文件写入操作, 函数, 函数递归 #!C:\Program Files\Python35/bin # -*- conding:utf-8 -*- # author: Frank # 定义商品列 ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- AFNetworking实现 断点续传
用AFNetworking实现断点续传,暂停,继续 AFNetworking断点续传暂停恢复 AFNetworking的版本:platform:ios,'7.0' pod "AFNetw ...