Angular Tutorial: Getting started with the Angular CLI

I have worked with Angular and the Angular CLI since Angular’s release candidate days. It has come a long way since then. New releases of the framework no longer take a laborious process to upgrade. I recently upgraded a project from v4 to v5 when v5 came out and it was painless and almost unnoticeable. Many of the changes were under the hood. Personally, that was exciting, especially having upgraded Angular projects through all of Angular’s previous versions. Angular has gotten to the point as a framework that new releases are primarily for new features and bug fixes. That is music to a developer’s ears! Just scanning the Angular CHANGELOG.md, the number of breaking changes since the release of v4.0 has dropped dramatically. What you learn today when developing with Angular (and from this Angular tutorial) shouldn’t change too much down the road and that hasn’t always been the case.

As a consultant, I have been on a few projects over the last couple years that have revolved around getting developers up to speed on developing with Angular v2+. Over that time there has been a consistent group of content that I have had to cover when teaching the basics of Angular. What I hope to do is create a series of Angular tutorials that cover that material. To do that I am going to generate an example Angular project and add different example pieces of Angular code that I will use to demonstrate pieces of Angular’s framework. I intend to use it as my personal toolbox (as well as these posts on our blog) as a place I can reference when I need to remember how to do certain things in Angular.

That being said, the first thing we should explore is the Angular CLI which we’ll do in this first Angular tutorial. If you aren’t familiar with the Angular CLI, it’s an installable command line interface that can be used to generate Angular projects, components, services, and modules. It’s an extremely useful tool to use when developing Angular projects. Through a few commands a developer can get up and developing on an Angular project with little effort. That’s just what this Angular tutorial is going to do. I’ll explain a bit about what is generated as well.

The repository can be found at https://github.com/rmroot/ng-example.

Before we jump in, here are some links to other Angular Tutorials I’ve put together:

• Angular Component Tutorial: Inputs, Outputs, and EventEmitters
• Angular Component Lifecycle
• Angular Router Tutorial: Setting Up Routing in Your Application
• Angular Module Tutorial: Application Structure Using Modules
• Using Bootstrap 4 with Angular
• Electron Tutorial: Getting started with Electron and Angular CLI

Dependencies

Before we get started with this Angular tutorial there are a few development environment dependencies that will be needed. Here’s what you will need to develop with the Angular CLI:

• Node.js: v6.9.x +
• npm: 3.x.x +
• The Angular CLI
  • To install, open a terminal with npm installed and then run
    • npm install -g @angular/cli

Creating and Running the Application

Once the Angular CLI is installed. Run the following command to create a new application. In my case, I named my application “ng-example”.

• ng new ng-example

Once your application finishes generating, go into your project directory and start your application with the following command:

• ng serve

The application will build and be served up to http://localhost:4200/. Navigate to that URL in your browser and you will see the default application shell provided by the CLI.

The Angular CLI Application Structure

Before we start developing, let’s take a look at what the CLI generated for us. Open the project in your favorite IDE; I encourage you to use VS Code. VS Code’s intelli-sense for typescript is very powerful, as well as its ability to help with imports. It also has a number of angular specific plugins for developers to use that are very helpful.

When you look inside your project folder, you will see that the CLI has generated a bunch of stuff for you. I am not going to dive into every detail in this post, but I do want to highlight a few things that you should know to get started. The CLI team wants to provide its users the ability to start development right out of the box and they have done just that. Inside the src/ folder you’ll find everything you need to get started. Here is a quick rundown

• src/*
  • styles.css
    • Opening this file you see the comment “You can add global styles to this file, and also import other style files”. That pretty much sums that up, there are a number of strategies for styling your application. For anything global, put it in this file or create a new .css file and import it here. This will also be where you can import Bootstrap or any other styling frameworks you wish to add.
  • index.html
    • This is where the application gets started. Pretty typical html here with the interesting bit being the <app-root></app-root> tag. This is a reference to your entry component in your application (AppComponent). I’ll explain how that tag works in a moment.
• src/app/*
  • app.component.ts
    • This file contains your application’s first and only component right now. It’s a pretty bare bones component for the time being but I want to highlight one thing.

      • @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })

      • This is what marks a typical class file as an Angular component. There’s a variety of different stuff that can be put in this section that I will cover in a later blog post, but for now let’s look at the three default things that go in any component.
        • selector: 'app-root'
          • Here is the app-root tag that we saw earlier. This is what tells the application that <app-root> means to load up this component (AppComponent).
        • templateUrl: './app.component.html'
          • This tells your application what template or view to use in association with this component. In this case it is using app.component.html that was also generated by the Angular CLI.
        • styleUrls: ['./app.component.css']
          • This is providing the component with its own style sheet. Any style you want for just your AppComponent, put it in the app.component.css file.
          • You may notice that it is an array. This means you can declare multiple styleUrls. This can be useful if you want to reuse styles between just a couple of components.
  • app.module.ts
    • Angular uses modules to manage your components. I am not going to go into full detail of how this works in this post but here is a quick rundown of what’s happening here.
    • @NgModule is similar to @Component in that it is marking this class file as a module.
    • Inside it, we are declaring our AppComponent, every component in your application needs a declaration in a module.

Summary

With that we have generated an Angular project using the Angular CLI. I have provided you a brief explanation of what the CLI generated for us and how some of it works. In my next entry we will discuss application structure using modules. If there is anything you don’t understand or would like further explanation on, please leave a comment.

See also the second post in my series that focuses on Angular Modules: Angular Module Tutorial: Application Structure Using Modules