Angular Home

1. What is AngularJS?

AngularJS is a structural framework for building dynamic web applications. It allows developers to use HTML as a template language and extend its syntax to express application components clearly.

✅ Key Features:
✔️ Two-Way Data Binding – Synchronizes data between the model and the view automatically.
✔️ Dependency Injection – Manages services and dependencies efficiently.
✔️ Directives – Extends HTML with new behavior (e.g., ng-model, ng-repeat).
✔️ MVC Architecture – Follows the Model-View-Controller pattern for better code organization.
✔️ Built-in Services – Provides useful services like $http for AJAX requests.

2. Setting Up AngularJS

Step 1: Include AngularJS in Your Project

To use AngularJS, you can include it via CDN:

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

Or, install it via npm:

npm install angular

3. Creating Your First AngularJS App

Step 2: Define an AngularJS Module

An AngularJS application starts with a module, which acts as the container for the app components.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>AngularJS Home</title>
</head>
<body>
    <div ng-controller="myController">
        <h1>Welcome to AngularJS</h1>
        <p>{{ message }}</p>
    </div>

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

✅ Breakdown:

ng-app="myApp" → Initializes the AngularJS application.
ng-controller="myController" → Connects the controller to the view.
{{ message }} → Uses data binding to display dynamic content.

4. Understanding AngularJS Directives

Step 3: Use Built-in Directives

Directives add new functionality to HTML elements.

Example of ng-repeat for displaying a list dynamically:

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

✅ Why Use Directives?
✔️ Makes HTML more dynamic
✔️ Reduces the need for JavaScript manipulation

5. Dependency Injection in AngularJS

Step 4: Injecting Services

AngularJS has built-in services like $http for making API calls.

Example of fetching data from an API:

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

✅ Why Use Dependency Injection?
✔️ Makes components modular and reusable
✔️ Improves testability

Conclusion

AngularJS remains a powerful and easy-to-use framework for building dynamic web applications. Despite the popularity of modern Angular (Angular 2+), React, and Vue, AngularJS is still used in many legacy projects.

✅ Key Takeaways:
✔️ AngularJS simplifies web development with data binding and directives.
✔️ It follows the MVC architecture, making applications structured.
✔️ Dependency injection and built-in services help manage data efficiently.
✔️ Though AngularJS is no longer actively developed, modern Angular is the recommended upgrade path.

ANGULAR