Overview of Angular 2 and what to learn next...
This lesson recaps how all of the pieces of Angular 2 fit together. It ends with encouraging you to learn the latest JavaScript features as Angular 2 will make heavy use of the latest JavaScript language features and patterns.
[00:00] To recap everything we've learned so far, I want to look closely at this todo list component that we built. This component is a bunch of other pieces all working together and fit together into one file. It's two pipes, it's another component used as a child component. It's directives that are automatically included. It's a couple of inputs and it's an injected service.
[00:24] The main key to working with Angular 2 and understanding how to use it is understanding how to bring things in from other files. If you have some data that needs to come into your component, you use inputs.
[00:35] If you have data that needs to be shared between or that'll make requests or things like that, and they're injected through services and providers. If you have components that you need to use, you import them, and then drop them in your directives, and then simply list them. Or pipes for filtering or other types of manipulation, you just include them in the pipes.
[00:56] All those things working together, pipes, directives, inputs, services, then the bundled directives that Angular includes allows you to write these really nice templates to describe what's going on.
[01:09] We know that we're looping through some todos in a todo service. We know that we're going to check on the status, whether it's completed. We know that we're going to search on a term. We know that we have some sort of rendering component that's going to take an input of the todo that it comes through and that this component's going to send out a toggle event that we can forward on to the todo service.
[01:28] We didn't really write a lot of logic in here as much as we just wired pieces together.
[01:33] As for what's next, I want to focus on this todo.toggle to really drive a point home. That's, this toggle method is basically mutating a property on my todo model. Mutating a property just means changing it to something else.
[01:49] We didn't run into any bugs with this, but Angular 2 is going to encourage, for performance reasons, and for best practices and patterns, that you avoid mutating properties. That instead, you assign new instances each time something updates, basically like what we did here.
[02:07] Instead of todo.toggle, what you'd do is you'd grab that todo and use object assign. Where you start with a new object, you say, take the current todo that we have that's working and then update or assign these properties that have changed.
[02:24] We want to change status on this, and we want the status to be based on whatever the todo.status currently is. If the todo status is started, we want it to be completed, otherwise we'll keep it as started, and we'll just call this status.
[02:45] We don't need to pass in this value, because if a value and a key have the same name, you can just pass in the key and it'll look up the value of this status and just assign it to the key of status.
[02:54] Then object assign returns a new todo, call it toggle todo, which we can pass in right here. It can go through and toggle and everything works just fine and we can add new things, toggle them, and everything is working great.
[03:15] Now, the reason I bring this up is because object assign might be new to you, the spread operator might be new to you, the imports might be new to you. There's a ton of new things and concepts and immutability and other ideas that Angular 2 has adopted.
[03:34] Now, these are all best practices in the JavaScript world, so you need to put a bunch of effort into learning best practices in JavaScript in more recent features to really understand what Angular 2 is going to be using and what it's all about.
[03:48] This is not Angular 2 code, this is just plain old JavaScript. Don't let this sort of code, if you see it for the first time in Angular 2, don't let it turn you away from Angular 2. Do you best to embrace it as, this is what JavaScript is now.
[04:03] These are the best practices that people have found to improve performance and stability, avoiding bugs and testability and all these sorts of things, that in the end will improve your development experience.
[04:13] While the basics of Angular 2 is really just wiring these things together to come up with an nice template that pieces together pipes and directives and inputs and services, your logic and a lot of the examples you'll see and what you'll be expected to write is going to be the latest JavaScript features, so take the time to learn them.
The immutability reminds me of the Redux course. Redux also separates the view rendering logic with the logic that changes the application state. Here, it's all abstracted into separate components, which requires a trickling of events down to each individual components in a hierarchy. It's a bit hard to follow the event to its final recipient and may make maintenance require touching all components. With Redux, that trickling is still done, but can be bundled together as to make more readable code, leaving the view rendering untouched. One is a functional approach and the other is an object oriented approach.
What I found most helpful is how Angular 2 didn't change how it does inter component communication. You still broadcast events in order to communicate state change. That should soften the learning curve for me, but I'm constantly thinking of different scenarios that have previously gotten me stuck with Angular 1 such as including third party libraries. It's exciting that we have these options.
Technically, you could have TodoModel.toggleTodo() return a new copy of the Todo... but moving away from OOP thinking, you can think of Object.assign like it's applying a "diff". You take what's changed, mix it with the old object, and get a new object out (without ever changing the original object). So model become a simple representation of data. In fact, if you have a method that returns "void", you're most likely going against immutable conventions. I recommend going through the other Immutable lesson here on egghead (and the course on redux) if this is unfamiliar territory.
Redux can actually work really well with Angular 2! Taken one step further, the RxJS features allow for a fully reactive app. Unfortunately, these topics are out of scope of a "fundamentals" series and many best practices are still emerging from Angular 2.
Angular 2's interoperability story is really great. I hope it's not abused too much though ;)
Great "fundamentals" course. Thank you, John.
Thanks for the course, very very helpful.
Thank you for another great lessons.
I want to know why did you trigger toggle event from todo-item-render instead of injecting todoService directly in todo-item-renderer and calling toggle method of service rather than triggering toggle event.
Thanks
There's a concept of "smart" and "dumb" components.
Smart = Components that handle services, state, routes, etc which are specific to your application and push that state into your dumb components Dumb = Components that are reusable across applications and you could share them with the world. (Many frameworks like Bootstrap, Material, etc all have "dumb" components)
Everything is pretty new to me, and I keep giving up and coming back to Angular2. To me Angular1 is much more intuitive and if I use the controllerAs syntax I can sort of componentize pieces that way. This course was simple but it did get me excited about Angular2 again.
The only negative I see is there are now a few different files I believe where you are doing a ternary and hardcoding the string status in? Is there a better way of declaring that only in one file?
Excellent course. Thanks John!!
Why isn't toggleTodo function a part of todoModel class? I know you created it as a model, but from an OOP perspective, methods and properties of an object would be housed in its own class. I understand that if we did that it wouldn't be possible to create a new object to prevent mutation when we toggle. Is it because of this?