What is Angular?

What is Angular? (Part 1)

Ankit Maheshwari
Nov 3, 2019 · 5 min read

Let’s get started with What Angular is?

Angular is a framework for building client applications in HTML, CSS, and Javascript / Typescript.

Typescript: is a language that compiles to Javascript. Typescript is a very common when using Angular — because even Angular is written in Typescript.

Why do we need Angular?

Complex applications are hard to maintain in Javascript and Jquery. We need a way to structure our application. That is why these frameworks (Angular, React etc.) are used.

Benefits of using Angular?

  • Gives our application a clean structure: easy to understand and easy to maintain
  • Includes a lot of re-usable code
  • Makes our application more testable

Architecture of Angular?

Front-end (client) 👇 ←→ Back-end (web server) 👇

User Interface (UI) 👇 ←→ Data + APIs and Processing (Business Logic) 👇

(HTML, CSS, Typescript, JS, Angular) 👇 ←→ (Java, Python etc.) 👇

Front-end(client) sends/receives data to/from server using API

Application Programming Interface (APIs) / HTTP Services

In APIs, endpoints are accessible via the HTTP protocol (GET & POST methods)

Endpoints are URLs to access APIs and HTTP requests get/sends data from/to server.

And the role of Angular is at front-end that is at Client side — User Interface.

First Angular App

Setup Developer Environment

1. Install Stable Version of Node.

Node: It’s basically a run time environment for executing Javascript code outside the browser. In this project We’re not basically use Node but Node provide some tools that we need to build angular project.

Visit: https://nodejs.org/ to download and install recommended stable version of Node.

After installation finished, check to ensure installation was successful -> Open command prompt & type: node — version to make sure Node installed successfully. (The minimum version of Node required to build angular application is version 6.9)

node --version

On my Mac Machine it shows Node version: v10.10.0 👇

Node Version in Terminal (Command Prompt)

2. Install Angular CLI.

* Once we have installed Node, then we can use Node Package Manager or NPM to install third-party libraries. *

One of the library we gonna installed for this project is Angular CLI or Angular Command-Line Interface. It’s a command line tool that we use to create new Angular project or generate some boilerplate code to start of new project.

Angular CLI: Installing Angular CLI… | Open Command Prompt or Terminal and enter following command:

sudo npm install -g @angular/cli

( put sudo to execute this command as administrator - for Mac/Linux users and for Windows users → search Command Prompt → right click and then click ‘Run as administrator’ |sudo is not required for Windows users ) ( -g stands for global ) ( @angular/cli is the name of the package) and ( npm is the Node Package Manager install third-party libraries like @angular/cli)

  • If we not put -g the angular cli will be installed only in current folder and it's not going to be accessible anywhere else.
  • Putting sudo or open ‘Command Prompt’ as administrator will prompt us to enter system password.

After installation finished, check to ensure installation was successful -> Open command prompt & type: ng — version to make sure Angular CLI installed successfully.

ng --version

On my Mac Machine it shows Angular CLI version: 1.6.5 and Node version: 10.10.0 👇

Angular CLI version in Terminal (Command Prompt)

* We have installed Node, NPM and Angular CLI. Now, we can create a new Angular Project *

If you can’t get your environment up and running, use the comment box below and post your questions/errors.

Creating new Angular Project

1. Open command line and type:

sudo ng new hello-world

( using sudo to avoid permission error - for Mac/Linux users and for Windows users → search Command Prompt → right click and then click ‘Run as administrator’ |sudo is not required for Windows users ) ( ng new is a command to get start new Angular project ) ( hello-world is the name of project )

  • This command will generate a bunch of files and folders ( look at top of attached image 👇 ) and then it use NPM to download third party libraries ( look at bottom of attached image 👇 ).

⭐️ Important Note: While running above 👆 command you may face an error: 'git' is not recognized as an internal or external command

To get rid of 'git' error you must have to install git in your system — use this link👇 to download and install git in your system, click here for git https://git-scm.com/downloads

  • Our project is successfully created.
  • Now, to start coding we need a code editor. The editor we will gonna use is Visual Studio Code or VS Code

Visit: https://code.visualstudio.com/ to download and install VS Code.

( VS Code is beautiful, cross-platform lightweight editor or feel free to use sublime, atom or any other editor )

  • Project looks beautiful in VS Code. 👇👇

Click here👇 for Part — 2
https://medium.com/@AnkitMaheshwariIn/what-angular-is-part-2-550954552d89

If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

JavaScript in Plain English

Learn the web's most important programming language.

Ankit Maheshwari

Written by

👨‍💻 Developer | ✍ Blogger ( I rather enjoy coding because it gives me an experience of complete absorption, almost like meditation — If Truth Be Told. )

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade