Angular - Getting Started In 2019 - Part 1

A beginners guide that will give you basic understanding of Angular and how to get started with it.

Note: This will be series of articles where you will understand all aspects of Angular to build a production ready app.


What is Angular?

Angular is one of the popular JavaScript frameworks for building client-side single page applications using HTML, CSS, and a programming language such as TypeScript. It is maintained by Google and a large community of individual developers.

Angular allows designers to use HTML as the template language and extension of HTML's syntax to convey the application's components effortlessly.

It is based on Model-View-Controller framework which allows separation of concerns while developing web applications.

Why not Angular3.0?

I know, this is one of the most asked question in the Angular interviews. Allow me to throw some light on this.

So, it all started off as being Angular 2.0 when it was first built by Angular team. They had decided to use semantic versioning for releasing angular builds. Also, in parallel they were working on a new router independently which was initially set at version 2.0 as well, but then the Angular team made some breaking changes and revised the router to 3.0. At that point, they were now ready to create another version of Angular, which would be Angular 3.0.

This new version of Angular would also include changes to the router as well, so router itself needed a new version as well. That would've put the router at 4.0 and Angular itself at 3.0. So, instead of having the router always be one number ahead in its version number, the Angular team instead decided to make the next version of Angular 4.0, and they skipped 3. Of course, the router, as well, was incremented to 4.0 at this time.

So, now you know why Angular 3.0 was not released.

Enough of talks now lets get in some action 🔥


Env. Setup

For developing Angular applications, we need to set up the development environment first. Setting up our development environment requires two basic steps. First step to install Node.js, and second step to set up the Angular application.

  1. Install Node.js

  2. Now, we need to install angular-cli which is a command line helper for generating the boilerplate code and managing Angular application.

    npm install -g @angular/cli
  3. Check if angular-cli works by running the below command. (Here ‘ng’ is an acronym of Angular)

    ng --version

If you see something like this, you are good to go 🚀


Getting started with the project

Let’s generate an Angular project, by running below command and following the cli interface.

ng new my-dream-app

In new angular-cli, once you run this command, it will ask “Would you like to add Angular routing?”. If you press ‘y’, angular-cli will add all the default configuration files required for basic routing in you project. After that, it will ask “Which stylesheet format would you like to use?”. This option allows you select a format for CSS files in your project.

Once you are done, you will see a project created in the same directory where the command ran.

Next run the following command

cd my-dream-app
ng serve

and you will see the below

NOTE: ng serve starts a development server up that watches our app’s source code for changes.

AND, IT’S DONE 😉

Open your browser and navigate to the URL shown on your terminal, in the above case http://localhost:4200

Email

About Lalit Aggarwal

Passionate, responsible, team player and committed engineer, with a get-it-done, on-time spirit, and more than 5 years of experience in designing, implementing and adapting technically sophisticated online and offline windows applications using Microsoft Technologies, C#, WPF, SQL, N-tiered architecture and more. Proficient in C# infrastructure, language standards, object modeling technologies and Application Life Cycle management.

Subscribe to our email list

More Tags Of Your Interest