Now that you've learned what makes an Angular application,

let's put together one of our own.

Before we begin, you'll need to download the project starter files,

you'll find details in the teacher's notes.

I'll be using visual studio code throughout this course.

If you prefer to use another editor,

you'll need to download the TypeScript plugin for that editor.

You'll also need to install TypeScript globally.

I've included information in the teacher's notes on how to get up and running.

However, Visual Studio code is a free editor and is built with TypeScript,

so it's perfect for working on projects with TypeScript, like Angular.

I've included their link to download the editor in the teacher's notes.

Also, Angular depends on Node.js and NPM.

You'll need to have these installed as well.

I've included installation instructions in the teachers notes.

After you've installed the editor and

downloaded the starter project files, you'll need to open up your console.

Navigate to the root of your application and open the editor.

Visual studio code includes a built-in terminal.

I prefer using it over opening up another terminal directly

since it skips right into my application.

To open up the built-in terminal you can press the Control and backtick key.

Then run npm Install.

NPM will look at the package.json file and

download all the project's dependencies in to the node module's folder.

This download may take anywhere between two to ten

minutes depending on your connection speed.

Let's take a quick look at the structure of our project.

There's a few files worth noting in the root of our folder, the webpack.config.js

file is the main webpack file that will bundle our application for release.

We won't be calling webpack directly within this course.

The configuration used in this course is based on

Angular's introduction to web pack tutorial.

I've included a link to the tutorial in the teacher's notes.

We've also got content covering webpack in the treehouse library.

The package.json file has a few scripts to find.

We'll be using the serve task to launch weback-dev-server.

The build task will bundle up all of our files for

use in the production environment.

We'll also be spending most of our time in the source folder.

In the source folder, this is where your TypeScript files live.

The wwwroot folder is where webpack puts all of our transpiled code and assets.

The contents of this folder are only going to be changed when we run npm build.

If we look in this source folder, we'll see a number of files already created.

Index.html is the root of our application.

The webpack configuration used in this application reads

the index.html file at script and style text and

saves a copy of the file to the wwwroot directory.

I've added the app-root tag here, this is something

that our Angular app will be targeting later on as we build our application.

Main.ts is where all of our application will be.

Right now this file is bare except for the global stylesheet reference,

which webpack recognizes and injects into our HTML file.

We'll add a bit more to this file shortly.

Polyfill.ts is a place to include polyfills,

which allow our codes to be used in older browsers.

This is likely to be similar across most Angular applications.

I've included some documentation about this file in the teacher's notes.

tsconfig.json is a configuration file for TypeScript.

I've included some information in the teacher's notes,

if you'd like to learn more.

tsconfig.json isn't part of Angular, but the webpack configuration and

the editing experience is heavily dependent on this file.

The configuration is standard across all Angular applications.

vendor.ts is where all third party modules and libraries should be imported.

Webpack uses this file to insure our application code and

our vendor source code, doesn't get bundled together into the same file.

Let's get started.

From your command line, we'll first need to start the dev server.

To start the server, type npm run serve.

Webpack is processing our files and once it's ready, we'll open up a browser.

Now go to your web browser and enter localhost:8080.

If all goes well you should see the loading message

and a page title, Photo Blog.

Now we can start building our application.

Go to your editor and create a new directory inside the source directory.

We'll call it app.

Now, in the app directory,

create a new file and name it app.module.ts.

This will be the root module of our application.

Let's import a few modules from Angular.

Import { NgModule }

from @angular/core,

import { BrowserModule }

from '@angular/platform-browser'.

If you're familiar with writing node.js applications,

this may look a little bit different to you.

We'll be using the import keyword which is part of the ES2015 module syntax.

I've included material in the teacher's notes about ES2015 modules.

The @angular package name is a newer feature in npm.

npm now supports namespace packages.

All of angular's packages are in the same folder within the node modules directory.

This allows angular to share a code between packages.

Right now, we only need NgModule and BrowserModule.

NgModule is the foundation of any Angular application.

We must have at least one NgModule for our application to work.

BrowserModule is a package for browser-specific features.

Angular was designed to be cross-platform, which means it could potentially run on

