Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    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.

    angularAngular
    2 - 6
    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss