EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Application

AngularJS Application

Priya Pedamkar
Article byPriya Pedamkar

Updated June 8, 2023

AngularJS Application

Introduction to AngularJS Application

This is an outline on AngularJS Application. It is written in Javascript, Angular JS Application is an open-source framework, which gives dynamic character to web pages or web applications. Angular JS was developed in the year 2010 by Google. Angular JS can be used to build applications for mobile or desktop also in addition to web applications. Angular JS has features like declarative templates, dependency injection, directives, etc.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Angular JS used HTML language to extend its syntax and helps in creating applications more efficiently. Angular JS is used to make it dynamic as HTML is mainly used as a static language. Angular JS follows the concept of MVC (Model View Controller). The main idea behind MVC is to make a differentiation between data, logic, and view layer. The view receives data from the model, which is used to display to the user. When the user interacts with the application by performing actions then the controller has changed the data in the model and after that view displays the information after it tells the model about the changes. In Angular JS, data is stored in properties of an object, controllers are JS classes and the view is DOM (Document Object Model).

Concepts of AngularJS Application

The concepts of AngularJS Application with their examples are as follows:

1. Directives to extend HTML attributes

The feature directive is unique and available in other frameworks. The directives are written easily and can be generic also as they can be written once and reused many times. The directives are really useful and there are many reasons to use when you have special needs such as a custom grid or other functionality, the directive you want really doesn’t exist yet. The angular directive starts with ‘ng-’ like ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jame','Nuan','Yesid']">
<p>Looping with ng-repeat:</p>
<ul><li ng-repeat="x in names">  {{ x }}
</li>     </ul>   </div>    </body>
</html>

2. Scope

It is used for the communication between controller and view. It binds the view to the view model and functions defined in the controller Angular JS supports nested or hierarchical scopes. It is the data source for AngularJS and it can add or remove properties when required. All the data manipulation and assignment of data happens through scope objects when doing CRUD operations.

3. Controllers

These are used to define the scope for the views and scope can be thought of as variables and functions that view may use some binding.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName"><br>
Last Name:
<input type="text" ng-model="lastName">
<br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "James";
$scope.lastName = "Anderson";
});
</script>
</body>
</html>

4. Data Binding

It synchronizes the data between model and view. It means the change in the model will update the view. The ng-model directive is used for two-way data binding.

Example: When the user types into the text box the changed value shows in upper and lower case in the label that is two-way data binding.

5. Services

It is used when the state has been shared across the application and needs a solution for data storage. It can be a singleton and can be used by other components such as directives, controllers, and other services. The services that are used is $http, $location, $log, $route, $filter, $document, $timeout, $exception Handler.

6. Routing

t helps in dividing the app into multiple views and bind multiple views to controllers. It divides SPA into multiple views to logically divide the app and make it more manageable.

default route.
App.config(['$routeProvider',
function($routeProvider)
{
$routeProvider.
when('/List',
{
templateUrl: 'Views/list.html',
controller: 'ListController'
}).
when('/Add',
{
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise({
redirectTo: '/List'
});
}])

7. Filters

These are used to extend the behavior of binding expression and directive. It allows formatting the data and formatting values or applying certain conditions. Filters are invoked in HTML with a pipe inside expressions.

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("namesCtrl", function ($scope) {
$scope.friends = [
{ name: "Karl", age: 27, city: "Bangalore" },
{ name: "Lewis", age: 55, city: "Newyork" },
];
});
</script>
</head>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Filtering input:</p>
<p>
<input type="text" ng-model="test">
</p>
<ul>
<li ng-repeat="x in friends | filter:test | orderBy:'name'">
{{ (x.name | uppercase) + ', ' + x.age +','+x.city }}
</li>
</ul>
</div>
</html>

8. Expressions

The expressions {{}} are a declarative way of specifying data binding location in HTML and using an expression for data binding. It can be added in HTML templates and does not support control flow statements but it support filters to format the data before displaying it.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name:
<input type="text" ng-model="firstName">
</p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>

9. Modules

The module is the container of an application and application controllers belong to a module. It is a collection of functions and divides applications into small and reusable functional components. The module can be identified by a unique name and can be dependent on other modules.

<! DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  <body>
<div ng-app="myApp" ng-controller="myCtrl"> //Referring module name myApp
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

10. Testing

To test angular JS code, test frameworks are widely used like Jasmine and karma. These testing frameworks mainly support mocking and are highly configurable using JSON files with help of various plugins.

Conclusion

Angular JS provides the framework to develop the web application in very less time and efficiently. Angular JS is always available for unit testing. It is mainly used for SPA, which makes the development faster. It is easy to understand and simple to learn for JavaScript developers. Angular JS is still useful for people who are beginners as they can grasp it easily.

Angular is getting pace for front-end development as it makes the development faster. Large applications can be easily handled in angular. It can execute better with components. Angular is having really strong areas and significant features to use. Angular has released its higher versions also with new features and better performance.

Recommended Articles

We hope that this EDUCBA information on “AngularJS Application” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. Web Testing Applications
  2. Advanced AngularJS Interview Questions
  3. Angular Material Form Example
  4. Web Services Testing
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more