Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Overview of Angular 2 and what to learn next...

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.