Angular CLI

Learn how to create, generate, lint, debug, test, build, and serve high quality apps that follow the Angular Style Guide using the Angular CLI.
Course info
Rating
(380)
Level
Beginner
Updated
Aug 31, 2018
Duration
3h 22m
Table of contents
Course Overview
Overview
Angular CLI Setup and Verification
Generating a New Angular Application
Generating Code from Blueprints
Generating Routing Features
Building and Serving
Running Unit and End to End Tests
Tooling Features
Description
Course info
Rating
(380)
Level
Beginner
Updated
Aug 31, 2018
Duration
3h 22m
Description

Do you want to hone your Angular skills and develop great apps faster, all while following the recommended practices in the official Angular style guide? In this course, Angular CLI, you'll learn how to create, cultivate, debug, test, and serve apps using the Angular CLI, language features and code snippets. First, you'll learn how to generate an application. Next you'll explore how to generate new components and services. Finally, you'll explore and run tests serve code locally, build, and serve code intended for a production deployment. By the end of this course, you'll feel confident in your new Angular knowledge that you can apply right away in your own work.

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Play by Play: Extending the Browser
Beginner
38m
30 Apr 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
(Music) It can be challenging to create modern web applications that follow best practices and that are optimized for development. The Angular CLI takes care of these efficiently and effectively. Hi, I'm John Papa. Welcome to my course on the Angular CLI here on Pluralsight. I'm a web architect, Angular developer expert, and the author of the official Angular Style Guide. I'm very excited to share this course with you. The course gently introduces how to install the CLI, and then how to use it to create apps, generate new features, lint, test, and build apps. By the end of this course, you'll have learned how to build Angular applications faster and with great consistency. Before beginning this course, you should be familiar with Angular, but you don't have to be an expert by any means. If you'd like to get a primer on Angular, you can check out my course, Angular First Look, here on Pluralsight. Please join me on this journey to learn the Angular CLI. We hope you enjoy it.

Overview
Coding is fun, but creating applications that consistently follow best practices, are test hardened, and are optimized for deployment can be challenging. The Angular CLI takes care of these so we can focus on our code. Hi, I'm John Papa. Welcome to my course on the Angular CLI. What is the Angular CLI? Well, it's a command line interface that makes it easy to create an application that works and follows best practices right out of the box. In this course, we'll learn how to install the CLI, create an app, generate components and other Angular features, lint our code, compile an optimized build that we can deploy, and exercise our unit and end-to-end tests. We'll start by learning about the CLI, including what motivated its creation. Why did the Angular team create the CLI in the first place? What problems was it trying to solve and what are the benefits of using the CLI? And then, let's take it for a test drive and see how it works. Test driving the Angular CLI is a great way to get a feel for what it can do and how it can benefit us. Well, let's begin.

Angular CLI Setup and Verification
In this module, we're going to learn how to set up the Angular CLI and how to make sure it all works right by verifying the installation. We'll start by making sure we have the right requirements that the CLI needs, things like the version of Node. Then we'll learn how to find the CLI and install it on our local machines. And then we'll learn how to verify that everything got installed properly. And we'll give it a quick test run to make sure everything's okay. Finally, we'll wrap up by looking at some really important resources that we're going to need while using the CLI. Well, let's get started.

Generating a New Angular Application
Very likely, the first thing most of us will do with the Angular CLI is to create a new application. In this module, we'll learn how to do that, because that's what the CLI is all about, it's for building applications, and the first step is to generate one. So in this module, we'll talk about how we generate an application and the different options that we can do right out of the gate. And then we'll get into learning about all of the little flags that we can add onto the Angular CLI when we're generating the application and the effect that they have. Then we'll learn how we can configure the CLI based upon our own preferences, and some of these things will work right on the generation of the application. For example, maybe we want our apps to all use Sass instead of CSS. And there's some nice features in the CLI that we can use that will help us check our code, which is called linting. And not only can we lint them, but we can also fix the code automatically if we want to. And by the end of this module, we'll see how easy it is and how fast we can generate applications with Angular.

Generating Code from Blueprints
Once we have an application, it's really helpful to be able to generate components and modules and services, and all sorts of other features of Angular. We can do that by using blueprints. Blueprints are the concept that Angular uses to generate code, and there's a bunch of them that come out of the box. So in this chapter, we're going to learn about those blueprints that we use for the most common features, things like components, services or NgModules. There's also some basic TypeScript blueprints too because we'll be using things like just a generic class when we need to or an interface. Many of the blueprints also have several options. For example, we may want to use inline styles with a component, and that can be an option that we add on to it. We'll learn about what those options are and how to learn more of them. I'm a big fan of the aliases as well because I like to move fast when I'm generating code. So we'll learn about those for both options and for our blueprints. And like we did earlier for generating a project with ng new, we can also set up some very commonly used features in the project configuration, that angular-cli. json file. We'll learn about how we can set up our preferences for our team in that file. By the end of this module, we'll have everything we need to generate a whole bunch of Angular features using these blueprints.

Generating Routing Features
We just learned how we can generate a lot of code using the out of the box blueprints that come with the Angular CLI. Now let's take that a step further and we'll learn about how we can add routing features to modules and create routing guards. First, it's good to understand that we can add routing features manually, but we can also do some of this with the CLI. Like in most things, it's good to consider what we're about to do. Before we create a module, do we want to have routing in this module, or don't we? We'll learn what the different outcomes will be in this module. We'll also add some routing paths to some components because we want to see the routing actually work, and we'll learn about how we can generate guards for those routes.

Building and Serving
Writing code is, well, it's awesome, but at some point we have to build and serve our code too. So in this module, we'll learn how to build and serve Angular apps for various target environments such as local development or a production build. And we'll learn how the Angular CLI can help with that, as well as the development lifecycle. We'll cover a variety of different topics here. We'll start off with how do we build using the Angular CLI and explore all the options that we have. And then we'll look at the different build targets that we can do for both development and production, because they're quite different and we have different needs for those. And then we'll explore what builds we actually get. We'll take a look at the output because it's good to understand what the Angular CLI is doing when it's building the content for us. And we'll take a look at how we can serve the code and use that in our development lifecycle. We'll also learn the role that webpack plays in the Angular CLI and how we can eject the webpack configuration if we want to and how we can handle third-party libraries.

Running Unit and End to End Tests
We all want our applications to be stable and not break when we add new code. This is where testing really helps us, and the CLI makes it easy. In this chapter, we're going to talk about how we can execute unit tests using the Angular CLI, which under the covers uses Karma to do the test running. We'll talk about how we can watch file changes with it so it automatically reruns the tests, and we'll look at a whole bunch of other options that we can use when we're testing. While unit tests are great for testing discrete units of functionality, it's really good to have end-to-end tests in our apps too. The CLI also helps us run these using Protractor. We'll explore the different options that we can use while using Protractor, and learn how we can debug both unit and end-to-end tests. Well, let's dig in.

Tooling Features
With great tooling comes great power to all of us with the Angular CLI. There's a lot of new features that were introduced in version 6 of the Angular CLI. In this module, we're going to go over a few of these features, including how you can update your version of Angular using the CLI. We'll tackle workspaces that contain multiple Angular projects, and also how to generate your own Angular libraries using the CLI tooling. Then we'll tackle how you can add libraries to Angular with ease. And we'll take a look at a new tool called the Angular console which gives us a visual representation of the CLI and more.