Now that we have our whole system ready to go it's time to start building our application. Stay tuned on this episode. I'm going to make this one a little bit longer than I usually like to let them get. It's mainly because I want to, by the end of it, have a fully functioning angular application. I could break it into a number of like five minute episodes. However I want you, by the end of this one, to have an application you can actually see in the browser. It won't be very functional. It'll simply have a hello world thing however I think it's good to go through all of the different components that are necessary and build those to get it up and running.

The first thing we're going to do is create a new folder inside our freelance camp directory. So I'm going to come up right click click new folder and type app. This is where our application is going to reside. I'm also going to create a file here at the root so not inside the app directory but actually in the freelance-camp-fe directory. And it's going to be called index.html.

I'm going to leave it empty right now. We'll add the code we're going to need at the end of it but, I wanted to create it just so we don't forget.

First thing we're going to do inside of this app directory is create three files that we need in order to get this working. We're going to create one new file called app.module.ts. Then I'm going to create another file called main.ts. Lastly we're going to create our first component file. I'm going to hit save and type homepage.component.ts.

Eventually when we go through our refactor stage I'm going to organize these into their own directories so that all of our code can be organized. However for right now I don't want to throw too much at you so that you're overwhelmed with code organization or I should say file organization and I want you simply to focus on what it takes to get an angular application up and running.

So the very first thing we're going to do is start with our app module. Our app module is one of the cogs that are required to have the entire angular system running. When you build an angular application you need to have a module that performs some of the basic components, such as having declarations, importing the different modules you need from the rest of the application. Essentially it shouldn't do any logic at all. Instead it's just a way of being able to manage the various components that you have in the application.

Right now we're just starting off so it's going to be really basic. I'm going to bring in first, the NgModule module. That is going to be

import { NgModule } from '@angular/core';

To break this down, what we're doing right here is we're importing this NgModule library from the core set of angular libraries. If you're wondering where this is coming from that's one thing I love about how angular two is structured. Inside of our node modules here, you can actually go see all of this code so you're not importing something and having code in the back end that you can't really see and you're not sure what's going on. If you navigate to node_modules then @angular you can see the entire core library. I don't recommend going in. Definitely don't make any changes to it. However it's pretty cool to see where this is mapped to.

That's the first thing, NgModule, and as you're about to find out this is actually a class decorator in typescript but we'll get to that in a second. And the next thing because this is a browser based application we have to import the browser module. This one is going to be from

import { BrowserModule } from '@angular/platform-browser';

Notice we are not doing .ts or anything like that. We're simply passing in these values.

Next thing we're going to do is create a class decorator. And if you went through my typescript course you know that a decorator in typescript is a way of wrapping metadata around classes.

Here I'm going to use NgModule and pass in an object as an argument. Inside of NgModule I'm going to pass in a few things. First I'm going to bring in some imports. Imports from a meta data perspective usually are going to pass these in as an array. These are the items that we're wanting to import into our app module. Right now it's pretty basic. Right now we're just going to bring in the browser module and that's it. And then later on we're going to get into the other things that are required in order to make this work but, we're not going to worry about it right now.

Next we need to export a class. This is going to be a class called AppModule. We're not going to put anything inside of it. It's just going to be an empty class declaration.

This is your app module. Very basic. The further we go along in the course we're going to add quite a bit more to it. These are the basic elements that it needs to have.

Now that we have that let's go add to the main.ts file the components it needs to get working. One kind of common pattern you'll see whenever we're working with creating new typescript files is we always start with importing items. If you're wondering why we need to do that if you're coming from the Rails side of the world then this kind of logic doesn't make a lot of sense because the way that Rails works is it imports all of an applications dependencies, modules, everything like that all at runtime. So when you start up the rails server it brings all that in. Angular takes more of a lightweight approach to bringing in and importing items. So here we're importing NgModule and BrowserModule. What this means is that this file and all these things below it only have access to whatever we're importing. So if we have other components in the application we do not have access to it in the file unless we've imported them. That's what those statements represent.

That's our module. It kind of manages what's allowed in the application and what's not. Our main.ts file is going to be what manages the connection to the web server. This is what makes it possible for this to be seen in the browser. I'm going to create an import statement and inside of this I'm going to call the platformBrowserDynamicmodule and I want to bring this in from '@angular/platform-browser-dynamic'

