Create an Angular 2 Hello World Component
A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.
[00:00] Our systems JS configuration says we need an App folder with a main file inside of it, which it will load and compile as the default file, so let's go ahead and create that.
[00:10] App/main.ts. From here we want to create our component, so let's say App component, and each class that's a component will need the component decorator.
[00:25] The component decorator starts with a selector. We'll call this App. What this means is that this App needs to match in our index html, a tag on this page.
[00:39] We'll say App, and that matches with this selector of App. So inside of here, this content will be replaced. We'll just say loading, and then once this is loaded, then that loading message will go away.
[00:53] Back in our main, let's make a template of Div saying I'm the App component. We're not doing anything with this component yet.
[01:05] We actually need to bootstrap it inside of a module, so go ahead and export a class called App module, and decorate that with ng module.
[01:17] Inside of my ng module, I need to say what I'm going to declare. The components I'm going to use. These are called declarations, and I want to use my App component, and I also want to treat that as the bootstrap component.
[01:30] So we'll bootstrap App component. Then there's also a module we'll want to use because we're working inside of the browser, and that's declared inside the imports, and that's the browser module.
[01:42] Because you can target multiple platforms other than the browser, you need to explicitly state that you want to target the browser. Then finally to bootstrap, we'll use the platform browser dynamic method.
[01:54] We'll invoke it and say .bootstrapmodule, and we'll bootstrap the App module. When I hit save here, you'll see loading, and then I'm the App component, because our platform is bootstrapping this module. This module is configured to use the browser.
[02:13] It's declaring the App component, so it'll look up that selector and use it, and because this is the application module, we're saying to bootstrap this right away.
[02:22] Then, inside of this component, we're saying find the selector called App, and drop in this Div inside of there to match the index html loading.