AngularJS

Posted March 20, 2023

What is AngularJS?

AngularJS is a JavaScript framework for building web applications. It is an open-source framework maintained by Google and community contributors. AngularJS was first introduced in 2010 and it has evolved into a stable and robust framework for building complex web applications.

AngularJS uses the Model-View-Controller (MVC) architecture pattern, which makes it easy to build and maintain web applications. AngularJS provides a set of powerful features that simplify web application development. It provides two-way data binding, dependency injection, directives, services, and much more.

Directives:

Directives are a key feature of AngularJS that allow you to extend HTML with custom behavior and functionality. In other words, directives are markers on an HTML element that tell AngularJS to attach a specific behavior or functionality to that element. Directives can be used to create custom HTML tags, attributes, and classes.

Sample code:

My app.html

<my-directive name=”John”></my-directive>

Script.js

angular.module(‘myApp’, [])

.directive(‘myDirective’, function() {

return {

restrict: ‘E’,

template: ‘<div>Hello {{name}}!</div>’,

scope: {

name: ‘@’

}

};

});

List of Directives:

ng-app: Used to define the root element of an AngularJS application.
ng-model: Used to bind an HTML element to a model value.
ng-repeat: Used to repeat a set of HTML elements based on an array or object.
ng-show/ng-hide: Used to show or hide an HTML element based on a boolean expression.
ng-if: Used to conditionally render an HTML element based on a boolean expression.
ng-class: Used to apply CSS classes to an HTML element based on a boolean expression.
ng-click: Used to execute a function when an HTML element is clicked.
ng-submit: Used to execute a function when a form is submitted.
ng-disabled: Used to disable an HTML element based on a boolean expression.
ng-options: Used to generate a list of options for a select element based on an array or object.
ng-bind: Used to bind an HTML element to a model value.
ng-style: Used to apply CSS styles to an HTML element based on a model value.
ng-init: Used to initialize a model value when a controller is loaded.
ng-src: Used to bind the src attribute of an HTML element to a model value.

Getting Started with AngularJS

· To get started with AngularJS, you need to download and include the AngularJS library in your web application. You can download the latest version of AngularJS from the official website.

· Once you have included the AngularJS library in your web application, you can start using AngularJS by adding the ng-app directive to the HTML tag of your web page. The ng-app directive tells AngularJS to initialize the application and bind it to the HTML element.

Example:

<!DOCTYPE html>

<head>

<title>My AngularJS App</title>

</head>

<body>

<div>

<p>Hello {{name}}!</p>

</div>

</body>

</html>

Explanation:

In the above example, we have added the ng-app directive to the HTML tag. We have also added an input field and a paragraph tag that displays a message based on the value of the input field. The ng-model directive is used to bind the value of the input field to the “name” variable in the model.

Output: 1

Output: 2

Conclusion:

AngularJS is a powerful framework for building complex web applications. It provides a number of powerful features that simplify web development and make it easier to build maintainable and scalable applications. If you are looking for a framework to build your next web application, then AngularJS is definitely worth considering.

For more technical updates — cubensquare.com/blog

sowndarya C