Create an Angular application
Tags: angular, git, node, webdev
Published: 2020-07-27 14:17:01

> Photo by [Daniel McCullough](https://unsplash.com/@d_mccullough) on [Unsplash](https://unsplash.com/)

# Introduction

This post is a first of a series aiming to show how to build an angular application from scratch. 
We will see how to scaffold an enterprise-scale angular application with all the assets needed to easily develop and maintain it.

> This first post doesn't dive deep into how git, node nor angular-cli works. It paraphrases their documentations and gather the informationinto one post. For more informations about them, refer to their documentations. 

# Getting Started
Start by creating a new angular workspace and application using git & angular-cli.
 
# Install Git
<img src="https://dev-to-uploads.s3.amazonaws.com/i/9sqah0dr9g0avg5wn9ac.png" width="125px"> 


Follow the instruction [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

# Install Nodejs and Npm 
<img src="https://dev-to-uploads.s3.amazonaws.com/i/yb26ylgja4gm56z1emh2.png" width="125px">


Install Nodejs and Npm [here](https://nodejs.org/en/download/).
> You can find a lot of great article on dev.to to help you install Nodejs and Npm if you have any trouble with the official documentation. 

### Install NVM (Linux only, sorry not sorry :p)

> NVM helps you install and change the node version used according to the directory/project you are working in.

To install or update nvm, you should run the install script. To do that, you may either download and run the script manually, or use the following `cURL` or `Wget` command:
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```
or 
```bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).
```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

To use it : 
```bash
nvm install 10 # only install a version once
nvm use 10 # nvm use 8, adapt on the project your work
```

# Install the latest Angular CLI
<img src="https://dev-to-uploads.s3.amazonaws.com/i/zexy8wkjnifybe5bz8tq.png" width="125px">



Install the Angular CLI globally.
To install the CLI using npm, open a terminal/console window and enter the following command:
```bash
npm install -g @angular/cli
```

# Create a workspace and initial application
<img src="https://dev-to-uploads.s3.amazonaws.com/i/zexy8wkjnifybe5bz8tq.png" width="125px">

You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:
Run the CLI command ng new and provide the application name (ie. ng-shadow), as shown here:
```bash
ng new ng-shadow
```
The `ng new` command prompts you for information about features to include in the initial app. Accept the defaults (except for stylesheet by chosing `SCSS`) by pressing the `Enter` or `Return` key.
The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
The CLI creates a new workspace and a simple Welcome app, ready to run.

# Run the application
<img src="https://dev-to-uploads.s3.amazonaws.com/i/zexy8wkjnifybe5bz8tq.png" width="125px">

The Angular CLI includes a server, so that you can easily build and serve your app locally.
Go to the workspace folder (ie. `ng-shadow`).
Launch the server by using the CLI command `ng serve`, with the `--open` option.
```bash
cd ng-shadow
ng serve --open
```
The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

![Your application running locally](https://dev-to-uploads.s3.amazonaws.com/i/i65oikiewsmosc6r1s7c.png)

The `--open` (or just `-o`) option automatically opens your browser to `http://localhost:4200/`.