This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    Structure a Basic Angular 2 Application

    John LindquistJohn Lindquist

    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.

    2 - 6


    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 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.

    00:20 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.

    00:39 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.

    00:55 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.

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