Angular Basics
Create Your First Angular App
Angular is complete framework for building web applications at scale, so getting started can be a little intimidating. Let's use the Angular CLI to create our first Angular application.
Instructor: [00:00] To get started with Angular, the first thing you want to do is install the Command Line Interface or CLI. Let's go ahead and do that. We're going to say npm install with the G flag for global and then @angular/cli. That's just the angular namespace and then the CLI package. We'll go ahead and hit enter.
[00:23] This might take a couple minutes to install, so let's just fast forward that for now. We can use the CLI to do all kinds of things with Angular, including creating a new application. Let's clear out the terminal and then run ng new. ng is the command that we will use for all of the Angular CLI commands. New will create a new application for us.
[00:46] Let's just call this egghead angular and hit enter. The CLI will then ask us a couple of questions. We're going to go ahead and skip routing in this example. Hit N for no. It will then ask us what type of stylesheet we want to use. You have all kinds of options here. Let's just use CSS in this example.
[01:06] Then the CLI will go ahead and install all of the packages that it needs. This might also take a minute or two, so let's fast forward that. The CLI will also initialize a new get repo for you. Let's go ahead and open this up in our editor. I'm just going to hit command O to open up a window here, scroll down to egghead Angular, and hit open.
[01:30] What we'll see here is a fully-fledged Angular application. Don't get too overwhelmed. Most of what we want right now is just in this source folder. This source folder is where all the source code for the application will live.
[01:44] Everything that want to work with right now is in the app folder. The app folder is where all of our components will live. Components are the basic building block of Angular. Let's open app.component.ts. Component has two main parts to it. First is this thing called a decorator that specifies that this is a component to Angular.
[02:06] The component decorator has three pieces right now. You can see that it has a selector, which is the HTML tag for it, a template URL, which is the path to the HTML file that it will use, and a style URLs array, which is the path to the CSS file. You can see those over on the side.
[02:26] If we look at index.html, we can see that the app route selector is being used here inside of the body. That's what corresponds to the selector over here in our app component. The last thing I want to show you is app.component.html. This is the template that's used by Angular.
[02:45] You can see that there's a big placeholder here that the Angular team has designed. It's got a bunch of links to help you get started. Before we delve into that, let's go ahead and run the server for this application.
[02:59] The CLI actually comes with the development server for you. I can say NG serve, and it will compile all of the TypeScript, package everything up for you, and run it on a development server. By default, this will be Port 4200, but you can override it if you want to.
[03:17] Once that's done, let's look over at the browser. You can see that we have this nicely-designed page here with a bunch of supporting links for us. One link that I'll point out is this CLI documentation link. That'll take you over here to this doc. This is actually a super handy reference for all of the commands of the Angular CLI. Check that out.
[03:39] Let's go back over to the code and do one thing. If we go back over to app.component.ts, you can see that we have this title property on our class called egghead Angular. We can display that in our component. Let's go ahead and delete all of the HTML in here. We're not going to need that. Let's add a div.
[03:58] Inside of that div, we can display our title by using two curly braces and putting title in. This will do a two-way data binding between the title that's in our component and the title that's on our template. We pop open the browser to the side and go back over to our port 4200 and refresh.
[04:21] You can now see we have egghead Angular, where our title placeholder is there for our two-way binding. That's how you create your very first Angular application and experiment a little bit with components.