Build Your First Angular Website

Starting an Angular App with the Angular CLI

We'll be using the Angular CLI to start our project. It handles a lot of the setup for us like:

  • Setting up a transpiler (TypeScript)
  • Processing Sass
  • Scaffolding our application with best practices
  • Loading ES6 modules (webpack)

The Angular CLI let's us focus on what makes our applications unique. We don't have to fiddle around with build setups or anything like that. If you look at the overall JavaScript world right now, all the major libraries and frameworks including React, Vue, and Angular are using CLI tools to help us get setup quickly.

Installing the Angular CLI

The Angular CLI site can be found here: http://cli.angular.io and the main docs are on GitHub here: https://github.com/angular/angular-cli/wiki

We'll start by installing the CLI:

npm install -g @angular/cli

Notice we are using the -g flag to install this globally on our system. Now we should be able to run ng -v to see what version we are running:

ng -v 

Starting Our Project

With the Angular CLI, we can start a project using the following:

ng new my-angular-site

Now we have a full Angular application ready to build with. You can see the folder structure and the files that get generated for us:

We'll mainly be working inside the src folder. The .angular-cli.json is the file that tells our CLI how to run.

Serving Our Project

We can start this Angular app by using the ng serve command:

ng serve

We can see this app in our browser now at http://localhost:4200

Starting a Minimal Angular CLI Project

While that first setup is great for large production ready applications, it can be a little daunting when we only want to make a test site to get some experience with Angular.

Let's use the --minimal flag to create a barebones app. This will remove the tests (spec.ts files) and make our folder structure simpler by inlining the template and styles instead of creating separate files for them.

Delete that first project we created and recreate it with the minimal flag.

ng new --minimal my-angular-site

Notice how the folder structure is much cleaner:

Adding Routing and Using Sass for Styles

Let's use the CLI to handle more for us. We want to eventually route our application so that our single page app can navigate between pages. We also want to use Sass because it will make writing our CSS easier.

Delete that project one last time and create a new one with the --routing flag and also the --style=scss flag:

ng new --minimal --routing --style=scss my-angular-site

Now we are given a routing file at src/app/app-routing.module.ts and also our .css files are now .scss files.