[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 by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.
For example you have a bookmark component, and inside the component, you want to update the bookmark. The solution is you create a component just for update bookmark.
<div class="bookmarks">
<div ng-repeat="bookmark in bookmarksListCtrl.bookmarks | filter:{category:bookmarksListCtrl.getCurrentCategory().name}">
<button type="button" class="close" ng-click="bookmarksListCtrl.deleteBookmark(bookmark)">×</button>
<button type="button" class="btn btn-link" ng-click="bookmarksListCtrl.editBookmark(bookmark)">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
</div>
<div ng-if="bookmarksListCtrl.getCurrentCategory()">
<button type="button" class="btn btn-link"
ng-if="!bookmarksListCtrl.currentBookmark"
ng-click="bookmarksListCtrl.createBookmark()">
<span class="glyphicon glyphicon-plus"></span>
Create Bookmark
</button>
</div>
<save-bookmark
ng-if="bookmarksListCtrl.currentBookmark"
bookmark="bookmarksListCtrl.currentBookmark"
save="bookmarksListCtrl.onSave(bookmark)"
cancel="bookmarksListCtrl.reset()">
</save-bookmark>
</div>
And inside the save-bookmark component, you can copy the original data, and modify on the copy data:
class SaveController {
$onChanges() {
this.editedBookmark = Object.assign({}, this.bookmark);
}
} export default SaveController;
This can isolate the component state muataion.
[AngularJS] Isolate State Mutations in Angular Components的更多相关文章
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- AngularJS开发指南3:Angular主要组成部分以及如何协同工作
AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...
- [AngularJS] Adding custom methods to angular.module
There are situations where you might want to add additional methods toangular.module. This is easy t ...
- 关于angularjs的$state.go()与ui-sref传参问题
上次转发过关于angularjs回退的文章,回退用到的还是js的回退功能,直接用history.back();实现功能,当时顺便提了下$state.go()有关路由跳转. 那这回就全面解析下$stat ...
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...
- AngularJS入门讲解1:angular基本概念
AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...
- AngularJS学习(二)——Angular应用的解析
本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式 模板(Template) 模板是您用HTML和CSS编写的文件,展现应用的视图.您可给HTML添加新的 ...
- angularjs 中state.go 跳转并且打开新的浏览器窗口
包子最近遇到业务人员提的非常无厘头的需求,就是调页面的时候,一定要打开一个新的浏览器窗口...>o<奇葩!!! 但是我的页面都是state.go跳转的呀,我各种百度,发现,貌似state, ...
随机推荐
- POJ 1077 Eight
题意:经典的八数码=3= 3*3的格子,里面有1~8这8个数字,还有一个空格x,移动空格的位置,直到移到1~8按顺序排好,输出移动的序列. 解法:看到题果断写了个广搜……然后T了……百度了一下说广搜虽 ...
- C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)
一.效果与思路 效果: 解决方案1 用chart的mousemove时间,实时跟踪鼠标最近的X轴的位置,然后把cursorX设置到那个位置上,让用户知道我是选的那一个X的值,同时用tooltip显示该 ...
- ylbtech-权限管理-数据库设计-功能权限管理技术
ylbtech-DatabaseDesgin:ylbtech-权限管理-数据库设计-功能权限管理技术 DatabaseName:ylb_permission(权限管理-功能权限管理技术)实现 Type ...
- http://jingyan.baidu.com/article/4dc40848e7b69bc8d946f127.html
http://jingyan.baidu.com/article/4dc40848e7b69bc8d946f127.html
- Bug疑难杂症 - java.lang.NoSuchFieldError: udhLen
通过友盟后台记录到一个诡异的错误: HUAWEI C8825D 4.0.4 百度.谷歌都未能找到一丝结果更别提解决方案. java.lang.NoSuchFieldError: udhLen at a ...
- JS单例设计模式
单例,指的是只有一个实例的对象. 在应用单例模式时,生成单例的类必须保证只有一个实例的存在,很多时候整个系统只需要拥有一个全局对象,才有利于协调系统整体的行为.比如在整个系统的配置文件中,配置 ...
- C# 与 VC Dll 传输信息
考虑: 使用string类型传送: 在VC Dll中解析字符: 使用 string 类型将解析的类型传送到C#程序中: 建立VC解析的函数,提高代码可重用性
- hdfs[命令] dfsadmin
Usage: java DFSAdminNote: Administrative commands can only be run as the HDFS superuser. [-report] [ ...
- [HIve - LanguageManual] Hive Operators and User-Defined Functions (UDFs)
Hive Operators and User-Defined Functions (UDFs) Hive Operators and User-Defined Functions (UDFs) Bu ...
- Python字典方法copy()和deepcopy()的区别
from copy import deepcopy # import deepcopy模块 d = {} d['name'] = ['black', 'guts'] # d = {'name': [' ...