a backend server, a phone, or tablet, or a browser, like in our application.

Next, we'll create our AppModule.

We could call this anything.

In our case,

we're building an application that will be used inside in other application.

So it makes sense to call our model, AppModule.

We'll like support our AppModule for use in other modules within our application.

Mainly, we're exposing the AppModule class, so

that we can use it in our main dot.ts file.

Now that the class is created, we need to add some metadata to it.

Metadata is the information used by Angular to associate style sheets,

edge sheemoff templates and other settings in individual module or components.

When we do this, we're using something called a decorator.

If you are new to TypeScript this will be a new term both for familiar concepts.

When you apply a decorate to a class function or

property you are post processing it.

In the case of AppModule we'll use the NgModule decorator

that we imported from the Angular core module.

The important thing to know about decorators is,

Angular's compiler pens on them to map each components and

to compose the application, in the most efficient way possible.

For instance,

the component decorator has properties to reference html templates ncss.

Having these kinds of files separate from JavaScript or

TypScript is very helpful for both programmers and designers.

But Angular ultimately needs all of the the codes to be packed up and

shipped to the browser so that they're available as soon as they are needed.

We'll look at the component decorator later on in the course.

NgModule takes some configuration properties.

Right now.

I'm going to add the BrowserModule to an imports array.

By including this imports array, Angular now knows that the application will

be used in a web browser and will pack their BrowserModule

with the AppModule when the Angular compiles our application.

By using the inputs array,

Angular now knows that the application will be used for the web browser and will

pack the browser module with the AppModule when Angular piles our application.

Now open up the main.ts file in this source directory.

We need to import an Angular module that will bootstrap our app.

Since we're building an Angular application for

the browser, we're going to include the browser platform.

For development we use platform browser dynamic.

PlatformBrowserDynamic, helps us with debugging errors.

You'll want to change this when you deploy your Angular application.

Using platformBrowser,

will create a smaller JavaScript file.

Next, will import our newly created AppModule.

Finally, we can bootstrap our AppModule and attach it to our webpage.

Save the file, and switch back to the browser.

Nothing has changed.

Let's take a look at the console in the browser.

The compiler tells us, we didn't include the bootstrap property on our NgModule.

The bootstrap property is needed by the module to know which component will act as

the base of the entire application.

So to fix that, we need to create our first component.

I'm going to create a new file

called app .component.ts.

Right next to the app.module.ts files.

I am following the Angular style guide for naming components.

You can check out the style guide by following the link in the teacher's notes.

I'll first import the component decorator from the Angular core module.

Like the NgModule decorator,

the component decorator does some post processing to the class.

So Angular knows how to handle it.

Now I'll create the AppComponent class and export it.

And then apply the decorator component.

If we switch over to our index.html file, we can see a tag called app-root.

This is the tag we should be targeting in our AppComponent.

I'll set the selector property to app-root.

This will inset our components into the place holder element.

The app-root could be anything as long as both the component and

the index.html called it the same thing.

The best approach is to prefix your application's components with app or

some specific identifier for your application.

Next, we'll include a template.

And some style.

Save that, and open up your AppModule file.

Now, we need to import the AppComponents into the AppModule.

In NgModule we'll need to add a declarations property.

And a bootstrap property.

Will include our AppComponents in the array.

This tells Angular to stop the AppComponent at launch.

The declarations property is for

registering all of our application components.

Before using a component for

the first time, we'll need to add them to the declarations array.

If we don't set our components into the declaration's array,

the compiler will throw an error in the console.

Stating we attempted to use custom HTML that hasn't been defined.

The bootstrap array is a collection of top level components,

that acts as an entry point or the root of our application.

You could have many bootstrap components but

generally there is only one pair application.

Save your file, and head over to the browser.

And you'll see our amazing application running for the first time.

So what have we learned?

An Angular application needs a module, and a module needs a component.

Each of these need a bit of metadata by using

decorators to apply some configuration.

Modules and components are regular JavaScript classes.

Adding each component to the declarations is required.

>> Well done, you're well on your way to developing in the Angular application.

In the next stage we'll dive into components and

start building our photo blog.

See you there.