EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials AngularJS Tutorial Angular JS Application
 

Angular JS Application

Priya Pedamkar
Article byPriya Pedamkar

Angular JS Application

Introduction to Angular JS Application

Angular JS is an open-source application. It was written in JavaScript. Angular JS was developed in the year 2010 by Google. Angular JS application provides a dynamic reference to web applications and pages as well. Angular JS lets you extend the HTML vocabulary for your application. Angular JS is used because HTML falters when it is being tried to use for declaring the dynamic views in web applications. Angular JS is referred to as the toolset for building the framework most suited to your application development.

 

 

Angular JS framework features can be modified or replaced, reused to suit more or unique to workflow, and for future reference. It is being fully extensible and works with other libraries as well. AngularJS Application code is plain in old javascript objects. It makes your code to test, maintain, reuse. In Angular JS, there is no need to inherit from proprietary types in order to wrap up the models in accessors methods like we have to do in other. Angular JS has followed the latest concepts for development.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

Concepts of Angular JS Application

The concepts 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 them like; when you have special needs as the custom grid or other functionality, the directive you want really doesn’t exist yet. A Custom Angular JS Application directive starts with ‘ng-’ like ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Example:

Code:

<!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>

Output:

Angular JS Application-1

2. Scope

It is used for the communication between controller and view. It binds a view to the view model and functions defined in controller Angular JS Application supports nested or hierarchical scopes. It is a data source for Angular JS Applications, and it can add or remove property when required. All the data manipulation and assignment of data happens through scope object when to do CRUD operation.

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.

Example:

Code:

<!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>

Output:

Controllers

4. Data Binding

It synchronizes the data between the model and the 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 a 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, $exceptionHandler.

6. Routing

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

Example: default route

Code:

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 the pipe inside expressions.

Example:

Code:

<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>

Output:

Angular JS Application-3

8. Expressions

The expressions {{}} are the 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.

Example:

Code:

<!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>

Output:

Expressions

9. Modules

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

Example:

Code:

<! 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 the Angular JS Application code, test frameworks are widely used, like Jasmine and karma. These testing frameworks mainly support mocking and are highly configurable using a JSON file with the help of various plug-in Angular JS Applications.

Conclusion

Angular JS provides a framework that has unique directives and powerful features. Directives help us in building the new HTML syntax, which is mainly specific to an application. It is being used as reusable components. The component allows you to hide the complex structures and other behavior. The focus would be only on what the application does and how the application looks separately. Angular JS application is getting popular these days among the as it is easy to learn and develop the application. There are many opportunities in the market for front-end developer. If you are good with JavaScript, then Angular JS won’t be tough for you to learn, and updating your skills with this technology would be a great idea.

Recommended Articles

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

  1. Angular 5 and Angular 4
  2. Uses of Angular JS
  3. Ember js vs Angular js
  4. Node.JS vs Angular JS

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

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

EDUCBA

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

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

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 Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW