Angular JS

Muskan Gupta
3 min readMay 7, 2021

--

Introduction to AngularJS

AngularJS is a JavaScript-based open-source front-end web framework. It is maintained by Google and by a community of individuals. AngularJS is widely used for developing Single Page Applications (SPAs). It can be added to an HTML page with a <script> tag. AngularJS extends HTML with ng-directives and binds data to HTML with Expressions. AngularJS directives are actually HTML attributes with an ng prefix.

History

AngularJS first came into existence when Miško Hevery, a Google employee, started to work with AngularJS in 2009.AngularJS version 1.0 was released in 2012. Amazingly AngularJS became a huge success in the market and it is now officially supported by Google.

Advantages

o It has a Two-Way Binding Feature:

When changes are made in the model, it is reflected in view.

o Easy to Learn:

One with a fair understanding of HTML, CSS, and JavaScript can carry on with AngularJS easily.

o Fast

AngularJS has an incredible speed which makes it first choice for many developers

o Support of Google

Being a project of Google new features and more improvement after some time is obviously there.

o Works on every platform

o Good user experience

o Easy to maintain

o Supports DOM manipulation and MVC design pattern

o Support Single Page Applications

Disadvantages

o Security Issues:

As it is a JavaScript framework, application server side authentication and authorization is lagging.

o Not degradable:

If the user disables JavaScript, then only the basic page will be visible.

o Internet Explorer 8.0 doesn’t support AngularJs

o Inexperience with MVC

Those people who are unfamiliar with MVC might face issues.

Applications of AngularJS

AngularJS is used by many popular websites and applications.

Some of them are Paypal, Udemy, Snapchat, Amazon, Netflix and Gmail.

Elements of AngularJS

An AngularJS application consists of following three important parts −

· ng-app — ng-app directive defines and links an AngularJS application to HTML.

· ng-model — ng-model directive binds the values of AngularJS application data to HTML input controls.

· ng-bind — mg-bind directive binds the AngularJS Application data to HTML tags.

Hello World in AngularJS

Html

<!DOCTYPE html>

<html lang=”en”>

<head>

<title>AngularJS</title>

<script type=”text/javascript” src=”../../app/controllers/testController.js”></script>

</head>

<body ng-app=”app”>

<div ng-controller=”testController”>

<h2>{{message}}</h2>

</div>

</body>

</html>

app.module.js

angular.module('app', []);

testController.js

angular.module("app")

.controller("myOtherController", function ($scope) {

});

Best IDE for AngularJS-

o Webstorm

o Visual Studio Code

o NetBeans

o Sublime

Official documentation:

Courses:

1) Angular 9 Masterclass with TypeScript, Firebase, & Material (Udemy)

2) Angular Certification Training Course (SimpliLearn)

3) Single Page Web Applications with AngularJS (Coursera)

Books:

Ø Beginner:

· ANGULARJS: In 8 Hours, For Beginners, Learn Coding Fast! (2nd Edition) by Ray Yao

· Angularjs for beginners — Learn angularjs step by step in a day by Aj

Ø Intermediate:

· AngularJS Web Application Development Cookbook by Matt Frisbie

Ø Advanced:

· AngularJS: Up and Running: Enhanced Productivity with Structured Web Apps by Shyam Seshadri and Brad Green

Pro AngularJS by Adam Freeman

--

--