Angular JS is the new JavaScript framework introduced by Google with the aim of making front end development task easier for web developers. AngularJS is a client-side MVC/MVVM framework built in JavaScript, bringing the helping hand in the world of HTML5. It lets web developers to build maintainable and modern web applications. Developed in 2009 by Miško Hevery and Adam Abrons (Google employees), Angular JS is best fitted for one page web apps.
It is open source under the MIT license and is entirely the client side framework. AngularJS helps you structure and test your JavaScript code very easily. To get started with angular JS, you need to put few attributes to HTML scripts. These are:
1. Add the ng-app directive to the <html> tag:
<html lang=”en” ng-app>
2. Add the Angular <script> tag to the end of <head> tag:
<script src=”lib/angular/angular.js”></script>
3. Add regular HTML:
<body ng-controller=”UsersListCtrl”>
<h1>Top users</h1>
<ul>
<li ng-repeat=”users in users”>
{{user.name}}
</li>
</ul>
</body>
</html>
AngularJS directives are reached through HTML attributes and expressions are evaluated with double-bracket notation.
Features of Angular JS:
1) Directives
Directives are one of the most compelling and dominant feature of Angular JS. Directives allow us to extend HTML and let you specify how your page should be structured for the data available in a given scope. Angular JS has several directives to help you build excellent web applications. Some of them are –
a) ngShow: It uses an expression which returns a boolean to find if the element should be displayed or not.
b) ng-app: This directive tells Angular where it gets to act. A simple code, <html ng-app> is all it needed to define a page as an Angular application.
c) ng-bind: changes the text of an element to the value of an expression.
The code <span ng:bind=”user”></span> will display the value of ‘user’ inside the span.
d) ng-controller: specifies the JavaScript class for the given action. Remember controllers are usually kept in external .js files.
e) ng-repeat: It allows you the create the new set of elements in DOM and creates the very clean loop structures in your page.
<ul>
<li ng-repeat=”users in users”>
{{users.description}}
</li>
</ul>
The above code will loop through each user in the collection list.
2) Expressions
To allow the web developers to easily create web applications Angular JS provides certain expressions and it lets you execute that expressions within your HTML page. Example –
<div>2+2 = {{2+2}}</div>
3) Data Binding is the most powerful feature of Angular JS. It provides the two way data binding out of the box. It handles the synchronization between the DOM and the model, and vice versa.
May 29th, 2025
Choosing the right programming language can make all the difference — whether you’re building cutting-edge AI, launching a startup, or simply looking to future-proof your skills. The year 2025 has […]
Jan 2nd, 2025
In 2025, the fusion of advanced technologies is not just an option—it’s a necessity. Among these, Edge AI is leading the charge, offering businesses the ability to process and act […]
Dec 12th, 2024
Technology is advancing at an unprecedented pace, reshaping industries and redefining the roles of professionals. As we approach 2025, staying ahead of the curve requires understanding emerging trends and their […]
