Getting started with Angular, Introduction & application architecture.

Photo by Braden Collum on Unsplash

Angular is a front-end javascript framework that works with typescript. Originally developed and maintained by Google, Angular has rich features overall of adjacent frameworks despite having pros of their own.

Angular formally is known as Angular JS AKA Angular js 1.0, was sort of libraries that could be used just like jQuery. Later on, Upon releasing Angular 2.0, it was decided to drop JS from the name, so now it is just Angular.

When we say Angular JS, that would be referred to Angular 1.0, and From 2.0 it is just Angular. Angular is entirely different from Angular JS so be careful when you calling and learning them.

Enough of introduction, let's get to create our first Angular application.

What you should know?

You should be aware and should have good hands-on if possible on

  • HTML
  • CSS
  • Javascript/jQuery

Prerequisites in your system

  • NPM(Node package manager): You should have installed npm which you can get from the official NPM site.
  • AngularCli: Its powerful tool which abstract manual work of creating project/components/modules etc and lets you focus on code and logic part of the application. You can install Angular CLI using instruction given at https://cli.angular.io/

npm install -g @angular/cli

Let’s Hello world in Angular

You can create hello world app using single command. Issue

ng new hello-world

Say yes if you been asked for routing

Select your preferred styling method, let's choose CSS for simplicity

There you go.

It may take less than a minute to install based on your system configuration and network speed.

Once done, Open hello-world directory with your favorite IDE/editor, I am going with VScode here.

Run your first Hello world Angular app.

Just cd into your project directory, or if you are in VS code, use the integrated terminal to issue

ng serve

Once command finished executing you will see

That means, your application is ready and running at http://localhost:4200/

Woila… it's Running!! Congrats. Now let's get into code/project and see what is going on and how this all happened.

The understanding folder structure of Angular 8(Current version)

Folder structure of Angular 8 application

So here is the Folder structure of the Angular 8 Project.

We will be working inside /src/ directory most of the time and our application logic/code will be in /src/app/ directory.

Upon opening the project in the browser, index.html Gets to the browser where everything bootstraps.

main.ts file is executed on a primary basis thus all further requests and responses are handled accordingly.

Inside the app/ directory, you will see app components details.

  • Angular application is made up of one or more Modules.
  • Modules are made up of one or more components
  • Components are made up of one or more HTML templates, CSS and classes.

In the next article, we will understand components, how to create it and how it works.

Follow me on Twitter

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store