This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll build a very simple Angular application and get it running in the browser.
Now that you've learned what
makes an Angular application,
0:00
let's put together one of our own.
0:03
Before we begin, you'll need to
download the project starter files,
0:05
you'll find details in
the teacher's notes.
0:08
I'll be using visual studio
code throughout this course.
0:11
If you prefer to use another editor,
0:14
you'll need to download
the TypeScript plugin for that editor.
0:16
You'll also need to install
TypeScript globally.
0:19
I've included information in the teacher's
notes on how to get up and running.
0:22
However, Visual Studio code is a free
editor and is built with TypeScript,
0:26
so it's perfect for working on projects
with TypeScript, like Angular.
0:31
I've included their link to download
the editor in the teacher's notes.
0:35
Also, Angular depends on Node.js and NPM.
0:39
You'll need to have
these installed as well.
0:42
I've included installation
instructions in the teachers notes.
0:45
After you've installed the editor and
0:48
downloaded the starter project files,
you'll need to open up your console.
0:50
Navigate to the root of your
application and open the editor.
0:54
Visual studio code includes
a built-in terminal.
1:02
I prefer using it over opening
up another terminal directly
1:06
since it skips right into my application.
1:09
To open up the built-in terminal you
can press the Control and backtick key.
1:12
Then run npm Install.
1:17
NPM will look at the package.json file and
1:20
download all the project's dependencies
in to the node module's folder.
1:23
This download may take
anywhere between two to ten
1:28
minutes depending on
your connection speed.
1:31
Let's take a quick look at
the structure of our project.
1:33
There's a few files worth noting in the
root of our folder, the webpack.config.js
1:36
file is the main webpack file that will
bundle our application for release.
1:43
We won't be calling webpack
directly within this course.
1:48
The configuration used in
this course is based on
1:52
Angular's introduction
to web pack tutorial.
1:55
I've included a link to the tutorial
in the teacher's notes.
1:57
We've also got content covering
webpack in the treehouse library.
2:01
The package.json file has
a few scripts to find.
2:05
We'll be using the serve task
to launch weback-dev-server.
2:08
The build task will bundle
up all of our files for
2:12
use in the production environment.
2:16
We'll also be spending most of
our time in the source folder.
2:18
In the source folder,
this is where your TypeScript files live.
2:22
The wwwroot folder is where webpack puts
all of our transpiled code and assets.
2:27
The contents of this folder are only going
to be changed when we run npm build.
2:33
If we look in this source folder, we'll
see a number of files already created.
2:38
Index.html is the root of our application.
2:43
The webpack configuration used
in this application reads
2:46
the index.html file at script and
style text and
2:50
saves a copy of the file
to the wwwroot directory.
2:55
I've added the app-root tag here,
this is something
3:00
that our Angular app will be targeting
later on as we build our application.
3:04
Main.ts is where all of
our application will be.
3:09
Right now this file is bare except for
the global stylesheet reference,
3:13
which webpack recognizes and
injects into our HTML file.
3:17
We'll add a bit more to this file shortly.
3:22
Polyfill.ts is a place
to include polyfills,
3:25
which allow our codes to
be used in older browsers.
3:29
This is likely to be similar
across most Angular applications.
3:33
I've included some documentation about
this file in the teacher's notes.
3:37
tsconfig.json is a configuration file for
TypeScript.
3:41
I've included some information
in the teacher's notes,
3:46
if you'd like to learn more.
3:48
tsconfig.json isn't part of Angular,
but the webpack configuration and
3:50
the editing experience is
heavily dependent on this file.
3:55
The configuration is standard
across all Angular applications.
3:59
vendor.ts is where all third party
modules and libraries should be imported.
4:03
Webpack uses this file to
insure our application code and
4:08
our vendor source code, doesn't get
bundled together into the same file.
4:11
Let's get started.
4:16
From your command line,
we'll first need to start the dev server.
4:17
To start the server, type npm run serve.
4:21
Webpack is processing our files and
once it's ready, we'll open up a browser.
4:27
Now go to your web browser and
enter localhost:8080.
4:34
If all goes well you should
see the loading message
4:38
and a page title, Photo Blog.
4:44
Now we can start building our application.
4:48
Go to your editor and create a new
directory inside the source directory.
4:50
We'll call it app.
4:56
Now, in the app directory,
5:00
create a new file and
name it app.module.ts.
5:03
This will be the root
module of our application.
5:09
Let's import a few modules from Angular.
5:12
Import { NgModule }
5:14
from @angular/core,
5:19
import { BrowserModule }
5:23
from '@angular/platform-browser'.
5:29
If you're familiar with
writing node.js applications,
5:38
this may look a little
bit different to you.
5:40
We'll be using the import keyword which
is part of the ES2015 module syntax.
5:42
I've included material in the teacher's
notes about ES2015 modules.
5:48
The @angular package name
is a newer feature in npm.
5:53
npm now supports namespace packages.
5:58
All of angular's packages are in the same
folder within the node modules directory.
6:03
This allows angular to share
a code between packages.
6:08
Right now, we only need NgModule and
BrowserModule.
6:11
NgModule is the foundation
of any Angular application.
6:17
We must have at least one NgModule for
our application to work.
6:20
BrowserModule is a package for
browser-specific features.
6:25
Angular was designed to be cross-platform,
which means it could potentially run on
6:28
a backend server, a phone, or tablet,
or a browser, like in our application.
6:33
Next, we'll create our AppModule.
6:38
We could call this anything.
6:41
In our case,
6:43
we're building an application that will
be used inside in other application.
6:44
So it makes sense to call our model,
AppModule.
6:48
We'll like support our AppModule for use
in other modules within our application.
6:51
Mainly, we're exposing
the AppModule class, so
6:55
that we can use it in
our main dot.ts file.
6:58
Now that the class is created,
we need to add some metadata to it.
7:01
Metadata is the information used by
Angular to associate style sheets,
7:05
edge sheemoff templates and other settings
in individual module or components.
7:09
When we do this,
we're using something called a decorator.
7:14
If you are new to TypeScript this will be
a new term both for familiar concepts.
7:18
When you apply a decorate
to a class function or
7:23
property you are post processing it.
7:26
In the case of AppModule we'll
use the NgModule decorator
7:29
that we imported from
the Angular core module.
7:34
The important thing to
know about decorators is,
7:38
Angular's compiler pens on them
to map each components and
7:40
to compose the application,
in the most efficient way possible.
7:45
For instance,
7:49
the component decorator has properties
to reference html templates ncss.
7:50
Having these kinds of files
separate from JavaScript or
7:55
TypScript is very helpful for
both programmers and designers.
7:58
But Angular ultimately needs all of
the the codes to be packed up and
8:01
shipped to the browser so that they're
available as soon as they are needed.
8:05
We'll look at the component
decorator later on in the course.
8:09
NgModule takes some
configuration properties.
8:12
Right now.
8:16
I'm going to add the BrowserModule
to an imports array.
8:17
By including this imports array, Angular
now knows that the application will
8:20
be used in a web browser and
will pack their BrowserModule
8:25
with the AppModule when the Angular
compiles our application.
8:29
By using the inputs array,
8:34
Angular now knows that the application
will be used for the web browser and will
8:35
pack the browser module with the AppModule
when Angular piles our application.
8:40
Now open up the main.ts file
in this source directory.
8:45
We need to import an Angular module
that will bootstrap our app.
8:49
Since we're building
an Angular application for
8:53
the browser, we're going to
include the browser platform.
8:55
For development we use
platform browser dynamic.
8:59
PlatformBrowserDynamic, helps
us with debugging errors.
9:08
You'll want to change this when you
deploy your Angular application.
9:10
Using platformBrowser,
9:14
will create a smaller JavaScript file.
9:17
Next, will import our
newly created AppModule.
9:23
Finally, we can bootstrap our AppModule
and attach it to our webpage.
9:42
Save the file, and
switch back to the browser.
9:57
Nothing has changed.
10:04
Let's take a look at
the console in the browser.
10:07
The compiler tells us, we didn't include
the bootstrap property on our NgModule.
10:21
The bootstrap property is needed by the
module to know which component will act as
10:32
the base of the entire application.
10:37
So to fix that,
we need to create our first component.
10:40
I'm going to create a new file
10:44
called app .component.ts.
10:49
Right next to the app.module.ts files.
10:54
I am following the Angular style guide for
naming components.
10:58
You can check out the style guide by
following the link in the teacher's notes.
11:02
I'll first import the component
decorator from the Angular core module.
11:06
Like the NgModule decorator,
11:11
the component decorator does some
post processing to the class.
11:14
So Angular knows how to handle it.
11:18
Now I'll create the AppComponent class and
export it.
11:21
And then apply the decorator component.
11:27
If we switch over to our index.html file,
we can see a tag called app-root.
11:36
This is the tag we should be
targeting in our AppComponent.
11:42
I'll set the selector
property to app-root.
11:47
This will inset our components
into the place holder element.
11:53
The app-root could be anything as
long as both the component and
11:58
the index.html called it the same thing.
12:03
The best approach is to prefix your
application's components with app or
12:08
some specific identifier for
your application.
12:13
Next, we'll include a template.
12:17
And some style.
12:28
Save that, and
open up your AppModule file.
12:49
Now, we need to import
the AppComponents into the AppModule.
12:55
In NgModule we'll need to
add a declarations property.
13:10
And a bootstrap property.
13:18
Will include our
AppComponents in the array.
13:20
This tells Angular to stop
the AppComponent at launch.
13:26
The declarations property is for
13:31
registering all of our
application components.
13:33
Before using a component for
13:36
the first time, we'll need to add
them to the declarations array.
13:38
If we don't set our components
into the declaration's array,
13:42
the compiler will throw
an error in the console.
13:45
Stating we attempted to use custom
HTML that hasn't been defined.
13:49
The bootstrap array is a collection
of top level components,
13:53
that acts as an entry point or
the root of our application.
13:58
You could have many
bootstrap components but
14:02
generally there is only
one pair application.
14:04
Save your file, and
head over to the browser.
14:08
And you'll see our amazing application
running for the first time.
14:15
So what have we learned?
14:19
An Angular application needs a module,
and a module needs a component.
14:20
Each of these need a bit
of metadata by using
14:26
decorators to apply some configuration.
14:28
Modules and
components are regular JavaScript classes.
14:31
Adding each component to
the declarations is required.
14:35
>> Well done, you're well on your way to
developing in the Angular application.
14:39
In the next stage we'll
dive into components and
14:43
start building our photo blog.
14:45
See you there.
14:47
You need to sign up for Treehouse in order to download course files.
Sign up