What is AngularJS? - Rishan Solutions

AngularJS is a JavaScript-based open-source framework developed by Google. It is mainly used to build single-page applications (SPAs) and dynamic web applications. The framework extends HTML with directives and binds data to HTML using expressions, making development easier and more efficient.

Before understanding AngularJS in detail, let’s break it down step by step.

Step 1: Understanding the Need for AngularJS

1.1 Traditional Web Development Issues

Before AngularJS, web development relied heavily on server-side rendering. Every time a user requested a new page, the browser had to reload everything from the server. This approach caused:

Slow performance due to multiple server requests
Increased development complexity
More code duplication

AngularJS was introduced to address these issues by allowing dynamic content updates without reloading the entire page.

Step 2: Features of AngularJS

AngularJS provides powerful features that simplify web development:

2.1 Data Binding

Two-way data binding: Any changes in the user interface automatically update the model (JavaScript variables) and vice versa.
Example: <input type="text" ng-model="message"> <p>{{ message }}</p>
- When the user types in the input field, the text inside the <p> tag updates instantly.

2.2 Directives

Directives are special attributes in HTML that add behavior to elements.
Some common directives:

ng-model: Binds form controls to data
ng-repeat: Loops through collections
ng-if: Conditionally renders elements

Example:

<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

2.3 Dependency Injection

AngularJS provides built-in dependency injection to manage components efficiently.

2.4 MVC Architecture

AngularJS follows the Model-View-Controller (MVC) pattern, allowing clean separation of concerns.

2.5 SPA Support

It enables Single Page Applications (SPAs), meaning users experience seamless navigation without full page reloads.

Step 3: Setting Up AngularJS

To start with AngularJS, follow these steps:

3.1 Including AngularJS in a Project

There are two ways to include AngularJS in a project:

Using a CDN (Content Delivery Network) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Downloading and Hosting Locally
- Download AngularJS from the official website
- Link the downloaded file in your HTML

Step 4: Basic AngularJS Application

4.1 Creating a Simple App

A basic AngularJS application consists of:

Module – Defines the application
Controller – Controls application logic
View – The HTML representation

4.2 Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <h1>{{ message }}</h1>
    </div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("myController", function($scope) {
            $scope.message = "Hello, AngularJS!";
        });
    </script>
</body>
</html>

4.3 Explanation

ng-app: Defines the AngularJS application.
ng-controller: Attaches a controller to the view.
$scope: The model that connects the controller to the view.

Step 5: Components of AngularJS

5.1 Modules

An AngularJS module is a container for different parts of an application.
Example: var app = angular.module("myApp", []);

5.2 Controllers

Controllers define the logic behind an AngularJS application.
Example:app.controller("myController", function($scope) { $scope.greeting = "Welcome to AngularJS!"; });

5.3 Scope

The $scope object acts as a bridge between the view and the controller.
Example: $scope.name = "John";
- This value can be displayed in HTML using {{ name }}.

5.4 Directives

ng-repeat: Loops through a list
ng-hide/ng-show: Hides or shows elements
ng-click: Binds click events

Example:

<button ng-click="count = count + 1">Click me</button>
<p>Clicked {{ count }} times</p>

Step 6: Routing in AngularJS

6.1 Why Use Routing?

Routing enables multiple views in a single-page application without reloading the page.

6.2 Setting Up Routing

Include the angular-route.js library:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

6.3 Example Code

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template: "<h1>Welcome to Home</h1>"
    })
    .when("/about", {
        template: "<h1>About Us</h1>"
    })
    .otherwise({
        redirectTo: "/"
    });
});

$routeProvider defines different routes.
.when() specifies the templates for each route.

Step 7: Services in AngularJS

7.1 What are Services?

Services in AngularJS provide reusable functionality like fetching data from an API.

7.2 Built-in Services

$http – Used to make HTTP requests.
$timeout – Executes a function after a delay.

7.3 Example: Fetching Data Using `$http`

app.controller("myController", function($scope, $http) {
    $http.get("https://jsonplaceholder.typicode.com/posts")
    .then(function(response) {
        $scope.posts = response.data;
    });
});

Fetches data from an API and binds it to $scope.posts.

Step 8: Advantages and Disadvantages

8.1 Advantages

Two-way data binding
Reduces boilerplate code
Single Page Application support
Seamless dependency injection

8.2 Disadvantages

Performance issues in large applications
Difficult debugging
Limited mobile support

Step 9: AngularJS vs. Angular (Modern Versions)

Feature	AngularJS	Angular (2+)
Language	JavaScript	TypeScript
Architecture	MVC	Component-based
Performance	Slower	Faster
Mobile Support	No	Yes