Angular CLI - The Basics

[Music] today I'm starting a new video series called the basics it will consist of five to ten videos designed to teach you the fundamentals of angular six to kick things off we're going to start with one of the most powerful features of angular which is the CLI a ton of new features were added to the CLI in version 6 and my goal is to show you how to use it effectively to dramatically speed up the development time of your app if you're new to the channel make sure to LIKE and subscribe and grab the full source code from angular firebase comm so the main goal of angular's command-line interface is to automate things that you would otherwise have to do manually and it does a really good job of that compared to what other web frameworks offer the reason I chose it as the topic for this first basics video is because you really need to know how to use the CLI before you can use angular effectively to get started you want to bring up a command line terminal which I'm doing here in vs code then run npm install angular CLI flag global that should install version 6.0 or greater on your system giving you access to the ng command you can verify the install by running an ng flag v which will print out some information about your local development environment then the first command that you'll run is ng new the new command will generate all of the boilerplate code that you need to start a brand new angular project from scratch you'll go ahead and say ng new with the name of your app and then there's a number of different options that you can pass in with the command let's say you want to use a CSS extension you can simply pass in the style flag along with sass last stylist or whatever you want to use and if you want to take advantage of angular's router you can pass in the routing option and that will automatically generate the router for you there's a bunch of other options which you can check out on the documentation on github but I use these two options very frequently when you execute this command it's going to generate a new directory based on the name of your app then it creates all the files necessary to build and test an angular app now that we've created this directory we'll go ahead and run code with the name of that directory to open the project up into vs code if you're not using vs code just open up the project in your IDE as you can see here we have all of our files generated and all of our node modules install but there's one filed it's special when it comes to the COI and that's the angular JSON file for right now we don't have to modify anything inside this file but just know that it exists to control the behavior of the CLI as you become a more advanced angular user you'll be able to do some very powerful things here to build your own libraries control the build process of your app and build your own custom schematics for boilerplate code but we'll cover that stuff in a more advanced video what we want to do next is make sure that our app works properly by running ng serve run the command from the command line and add the a flag to have it automatically open up in your browser the command will compile all of your code with webpack and then spin up a web server so we can view it on localhost 4200 and the cool thing about it is that it will rebuild your code on every change let's go into the source code for this app in the app component and instead of saying welcome to title we'll say hello world title when we make our changes we see them instantly reflected on the app itself now that we have a working skeleton app let's look at how we can generate boilerplate code to build our component services pipes etc when you call generate you're pointing to a schematic a schematic can be thought of as a template that has some specific rules that can be followed based on the command-line arguments that you pass to it every schematic takes a different set of arguments and we can figure out what those arguments are by running an NG generate with the schematic name in this case component and then flag help as you can see here it prints out a bunch of different options that we can pass in to this schematic when it generates the code for us this is an important concept because it's not just generating the files for us it's also putting them in a specific spot and updating the other files that depend on them for example in angular we have a concept of modules so when we generate a component we need to declare that component in its parent module so let's look at the most common use case we'll run ng generate component and give it a name of cool you'll notice that it creates four different files but it also updates our existing app module as you can see here it added the cool component to the deck in the ng module and also handled the typescript import for us so it eliminates those tedious little things that are necessary for the app to work then if we look in the cool directory you can see it generated our component files that we can use to start writing code immediately without having to do any boilerplate setup once you get comfortable with the CLI you'll be able to shorten these commands with aliases for example you might run ng generate component neat then we'll tell it not to generate our testing file then we'll also give it an inline template and an inline style sheet with the T and s flags just like before it generated the component directory and updated the app module but this time it only generated one file because we told it to use an inline template and style sheet so all of that code is contained directly in the component type script that just shows you how the CLI can give you flexibility based on your developer preferences as an angular developer one thing you should be doing is compartmentalizing your code into ng modules by default the CLI will import a component that's generated into your route app module but what if you're trying to generate a component for a feature module let's see how we might handle that first we'll generate a module called awesome now let's say we want to add a pipe to this module called lower case there are two different ways we can handle this the most straightforward way is to just generate this pipe in the same directory as our awesome module when doing that the CLI is smart enough to know to import this pipe in the awesome module and not the route app module like it normally would but sometimes your component might be in a different directory so there's another way to add it to the module and we can do that by simply running the same command but adding the end flag for module and then point it to the awesome module this pipe is generated outside of the awesome directory but it still gets imported properly and declared in the awesome module so just to reiterate the generate command is super powerful and there's a bunch of built-in schematics that handle most of the boilerplate code generation that you'll need an angular and you can even use custom schematics for third-party angular libraries such as ng rx so now that we've generated all this code how are we going to test it one of the great things about the CLI is that it automatically sets you up for test-driven development all we have to do is run ng test and it's going to pull up this test runner in the browser which is powered by karma and Jasmine every time you run the generate command it creates a spec file that you can use to test the code that you generated so far we have seven specs and they're all passing except for one if you remember earlier we changed the title from welcome to app to hello world app and that's causing our specs to fail just like ng serve this will automatically run our specs on every file change so if we change this back to welcome two it's going to rerun all the tests and you see this time all of them pass the next thing we're going to look at is an awesome new feature called ng add which was introduced in angular 6 it allows you to add third-party packages or libraries with zero configuration for example if we want to make our angular app a progressive web app there is normally a bunch of files that we would have to create manually but now we can just run ng add at angular PWA and it's going to create all these files for us automatically in previous videos I've showed you how to setup PWA is an angular but now with ng add those videos are pretty much obsolete because we can just run this command and it will generate the Service Worker config file it will install the dependencies for us and it will also generate the icons necessary to be a valid PWA but ng adds not limited to just packages created by the angular team any third-party library can create its own schematics to automatically add it as a dependency to an angular project let's take a look at the ng bootstrap library normally to install this we would have to run npm install and then import it into our app module then called a for root method on that module but with ng add we can skip this entire process and just handle all these steps with a single command from the CLI run ng add ng bootstrap slash schematics this installs the package via NPM and then also handles the import steps in our app module again this is brand new and angular 6 so there's not many packages that have this functionality but we'll definitely see a lot more of this in the coming year now the last thing we're going to look at is ng build once you finish writing all your code you'll need a way to package and bundle your app so it can be deployed to a web host when you run ng build flag prod it's going to minify and optimize your code and tree shake away any dead code that would make your bundle size larger than necessary in other words it's going to package your app to be as performant as possible for the end user the final code can be found here in the distal der and this is what you would actually deploy to a web host for example if you were using something like firebase you could just run firebase deploy and point it to this dist folder and again your entire build process can be customized in the angular JSON file if you look under architect build configurations you'll see one for production with all the options required for our production build so those are the core features of the angular CLI but let's look at a few other tricks that it has up its sleeve let's imagine we have an existing app that's on an older version of angular and we want to update it in angular 6 we now have this ng update command which will update all of our NPM packages to the latest and greatest version of angular or what if we're stuck and we want to look up something in the documentation we can simply run ng doc with the search term that we want to search and that will open up the angular Doc's so we never have to leave the command-line yet another way that the CLI makes your life a little bit easier I'm gonna go ahead and wrap things up there if this video helped you please like and subscribe and if you're serious about building apps with angular consider becoming a pro member at angular firebase com you'll get access to exclusive content that you won't find anywhere else designed to help you build and ship your app faster thanks for watching and see you soon [Music]

Channel: Fireship

Views: 55,163

Rating: 4.9797726 out of 5

Keywords: angular, angular 2, firebase, webdev, app development, typescript, javascript, lesson, tutorial, angular 6, angular cli, angular basics, angular cli basics, angular cli tutorial, angular cli lesson, ng new, ng add, angular6 cli, angular6, angular command line, cli, command line interface

Id: IZEolKjcjks

Length: 10min 50sec (650 seconds)

Published: Mon May 14 2018