Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
AngularJS Directives
2.1.
ng-app
2.2.
ng-model
2.3.
ng-repeat
2.4.
ngClass
3.
AngularJS filters
3.1.
Output
4.
AngularJS global API
5.
FAQs
6.
Key Takeaways
Last Updated: Mar 27, 2024

AngularJS References

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

AngularJs is an Application design framework for building dynamic, responsive, and single-page applications(SPA). It is an open-source framework created on JavaScript. 

Angular includes:

  • A component-based framework for building web applications.
  • The collection of well-integrated libraries that include features like routing, forms management, client-server communication, etc.
  • A suite of developer tools to develop, build, test, and update your code.

AngularJS Directives

AngularJs has a feature that lets you extend HTML with attributes - Directives. AngularJs has built-in directives, and it also allows you to define your directives. We use angular directives with the prefix ng-. 

Angular has three types of directives:

1. Components:

These are directives with a template and the most common directives.

2. Attribute directives:

These attributes change the behavior or appearance of the elements, components on binding them with HTML.

3. Structural directives:

These directives change the DOM layout of elements by adding or removing them.

Let’s discuss few most used directives and their use cases:

ng-app

This directive initializes an AngularJS application and tells Angular that <div> element is the owner of the application. This directive defines the root element of an application and auto-bootstraps an application on reloading a web page.

ng-model

This directive binds the value or input given to an input field to the application data and makes it responsive. It provides type validation and status for the application data.

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>Name: {{ firstName }}</p>
</div>
 </body>
</html>

ng-repeat

This directive is used as a loop to iterate over a collection and display its elements. It clones the HTML elements once for each item in a collection.
 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Java','Python','C++']">
  <p>ng-repeat:</p>
  <ul>
    <li ng-repeat="name in names">
      {{ name }}
    </li>
  </ul>
   </div>
 </body>
</html>


The output will be an unordered list of elements in the list as shown below:

  • Java
  • Python
  • C++

ngClass

The ngClass directive allows you to set dynamic CSS classes to HTML elements. Add ngClass and set it to an expression. If the expression is true, ngClass adds the CSS class to the corresponding HTML element. The expression can be evaluated as a string, object, or array.
 
AngularJs also has other built-in directives like

1. ng-click - specifies an expression that evaluates when clicked.

2. ng-form - specifies an HTML form to inherit controls from.

3. ng-if - considers the HTML elements and displays it only if the condition evaluates true.

4. ng - required: indicated that a field is required/ important. Primarily used for input fields.

5. ng- style: specifies the style attributes for an element.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

AngularJS filters

AngularJS has a feature to add filters to format data without changing the original format to display. They can be used with an expression or directives with a pipe (|) symbol. Let’s look at a few filters and their use cases:

  1. Currency - This filter formats a number to currency format.
  2. Date - It formats a date to any specified format.
  3. Filter - used to select a subset of items from an array.
  4. json - It formats any object to a JSON string.
  5. limitTo - This filter limits an array/string into a specified number of elements/characters.
  6. Lowercase - This filter format a string into lower case characters sequence.
  7. number - It formats a number into a string.
  8. orderBy - It orders an array by an expression.
  9. Uppercase - It formats a string into an upper case characters sequence.
     
<!doctype html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">

<p>The uppercase name is {{ lastName | uppercase }}</p>
<p>The lowercase name is {{ lastName | lowercase }}</p>
<p>The price is {{ price | currency }}</p>
<p>The date is {{ date | date }}</p>

</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.lastName = "coding ninjas";
    $scope.price = 58;
    $scope.date = "12/12/2012";
});
</script>

</body>
</html>

Output

The name is CODING NINJAS

The lowercase name is coding ninjas

The price is $58.00

The date is 12/12/2012

AngularJS global API

The Global API in AngularJs is a set of JavaScript functions used for performing tasks like comparing objects, converting data, iterating objects. The Global API functions can be accessed using the angular object. The list of few commonly used APIs are:

  1. angular.lowercase()
  2. angular.uppercase()
  3. angular.isString()
  4. angular.isNumber()
     
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>original string: {{ x1 }}</p>
<p>Lowercase: {{ x3 }}</p>
<p>Uppercase: {{ x2 }}</p>
<p>Is it a string? {{x4}} </p>
<p>Is it a number? {{x5}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "JoHn";
    $scope.x2 = angular.uppercase($scope.x1);
    $scope.x3 = angular.lowercase($scope.x1);
    $scope.x4 = angular.isString($scope.x1);
    $scope.x5 = angular.isNumber($scope.x1);
});
</script>
</body>
</html>


The output for the above code is:

original string: JoHn

Lowercase: john

Uppercase: JOHN

Is it a string? true

Is it a number? false

FAQs

  1. What are AngularJS directives?
    AngularJs directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM element. In short, it extends the HTML. We use angular directives with the prefix ng-/
     
  2. What are AngularJS filters?
    AngularJs filters format data without changing the original format to display. They can be used with an expression or directives with a pipe (|) symbol. 
     
  3. Why do we use AngularJS global API?
    The AngularJS Global API is a set of global JavaScript functions used for performing tasks like comparing objects, iterating objects, converting data. The Global API functions can be accessed using the angular object.

Key Takeaways

Let's discuss all the references again in brief:

  • AngularJs is an Application design framework for building dynamic, responsive, and single-page applications(SPA). It is an open-source framework created on JavaScript. 
  • AngularJs has a feature that lets you extend HTML with attributes - Directives. AngularJs has built-in directives, and it also allows you to define your directives. We use angular directives with the prefix ng-
  • It has three types of directives; components, attribute, and structural directives.
  • Filters are used to format data without changing the original format to display. They can be used with an expression or directives with a pipe (|) symbol.
  • Global API is a set of JavaScript functions used for performing tasks like comparing objects, iterating objects, converting data.
     

Hey ninjas! Isn’t angular interesting? Enroll in this web development course to explore angular to become a full-stack developer.

Happy Learning!

Previous article
Angular Lifecycle Hooks
Next article
How to bundle an Angular app for production?
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass