Features of AngularJS

AngularJS is a powerful JavaScript framework designed for building dynamic web applications. It provides several features that simplify development and enhance performance. Below are the key features of AngularJS:

---

1. Two-Way Data Binding

• AngularJS synchronizes the model (JavaScript objects) and the view (HTML) automatically.
• Any changes in the UI instantly update the model, 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. Directives

• Directives are special attributes in AngularJS that add functionality to HTML elements.
• Common Directives:
  • ng-model – Binds form elements to data.
  • ng-repeat – Loops through an array.
  • ng-if/ng-show/ng-hide – Displays elements conditionally.
• Example: <ul> <li ng-repeat="item in items">{{ item }}</li> </ul>

---

3. MVC Architecture (Model-View-Controller)

• AngularJS follows the MVC pattern, which organizes code into:
  • Model – Represents data (scope variables).
  • View – The UI displayed to the user.
  • Controller – Handles business logic.
• This separation improves code maintainability and reusability.

---

4. Dependency Injection (DI)

• AngularJS has a built-in Dependency Injection system that manages dependencies efficiently.
• It allows services, controllers, and components to be injected into each other without manually defining dependencies.
• Example: app.controller("myController", function($scope, myService) { $scope.data = myService.getData(); });

---

5. Single Page Application (SPA) Support

• AngularJS is widely used for Single Page Applications (SPAs) where only parts of the webpage update instead of reloading the entire page.
• This improves speed and user experience.
• Example: var app = angular.module("myApp", ["ngRoute"]);

---

6. Routing

• AngularJS provides routing functionality using the ngRoute module.
• Enables navigation between different views without reloading the page.
• Example: app.config(function($routeProvider) { $routeProvider .when("/", { template: "<h1>Home</h1>" }) .when("/about", { template: "<h1>About Us</h1>" }) .otherwise({ redirectTo: "/" }); });

---

7. Services

• AngularJS has built-in services like $http for making API requests.
• Services are reusable pieces of code that perform specific tasks.
• Example: app.controller("myController", function($scope, $http) { $http.get("https://jsonplaceholder.typicode.com/posts") .then(function(response) { $scope.posts = response.data; }); });

---

8. Filters

• Filters modify the data displayed in the view without changing the original data.
• Common Filters:
  • currency – Formats numbers as currency.
  • uppercase/lowercase – Converts text case.
  • orderBy – Sorts an array.
• Example: <p>{{ name | uppercase }}</p>

---

9. Form Validation

• AngularJS provides built-in form validation features.
• Example: <form name="myForm"> <input type="email" ng-model="email" required> <span ng-show="myForm.email.$error.required">Email is required!</span> </form>

---

10. Templates

• AngularJS uses templates to render dynamic HTML content.
• Templates can be static (predefined) or dynamic (fetched from a server).

---

11. Testing Support

• AngularJS applications are easy to unit test using Jasmine and Karma.
• Dependency injection makes testing easier.