Angular 9 Fundamentals Generate an App with the Angular CLI

[00:00:00]
>> With that said, I'm going to just move the slides off, and let me just build something from the COI. And we can kind of get into by actually looking and seeing what these pieces are and how they fit into an application. So I'm going to if at all possible again, please reference the slides.

[00:00:24] But I think it's just for me, certainly more gratifying to just to actually code and see where it takes us as well as if I mess up or something happens. Even I think there's value in seeing how somebody kinda works through that. And so what I'm gonna do, I'm gonna go back to my desktop, and I'm going to install the angular CLI.

[00:00:49] And so how I do this is MPMI-gangular/CLI and then what I'm going to do so that we don't hit like angular 10 or something and none of these commands work. I'm going to pin this to a specific version, and so in this case, we're gonna do a 9.1.

[00:01:16] So we'll just paste this in and you can see here npm i -g @angular so now with NPM namespaces/cli and then @9.1. And so I'm just going to install this, And depending on your network and your kind of the machine that you're on, this shouldn't take too long.

[00:01:40] So I already had this installed full disclosure so it was a little bit faster, but here we go. And then what I'm going to do is I'm going to generate a new angular application. And so, I'm gonna generate it and then we'll talk about what you actually get from the CLI.

[00:02:00] And I think this is where in my opinion when they introduced the angular CLI, I think this is where Angular is a framework and as a platform got really, really good. Because before, you would either have to find like a starter project or you'd have to put everything kind of together by hand.

[00:02:19] And this just takes a lot of the pain points, out of that, so ng new, and we'll just go angular workshop. So what this is going to do is generate a new Angular project, and we're going to call it Angular workshop. So I'm gonna hit Enter, and this is going to ask me a couple questions and so, I am going to go with Angular routing.

[00:02:46] And what style sheet format would you like? So I'm gonna just gonna go with SCSS. And it's just going to generate this application for you, so it generated the code and now it's installing the packages. When this is finished, what you're going to have is a fully working Angular application right out of the gate.

[00:03:13] More importantly, is that not only is it going to work, but you're going to have a development server to test it on or to run it against. You're also going to have a test runner to run your unit test, an end to end test runner using protractor, which I recommend actually using Cypress, but it still exists.

[00:03:36] And as well some options in terms of building the application and deploying it. All right, so this has installed, and so I'm going to just hop into this directory and I'm just going to go NPM start. So notice at this point I'm three commands in, and it's going to look very similar to the workshop project that we downloaded that you saw me install, because that's built on the angular CLI and so generating the modules.

[00:04:19] Once that's done we can we can check that out, I will address this now because it has come up in chats for this workshop because this is a fundamentals workshop. I'm not going to get into nx workspaces, I think nx workspaces are really, really good. But there's a lot of moving pieces and I think for somebody learning Angular, that amount of cognitive overhead is just a bit much.

[00:04:49] And so per chance maybe we do like an extension of this workshop around, applied Angular concepts, that's where I would talk about that. But I wanna be really cognizant of for a new developer, or somebody just getting into Angular, what is the lowest barrier to entry that we can we can achieve.

[00:05:11] And so this is why in this case, I opted not to go with NX and we're just going straight with the CLI. Okay, so, localhost 4200, and this is what this generated. And so, what we have here is a working application with a web server right out of the gates.

[00:05:35] And I feel like I'm just kind of old person saying when I was your age, I had to walk to school up a hill in the snow, and I had a cloud of dirt for dessert. But it's really, really nice when you do not have to assemble all the pieces of your stack together.

[00:05:56] And so even to the point of, I use View, I use REACT, I think at this point most kind of the big three frameworks, I would put Ember in there as well as I suppose, is that they've really achieved feature parity. And so, this whole idea of like, well, this framework or this framework, I think that's really not the right question.

[00:06:20] Because I think fundamentally, I can do really good state management in Angular or REACT or with View. And that exist I think it it comes down to a lot of contextual and possibly even philosophical preferences that you have. The one thing that I will say that I do appreciate about Angular versus REACT is that it's batteries included.

[00:06:47] And so, if I'm doing react Ulsan, it's like, well, what router do I wanna use? What do I want to use for state management and you have to make those choices and you have the option to make those choices based on your organization or your preferences. With Angular, is they just makes them opinionated, but not restrictive choices for you.

[00:07:08] And I think that's a really big plus that, I've three commands in, and I have a working application. Now, a couple things, one, they put some really helpful links right in here. And so learn Angular, they've got a pretty exhaustive tutorial here, I do reference it occasionally. More importantly, the CLI documentation and I really recommend and we'll see this throughout the day is I will leverage the CLI.

[00:07:42] But there's a lot of velocity that you can achieve by leveraging the CLI, especially the generators. And now what we have here and this is what I think is really, really cool is what do you wanna do? Well, I'd like to add a component where you click here ng generate component x, y, z.

[00:08:02] And so it's giving you these commands, so for instance, ng add Angular Material, and we'll do that one in a minute. But if you need to add a dependency or you want to run your test, you can do that right here or even if you wanna build for production.

[00:08:21] Which is going to generate a much more condensed optimized version that you would actually put onto a production server, maybe drop that into s3 or James textile, whatever you prefer. So here, this is something I frequently use is that, I like material design and I like Angular material.

[00:08:41] I think there's some really good components there, and so I will go and I would just add this. So, if I go here, I'm gonna create a new tab and this is in the same folder. And if I just go ng add @angular material, and what I'm going to do is I'm gonna pin this as well.

[00:09:08] And it's just gonna go out and it's gonna look for this dependency. And once it finds it, it's going to ask a couple questions about what to do the CIO. We'll go with Indigo pink, there we go, set up global Angular Material, typography styles, I will go with, yes.

[00:09:30] What this does is it adds in a couple fonts and the material icons right into the application. Being that I'm lazy I typically, this is kinda like an all you can eat buffet for developers. So I'll just say yes, I will do browser animations, and this is going to go ahead and add this, there we go.

[00:09:55] So what this did is it updated the module, index.HTML in the style, so with that said, let's hop into this project and let me just kinda show you the main pieces, and how they fit together. And that'll set the context for us to really, I think, get into components and launch off into building our own thing.