Angular | A Beginners Guide

Get Started with Angular in 10 mins.

Mayank Patel

Published in

Geek Culture

6 min readMar 18, 2021

What is Angular ?

Angular is a Typescript-based open-source web application development framework.
Angular is used in developing sophisticated ‘Single Page Application’ (SPA) projects.

Why learn Angular ?

Angular is backed by ( ie. maintained by ) Google, so it’s here to stay for long.
Angular has a huge and active community of developers, So If stuck somewhere, you can easily get support from the community.
Angular provides a proper structure to your web application which helps us visualize the project in a better fashion.
MVC Architecture: MVC stands for Model-View-Controller. Data is managed by the Model and View manages the data display. While the controller plays as a connector between the view and model layers.
Using Typescript instead of JavaScript which is more or less a strictly typed version of JS which helps developers to detect bugs at compile time reducing overall development time.

Are Angular and Angular JS same ?

Angular JS is Angular 1, Angular is Angular 2+. Google did a complete rewrite of Angular for Angular 2 and made Angular JS basically a totally separate framework.

Typescript in Brief
Typescript is an open-source, object-oriented language developed and maintained by Microsoft, It is a typed superset of JavaScript that compiles to plain JavaScript.
JavaScript is a dynamic programming language that doesn’t check for the values assigned to the variable & JavaScript doesn’t support object-oriented features.
The type system increases the code quality, readability and makes it easy to maintain and refactor the codebase.
Therefore, the reason to choose Typescript over JavaScript is that it can detect bugs and errors during compile time itself, has support for object-oriented programming features. If you are familiar with JavaScript then moving to Typescript is piece of cake
Angular Updates
The last stable release of Angular : 11.2.5 on 10th March 2021.
Angular updates are very frequent with minor releases every 2-3 months and major releases every 6 months.

Getting Started with Angular

Installation

The first step is to install Angular CLI from npm (Node Package Manager) — (If npm is not present then install Node.js , npm will come with it.)

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Enter command in the terminal to install angular CLI npm install -g @angular/cli
To create a new Angular Project enter command ng new helloworld-app , ng new creates an initial skeleton application at the root level of the workspace

To serve the project created enter ng serve from the project directory.

File Structure

package.json : Configures npm package dependencies that are available to all projects in the workspace.
angular.json : CLI configuration defaults for all projects in the workspace, including configuration options for the build, serve, and test tools that the CLI uses.
editorconfig.json : Configuration for code editors.
/src : Directory where source code is stored.

index.html : index.html serve as the default or home page of the complete app.
styles.css : You can add global styles to this file, and also import other style files.
main.ts : It is the entry point of our web-app.It compiles the web-app and bootstraps the AppModule to run in the browser.
/environments : There are 2 files in this folder where you can specify env. variables for the app for production and development builds.
/assets : In this folder, static assets for the web-app can be stored like images, icons, etc.
/app :

app-routing.module.ts : Here you can handle routes for different components or pages of your app.
app.module.ts : Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in this file.

Component

Components are the UI building block of an Angular App, they are the unit blocks with html css and ts file.

app.component.ts : This is the default root/app component controller file.
app.component.html : This is the view for the app component.
app.component.css : This contains styling for the app component.

Serve Your Content

Enter command ng serve in the terminal and the app will be hosted on port 4200 by default. — ( to serve on port other than 4200 you can run ng serve --port <port>

Index.html

The body part contains tag <app-root></app-root> It refers to the AppComponent in App module.

selector value is ‘app-root’ which can be used to add this component anywhere

This App component is added to the body tag.
Open app.component.html and replace its content it will get reflected on the site.

There are two forms of Angular bindings :

One way binding [] or {{}}

One way data binding are write-only data bindings, It will read a property from the model and display it in the view.

app.component.html

app.component.ts

declared the variable ‘`message’` with content I want to show

Text interpolation allows you to incorporate dynamic string values into your HTML templates, interpolation uses the double curly braces {{ and }} as delimiters.

Two Way binding [()]

Two-way bindings are bindings that read from the input and update the model. They are commonly referred to as banana in a box, two way binding listen to a particular event

For this to work you will have to import the forms module in app.module.ts

and add it to the imports list.

import { FormsModule } from '@angular/forms';

app.module.ts, import forms module and add it to the imports section

Output :

Deploy The App

Enter command ng build -- prod , It will prepare a deployable build for you with index.html as the entry point.

the output will be stored in dist folder

This is your production-ready application ready to be deployed,

wherever you deploy it keep in mind that index.html is the entry point to the website.