Angular Core Hello Angular

[00:00:02]
>> Lukas Ruebbelke: All right, welcome to the Angular Core Workshop, where we're going to build an Angular application from the ground up. So this is gonna be a very slide light in a sense of there's no slides, we're going to be building this from the ground up. It's live coding all day long, words, and also if I crash and burn, so be it.

[00:00:21] But I have a good feeling about how this is going to turn out. And so in this module I wanna talk and introduce the tools that we're going to use and why I chose them. So, first and foremost, obviously this is an Angular Workshop and we're going to use Angular.

[00:00:37] I think Angular is just a fantastic framework for building large scale applications. And I believe it's very well suited, because it's built on top of TypeScript for developers that have a classical background, such as .Net or Java, looking to move into client-side applications. Not only that, it is a batteries included framework.

[00:01:01] Meaning that when we spin up a project using the CLI, that you're going to get everything you need to not only develop, but to deploy that application. So, speaking of the Angular CLI, this is a tool that was created by the Angular team, to take a lot of the burden and the heavy lifting of creating a working development enviroment.

[00:01:28] And making sure that everything was where it needed to be, and, well, quite frankly just works. So prior to the Angular CLI, you would have to assemble your project by hand. And, okay, I need a dev-server, I need to run this test runner, I need to configure this custom webpack.

[00:01:47] And on a good day, that might take 90 minutes or two hours to set up. With Angular CLI, we can go ng new your project name and it would generate everything that you need to get up and running. A working project with a test runner, an end-to-end test runner, webpack, built steps, linting, everything that you need to hit the ground running in just a matter of moment.

[00:02:10] So the CLI is a really handy tool for getting up and running, but also for generating a lot of the common code. And so if I'm going to create a service or a component, or whatever, I'm going to generate it. And the nice thing about that is the code that is generated is defined and adheres to the Angular style guide.

[00:02:30] So there was a time where there was really no opinions about an Angular application or AngularJS application. Well now, the Angular CLI is based off of the official Angular style guide. So any code that comes out of this is going to be very consistent and familiar to any Angular developer across theboard.

[00:02:46] So if you're on a team and everybody's using the CLI, this is really handy, because you know what you can expect. Speaking of cogeneration, that the concept of schematics, think blueprints, was introduced, I believe, just the previous CLI version ago. And what this does is allow you to create custom templates, blueprints, schematics, as they're known for specific, domain-specific things.

[00:03:13] So if you wanted to generate a bunch of Ionic code or NativeScript code, or something specific even to your organization, you could create a schematic, and then using the CLI, generate that code over and over and over. So definitely a huge time boost, but what this has done is taken the CLI and turned it into, essentially, a platform you can build things on.

[00:03:37] And one of the most prominent projects around the CLI is Nrwl Extensions. And so this was created by Jeff Cross, Victor Savkin, who worked on the Angular core team for many, many years, started a consultancy. And then this was born out of the situation, or going from client to client to client and seeing these large enterprise problems.

[00:03:58] And they said, let's go ahead and create this tool, or just kinda suit of extensions build on top of the CLI, to solve a lot of the problems that they were seeing in enterprise organizations. The big one that we're going to use today is the Nrwl Workspace, which is basically a monorepo that allows you store not a single Angular CLI project, but multiple CLI projects in libraries.

[00:04:24] So it's just a way to kind of have a better architecture for having more than one application and many n number of shared libraries that you share amongst those applications that you create. And then last but not least, we are going to rely heavily on Angular Material. Angular Material is built off the Google design spec, and so its a bunch of kind of prebuilt tools off the shelf that you can put into your application.

[00:04:55] And because it's an official Angular project, that there's really tight integration to the Angular app itself. And so it's very easy to drop these in, and make them work fairly seamlessly. And, quite frankly, I think that they look really, really good. So, for instance, you take the date picker.

[00:05:15] I think other than maybe the one that Mark Robensky wrote many, many years ago. This is probably my favourite one. And so now we have the CLI to generate code, Nrwl Extensions to generate kind of the project that that code lives in, and then we have Angular material to make it look great.

[00:05:34] So these are the tools that we're going to be using over the course of the workshop. And so keep an eye out, you're going to see a lot of CLI, Nrwl Extensions and Angular Material.