Angular 13 Fundamentals

Angular 13 Fundamentals Create an App with the Angular CLI

Learning Paths:
Check out a free preview of the full Angular 13 Fundamentals course:
The "Create an App with the Angular CLI" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through using the Angular CLI to generate a new project, including adding routing and choosing a stylesheet format. A walkthrough of what is included in the generated application is also provided in this segment.

Get Unlimited Access Now

Transcript from the "Create an App with the Angular CLI" Lesson

>> I'm going to hop into my command line. And can everybody see this, okay? Good, all right. Now, I'm going to just do this off,of my desktop. And so, we can see here just I'm gonna show what version I have. So I'm running 1303. And now let's generate a new application.

[00:00:39] So I don't know, let's go Hello FBM for fun and masters and it's going to ask us a few questions. Would you like to add routing? I do like to add routing which is going to add another routing module. And what stylesheet format would you like? So we're gonna go with SCSS and you can see here that it is generated a bunch of files.

[00:01:11] And then now it's going through and installing some dependencies. And we're going to let this kind of do its thing. And what's funny about this is this takes all of three minutes, four minutes it's hard to say, that took even less. But this used to take me an afternoon.

[00:01:38] So from here, I'll just clear this and we going to step into this. Alright, and you can see here that it's generated or source node modules etc here. And before I do any of this I'm just going to go NPM start. And let's see what happens, so it is with Angular 13 they've one change the way that they bundle the files but they have baked in, like caching into this to make it a little bit faster.

[00:02:17] And you can see here compiled successfully and we are on local host 4200. And so this is our application. And the Angular team has graciously gave us a couple of links here that we can click through. It was very nice of them to tell us what we can do next.

[00:02:47] And so from here, let's hop back into the command line. And I'm just going to open a new window here. And let me just open this up in VS code, so we can see this as well. In the source, we have app. And a couple things. So we have our app module, which let's just use our previous kind of that high level thing to just kinda anchor some of this.

[00:03:19] We have our app component, browser module, and our app routing module. So router module comes from Angular in this app routing module is what was generated from the CLI. And we don't have any routes in here but it has went ahead and created this for us and it is essentially edited the import.

[00:03:46] So if you have a module you wanna make available to another module, this is where you do that. And we have our app component. And within this, you'll see here, not a lots happening other than we have a class, our metadata here and then this is all of our markup.

[00:04:08] So I don't want to get too much into this but what we can do is ng g and I could type out component, but you can use c as a shortcut. And I'm going to do home but you notice here that I have some command line history that it's kinda trying to spoil the surprise.

[00:04:34] But by using ADI hyphen D. This allows us to run in dry mode or dry run. And so I recommend especially if you're trying out a new one, that you can go ahead and check. And just make sure everything is where it needs to be. So, I'm gonna go ahead and take that off.

[00:05:02] And you can see here now we have our home component. And if I go back into my code, You'll notice here that inside of app, we have home, home component or component class. We have a .css or Sass file that we can put any kind of component specific styles as well as a spec file here.

[00:05:34] So, if I go back into the terminal and I go, ng test, we'll see what happens. But what this should do is kick up a test runner. And hopefully because haven't done anything, I hope this passes. And that'd be amazing, but it is spinning up karma, which is the test runner.

[00:06:00] And then it's saying all right, we're gonna run so. Right out of the gates, and this is testing is something that's not very exciting, but it is absolutely critical. And the fact is that I've created two components from the generator, one came with the project, but then I have a home component, and it's already instrumented to write test.

[00:06:23] And so my experience is that the further the distance is away from writing code and being able to write an execute test, the further that distance gets away, the greater chance that tests are just not going to be written. And so I was able to generate a component and Boom, I already have a test harness in place that works.

[00:06:49] So I'm gonna go ahead and close this. But you can see that it's all green. I think this is pretty cool. Now, just a few other things. Let's go nggs and I'm gonna do a service and let's call this I don't know. Like, we're gonna call this courses and I'm gonna a dry run.

[00:07:11] And let's see what happens. So it's generating a service and the spec. But what I don't want is, I don't want this to go right in the root of my project. So what I would do here is in the case of using just the Angular CLI, I will put my common file.

[00:07:36] So anything that's not component related into a common folder, so essentially, I organized by features. So Home, let's say that's a feature courses. And anything that is common or that can be shared across features, I treat that as a large common feature that then gets segmented down. And let's go with courses here.

[00:08:01] And, We'll see here that it generated or it's putting it in common services and then the courses service. So let me go ahead and run this, we'll generate this and then let's step in the code and see what this looks like. So we have our home which we generated and then in here we have our courses, service.

[00:08:33] And there's nothing here, but you'll see that it went ahead and its provided in route, which is why if we go down here, that you don't see this in the providers. Because I can attach it directly to this module, but by providing it in route, it just is attached to the route module.

[00:08:59] And so ng new we'll generate a new Angular project and using ngg. You can generate all sorts of stuff. And let me just see what happens if we do ngg hyphen, help. So, one other thing worth mentioning, is that if you use dash dash help or hyphen, hyphen help, you can see a number of things that are available to you.

[00:09:34] So, Application class component dah. Lots of stuff. And this was totally not in my notes, but let's see what happens if I generate an interface. So let's go common models course-d, I just want to see what this looks like. Alright, we will take off the dry one flag and let's hop into the code and just see what this looks like.

[00:10:08] So common models course. And then you could see here I could start to build out my interface. So if I had a course I might have title which is a string. Description which is also a strain it could be progress, which is lets a number and completed, which is pulling.

[00:10:31] And so this is just off the top of my head, but by using the CLI, I was very quickly able to generate and spin certain things at one. The project obviously, but I was able to generate the pieces that I could then come in and we could start to work in including a component.

[00:10:54] A service and in this case in interface and so as we start to work through the rest of these modules and some of these challenges, I recommend definitely keeping ngg close to the vest as it is.