One thing to make sure of just so you don't have any typos are that these two items are spelled differently. platformBrowserDynamic is all camel cased. That means the first letter is lowercase and each first letter of each new word is capitalized. However in the actual library we're pulling in, the words are all lowercase and it's separated by a dash. Just so you know because if you don't do it right it's not going to bring it in and it's going to fail silently.

Now we can import our app module. What this is going to do is say to the web server, bring in the app module, and then it's going to bring in everything that we declare inside of this file. I'm going to tell it to import the app module and the path for this is a little bit different if you've never seen it before. We're going to give a ./ and then from there we're going to say app.module.

import { AppModule } from './app.module';

This is all relative. So because we're in the main.ts file if you go back one and then you give this slash it's going to bring in that module because these are all on the same level.

That's all we need there. And now just two more lines of code and our web server will be wired up and ready to go. We're going to create a constant. And this is a constant variable we'll call platform. We'll call this platformBrowserDynamic method. And because it's a function we're going to give parenthesis after it.

const platform = platformBrowserDynamic();

Now we can work with this platform. I'm going to type platform.bootstrapModule and we want to pass in the AppModule.

platform.bootstrapModule(AppModule)

If some of this is a little bit confusing don't worry. I want you to just think about taking every single line one item at a time. Just to review what we're doing here. We are importing the browser dynamic So this is going to allow us to run this in the browser. We're storing that inside of a variable. And this is a function that takes in a module as an argument and what it takes in is whatever application we want to run. In this case we want to run our main application, the one that we're going to be creating through this app module file and that's all it does. In the background it's going to connect everything up to the web server and it's going to run it for us. That's all we need to do for the main typescript file.

Now that we have that it's time to get in to actually building our component. This part of it is one of the coolest parts of angular and that is that angular allows us to create and divide our application on a component basis. You can think of it as a feature driven design pattern where we build features and then we wrap them up inside of components. I like to name my components things that are descriptive on what they do. In this case I want to create a home page which I think is a natural way to start building an application.

So here I'm going to create our first component. In the rest of the application, nothing is shown until you have a component. In fact, in order for an angular application to be a real application it needs to have at least one component. So that's what we're going to start off with. I'm going to import the component library. I'm going to type import { Component } and you may have guessed this is going to be from the angular core library.

import {Component } from '@angular/core';

Components are core to angular development so it makes sense that it's included in the core library.

Now we're going to use a class decorator called component and just like we did with the NgModule decorator we're going to pass in a object as an argument to this component. I'm going to type @Component({ and here we're going to give a selector. The selector is going to be what the rest of the application references when we are calling this home page. Here I will type main-app, we could call it home page, we could call it anything that we want but, I want to just call it main-app.

Then inside of this we're going to pass in a template. Notice when I start typing in template I have the ability to use a template or a template URL. When we start building out the full application we're going to start using template URL's and that's where we can place large amounts of view file code inside of an HTML file but, for right now we can also just embed this inside of our decorator. This is an easy way of getting this up and running.

I'm going to type template: and inside of the template I'm going to put some HTML code. So here I'm going to type <h1>Freelance Bootcamp Homepage</h1>. And because this is a decorator now we need to export a class. I'm going to type export class and this is called, 'Homepage' but we need to put HomepageComponent.

It's important that we get our naming conventions right. If you noticed here for the file we give whatever the name of the class is going to be and then we give a . and then the type of file that we want it to represent. So here, this is a component file, so it's homepage.component.ts.

Later on we're going to get into working with services, which is how our application's going to connect to Rails applications. That's going to be whatever the name of the service is, .service.ts. Our main module is app.module.ts. So whatever the role of the file is, that is going to be included in the name. Something I think is cool about angular two is some of these naming conventions make it easy for you to instantly recognize the role that the file is supposed to take.

This is our home page component. It's pretty basic but it should show this on the home page.

See image above

