Isolate State Mutations in Angular Components

Lukas Ruebbelke
InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

Mike
Mike
~ 5 years ago

Is there any reason you would choose Object.assign instead of angular.copy?

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 5 years ago

I generally prefer native implementations unless there are good reasons to use an alternate implementation. As far as I know there is not a version of angular.copy in Angular 2 while Object.assign is here to stay. With that said, you could use angular.copy and it would work just fine.

Yeray
Yeray
~ 5 years ago

Hi Lukas, Is there any advantage of using controllerAs syntax and not the value "$ctrl" set by default in the components

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 5 years ago

This is in part due to personal preference but I find that explicitly defining controllerAs is more self-documenting than using $ctrl across the board. I have also found that in pre-existing code bases, it helps with consistency as most everything else is using controllerAs.

Michael
Michael
~ 5 years ago

We've used typescript since day 1 with angular, am curious if you think this would be a viable approach https://hotell.gitbooks.io/ng-metadata/content/ for 1x code bases versus your es6 approach.

Lukas Ruebbelke
Lukas Ruebbelkeinstructor
~ 5 years ago

I definitely think that is a viable approach and for the most complimentary to my approach. I see the TypeScript approach being an extension of what I am talking about. ES6 and TypeScript are great because they encourage a better architecture at the language level.