In this 12 Day Series we will learn Angular. Angular is one of most popular front end framework. Angular let’s us develop rich client side applications Like Dashboards, Real-time Apps etc. We will be using the latest and greatest version of Angular, the version 7.0. Today on day 01 we will setup Angular development environment in our local machine and create our first Angular app. So after a little intro about the Angular framework let’s start setting up the local environment.
What is Angular?
Local Environment Setup:
Angular 7 development environment can be setup in Mac, Linux, Windows. For setting Angular environment in our local machine these are the following tools that we need to install on our local machine.
NPM: Node Package Manager.
TypeScript: TypeScript is a programming language developed and maintained by Microsoft.
Angular CLI: Angular cli is a command line interface to scaffold and build Angular applications using node.js style modules.
To check if node is installed on your computer, enter the following command in the terminal.
$ node -v // v10.15.1
If it does not print anything, it’s mean node.js is not install on your computer. To install nodejs, go the https://nodejs.org/en/download/ and install the package based on your Operating System.
NPM (Node Package Manager) is included in Node.js installation, so there is no need to install it separately.
To check if npm is installed or not, enter the following command in the terminal. It should display the version of the npm.
$ npm -v // 6.4.1
For Mac OS or Linux OS users, you can directly install Node.js from the command line using Homebrew package manager for Mac OS or Linuxbrew package manager for Linux OS.
$ brew install node
As you have already installed Node.js, it’s time to install the TypeScript Package using the NPM. Open your terminal window and enter the following command:
$ npm install -g typescript
This will download the latest version of typeScript from the server, extract it and install on your computer.
To Install Angular CLI, type the following command in the terminal:
$ npm install -g @angular/cli
This will install the
ng command globally on your system.
To verify whether your installation completed successfully, you can run the following command:
$ ng --version /* _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 7.0.2 Node: 8.12.0 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.10.2 @angular-devkit/core 7.0.2 @angular-devkit/schematics 7.0.2 @schematics/angular 7.0.2 @schematics/update 0.10.2 rxjs 6.3.3 typescript 3.1.3 */
Now that you have Angular CLI installed on your system, you can use it to generate your Angular app, generate a new angular app.
Create new Angular App
With the Angular CLI, we can create a new project using the following command:
$ ng new my-first-angular-app
At this point you have a working Angular app and your new directory
my-first-angular-app structure looks like this:
You can now navigate to the new directory to run:
$ cd my-first-angular-app
Then start the Angular CLI development server to run:
$ ng serve
This will start a local development server that you can now navigate to in your favorite browser at
http://localhost:4200/ to see your first angular application in action.
Angular CLI development server includes Live Reload support, so your browser automatically reloads the application when a source file changes.