Structure a Basic Angular 2 Application
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.
[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.