[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)">&times;</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.