[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 ...
随机推荐
- JavaScript函数 bind call apply区别
1. apply calll 在JavaScript中 call 和 apply 都是为了改变某个函数运行时上下文而存在的, 换句话说就是为了改变函数内部的this的指向. 这里我们有一个新的对象 b ...
- IIS 7 支持10万并发请求
原文链接:http://www.cnblogs.com/dudu/archive/2009/11/10/1600062.html 今天下午17点左右,博客园博客站点出现这样的错误信息: Error S ...
- WPF bitmap转bitmapimage 使用 CreateBitmapSourceFromHBitmap内存泄漏
IntPtr f = bmp.GetHbitmap(); img.Source = System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitm ...
- 编译Boost 详细步骤
vs2008编译boost [一.Boost库的介绍] Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一. Boost库由C++标准委员会 ...
- 解决Sublime-Text-3在ubuntu下中文输入的问题
在ubuntu下使用ST这神器已经一段日子了,但是一直有个纠结的问题,就是中文输入非常坑爹,曾经一段时间,使用inputHelper这个插件来解决, 但是……每次都要按个快捷键,弹出一个小小小框来输入 ...
- 火狐的bug
初次启动火狐的界面并且默认是最大化的情况下,第一个业签时会发现火狐的浏览器无法达到下边框,请看图 途中可以看到,body区域没有填充满浏览器可用区域.但是当浏览器已经启动页签,现在是第二个页签时,则不 ...
- Small factorials Solved Problem code: FCTRL2
import sys def fact(n): final = n while n > 1: final *= n - 1 n -= 1 return final #逻辑严谨,不要忘了retur ...
- 记事本创建servlet在tomcat中发布基本思路
在webapps中新建文件夹H,在其中再创建WEB-INF文件夹,在创建classes文件夹和web.xml文件,web.xml需要配置一下,classes文件夹中存放Servlet经编译过的clas ...
- android 登录界面
http://blog.csdn.net/jiabinjlu/article/details/6920967 http://blog.csdn.net/myserverthepeople/articl ...
- HDU 4035 Maze(树形概率DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4035 题意:一棵树,从结点1出发,在每个结点 i 都有3种可能:(1)回到结点1 , 概率 Ki:(2 ...