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.


    Structure a Basic Angular 2 Application

    John LindquistJohn Lindquist
    2 - 6

    Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.



    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




    Now I want to organize each of these into their own files, so I'll go ahead and cut the component out, then create a new file in my folder called app.component.ts, open that up, and paste in, and then just make sure to import component, hop back over to my main file.

    We'll cut out the module, cut that, and create a file for that. We'll call this app.module.ts. Open it up, and paste. Make sure to import all the necessary imports.

    Then, back in my main, I can get rid of the imports I don't need and just make sure to import the app module. If I save, everything's working as it was, we have a main file which simply declares the platform we're using, and the main module we want to bootstrap.

    We have a module file, which is the configuration of how we're starting up, and the different modules we want to use inside our application, and which component to bootstrap, and then we have that main component, which we called app component, which was bootstrapped by our module.

    You can see them sitting in this app folder next to each other, app component, app module and main.