Introduction to AngularJS
AngularJS, developed by Google and released in 2010, revolutionized web development by introducing the concept of extending HTML with dynamic capabilities. It was created by Miško Hevery and Adam Abrons, initially as a project to simplify web application development for enterprise applications.
History and Evolution
What began as a side project at Google quickly evolved into a full-fledged framework that introduced groundbreaking concepts like two-way data binding and dependency injection to the frontend development world. The framework's name comes from the angular brackets (< >) used in HTML, reflecting its deep integration with HTML's structure.
Advantages of AngularJS
Two-Way Data Binding
Automatically synchronizes data between the model and the view, reducing the need for manual DOM manipulation.
Dependency Injection
Built-in dependency injection system makes applications more testable, maintainable, and modular.
Directives
Allows creation of custom HTML tags that serve as new, custom widgets.
Disadvantages of AngularJS
Learning Curve
The framework has a steep learning curve, especially for developers new to JavaScript frameworks.
Performance
Can be slower than newer frameworks due to its digest cycle implementation.
Your First AngularJS Program
Let's create a simple AngularJS application step by step:
Step 1: Include AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>Step 2: Initialize the Application
<div ng-app="myApp" ng-controller="myCtrl">
<!-- Your application content here -->
</div>Step 3: Create a Model
<input ng-model="name">
<p ng-bind="name"></p>AngularJS Directives
ng-app
Initializes an AngularJS application. It can be used to auto-bootstrap an AngularJS application.
<div ng-app="myApp">
<!-- AngularJS application code -->
</div>ng-model
Binds form elements to application data.
<input ng-model="user.name">ng-bind
Replaces the text content of an HTML element with the value of an expression.
<p ng-bind="user.name"></p>Complete Example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input ng-model="name" placeholder="Enter your name">
<p>Hello <span ng-bind="name"></span>!</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = '';
});
</script>
</body>
</html>Try it Yourself
Hello !