Angular CLI Install

Summary

1. Install an Angular Project

2. Brief Overview of Project Structure

Environment Setup: Can be very tedious and difficult at times unfortunately it is an important part of coding.

Prerequisites

• Current Node Version

All commands below that start with a $ are meant to be run in your terminal. You don't include the $ in the command it is part of the terminal prompt.

STEP ONE

Check our Current Version of Node. In the image below we are using and nvm is short for node version manager

If you have the current Node version INSTALLED move on to Angular CLI Install STEP otherwise continue to installing node

Node Install

Set Default Node Version

Now when we open any new terminal we want it to use NODEJS

Angular CLI Install

In this section we will install the angular command line application. This will CLI tool will let you create new angular applications as well as boilerplate code for all other angular parts, components, services etc.

Install CLI

The below command will install the angular command line interface (CLI). The -g option stands for global meaning, that anything we install globally is available in our local machine versus just the folder you installed it.

$ npm install -g @angular/cli

npm install -g @angluar/cli

Check the install worked run

Terminal Command

$ ng -v

ng -v shows us the commands on the left for angluar cli and what they do

If the above command, ng -v gave you something similar to above image move on, otherwise go back and install angular cli.

Create New Angular Application

We can now use the angular CLI to create a brand new angular application. The below command can take a some time be patient.

Terminal Command

$ ng new demo-app

After running the above command you will be prompted for: Add Angular Routing: enter y Stylesheet Format: SCSS

Creating a New Angular App

Ignore the warnings if you got any, they are okay.

There should now be a new directory with the same name as your angular application in this case that was demo-app

Starting Your Angular Application

Now that we have an new starter angular app we can try to serve it make sure it runs. From within the angular application directory in this case its demo-app run:

SAVE THE BELOW COMMAND. You do not need to memorize the command below instead put it in word doc or in glip to a message to yourself. Put it anywhere you can find and get to it easily so you can start your angular application.

Terminal Command

$ ng serve

Your Angular app is running

Viewing the Angular App

Your application is running if you have the above image anything else means the app failed to run, read the error message and try again. When you run ng serve angular is compiling all the typescript and javascript into one javascript file, all the HTML files into a single index.html file as well. and all the SCSS files into one CSS file.

To view your running application click on the URL, in the blue box

Click URL in blue box to view running angular application

** Angular Live Development Server is listening on localhost:4200, open your browser on 
http://localhost:4200/ **
 

Clicking the URL, http://localhost:4200/ should open the default angular starter app, seen below.

Default Starter Angular Appliation

Angular App Recap

• Installed proper NODE version if we needed it.

• $ npm install -g @angular CLI Installed angluar command line interface ( CLI) globally. This will let us generate a new angular app and other angular building blocks.

• $ ng new demo-app Used the install angular CLI to create a new angular app called demo-app. This created a new folder called demo-app that contains our entire angular application.

By default creates everything in the weather-app folder, but the parts we care about are: All the other files and folders mostly ignored as far as where you will need to write code in.

Within demo-app directory

Source Code - The src folder

All our code we write for an application is called source code and the convention is to name your source code folder src for short for source. Everything outside of the folder is default boiler plate code that we get by default and will not have change typically.

Important Angular Files

• app.module.ts: The app.module.ts file in our demo-app/src/app folder is the heart of our angular app. This is where we import all modules, components, services and anything else our app will need. Think of this file as a registry for everything our app will need before we run our ng serve command.

• app.component.html: This is the the main html or view of our application, or in this case our only view we have.

• app.component.css: This will provide the css or styling for our app.component.html. Makes our html look pretty.

• app.component.ts: This is what provides information or is otherwise called the controller of our app.component.html. Think of it as the brains of for that html, any logic that needs to happen for our html to display will happen in here.

• app.component.spec.ts: Currently we can ignore this file and all other spec files, however all components are automatically created with this file. This file is used to run tests for the business logic in our app.component.ts file. All files that end in spec.ts are for testing our code we will not be working in them.

There are many files and folders that we will not have to write code in or even know what they do to write an angular application.

Don’t worry about knowing what all of the other files do at this point in time, it is really easy to get lost and go down a rabbit hole. For now we just focused on the main parts of an angular application.

Angular CLI Commands

NOTE in the below commands, <> denote a place holder for an actual word. For example ng new <app-name> would be run wihout any <> ng new myApp

Useful CLI Commands

Angular CLI Command	Description
ng new <app-name>	Creates a new angular app
ng serve	Starts yours angular App
ng generate component <component-name>	Creates a new Component, with the name given
ng generate service <service-name>	Creates a new Service, with the name given
ng build	Puts together an build for deployment

Key Concepts

• All angular CLI commands begin with ng

• ng new <app-name> installs a new angular application called whatever text is place at <app-name>

• app.module.ts is the heart of our application and acts like a registry of our application. All modules and components are imported here and every angular app has to have an app.module.ts.

• app.component - Is the main component, or root component of our angular app by default.

• Dont worry about any of the files that have spec in the name, they are used for unit testing or files and folders outside the src folder.

MOST IMPORTANT SAVE THIS COMMAND: To serve you angular app

Terminal Command

$ ng serve --host 0.0.0.0 --port 8081 --public-host $C9_HOSTNAME

Additional Angular CLI Resources:

• https://scotch.io

• https://angular.io/guide/quickstart