This is all well and good however, we haven't wired anything up yet. So the first thing that we have to do is open up our module file. If you guessed that we need to import our new home page you are 100 percent right. So first thing we're going to do is import our { HomepageComponent }. Now remember the reason why we have to do this is because angular is not like Rails. It will not load every single thing in the application with every file. We have to be very explicit on what that particular file needs to know about. I'm going to import the home page component from, './homepage.component'; and that's all we need to do there.

Now we need to add some things to our decorator. We already have our import statement and we don't need to import our home page component in our imports statement. This is simply an array that captures the other modules that we need but, we do need to add it to two other spots. First we need to declare it. So we need to put declarations:. That also is going to be an array. Inside of this we're going to put HomepageComponent. As we build this out we're going to be adding a number of other items inside of our declarations.

The next thing is our bootstrap. Do not think of this as being like bootstrap in the HTML/CSS library. This is not related to that whatsoever. In this case what bootstrap represents is the kind of the starting point for the application. You know that if a startup is "bootstrapping" it means that they've just launched they haven't even gotten the financing, anything like that. That's essentially the way that bootstrap works here in the application. Bootstrap is the very starting point of it. So we want our starting point here to be our home page component. I'm going to paste this in and this is everything we need in our app module.

The last thing we need to do is set up our index file. There's a lot of boilerplate code so I'm just going to copy and paste it from the source code. If you look at the show notes of this guide you'll have a link where you can go grab all of this content.

Right here I'll just go through the basics. This is a plain vanilla HTML file. Nothing magical going on in it. We are using it kind of like a master layout file. It has a title, this title can be changed dynamically though. We can change this inside of our various components. It has some other things like a viewport, which we'll use for responsive layouts later on, character set, and we're also bringing in some core modules. Notice we have our system.js file that we configured over here. This is what sets everything up so that it loads all the code libraries in properly. We also have some error handling and then here we have system import. What this is doing is, notice how this app is named app. This is wired up directly to our app directory here. And then lastly inside of our body we have main-app. This is called a directive. What this means is that when angular runs and it compiles it's going to look inside this body tag and it's going to look for this directive and it's going to then look in the rest of the application and it's going to say where is a selector for main app that I can point to.

And if you go back and look at our home page component, notice how in our selector I gave it the name main-app.

See images above

I could have given it home page, I could have given anything we wanted but since this is a starting point application I wanted to call it main-app and what it's going to do is it's going to first show App Loading... and give this little .... In another application you could have a little loading animation or something like that if you wanted, while the rest of the application loaded. This is what's going to be seen and the entire thing is going to be replaced by this directive.

I think that we have everything we need to get this rocking and rolling. So I'm going to open up the terminal and type in

npm start

This is going to start up the npm server and it's also going to automatically open up our browser. So I'm going to pull this in from another window. And as you can see this worked. So our application is now fully functioning. Very basic but it is functioning.

This freelance boot camp home page is getting pulled in from our home page component. I want to show you another thing that's really cool with the way that this works. Your browser is going to be able to be updated in real time. I'm going to pull in sublime text and shrink it down just a little bit. What it's going to do is change dynamically as you change your file. So if I want to change this from "Freelance Bootcamp Homepage" to just say "Freelance Bootcamp Dashboard" nothing changes yet but, if I hit save you can see it switches and now it says freelance boot camp dashboard.

So what's happening here is there is a special library that NPM uses called browser sync and there is a component inside of the system that is looking for when a file change happens. You can even see in the logs. It shows, "File change detected. Starting incremental compilation..."

Without even having to refresh or do anything like that it is going to do it for us and whenever it gets a file change it's going to refresh the browser so that you can see what happens. This also is good because, say that you're working on two screens. You can have this open on one screen, this is the way I do my angular development, I'll have this on one screen and then all of my code and another and as I'm saving files it'll be updating it.

Now watch what happens if I make a mistake and say that I get rid of something like I forgot to export the class. Now all you get is this app loading screen.

So this is really helpful because you can see that and say, "Oh wait a second, I made a mistake!" Then you can go back and perform debugging which we'll get into as well later on. I'm going to replace it, hit save, and now it's back to normal.

You now have a fully functioning angular two application. Great job if you're following along.

In the next few guides we're going to start building this application out. So it has real functionality.

Resources

• Code at this stage