EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial Angular JS Application
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

Angular JS Application

By Priya PedamkarPriya 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,198 ratings)

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

This article has been a guide to Angular JS Applications. Here we have discussed the concepts of Angular JS Application with some examples to get a better understanding. You may also look at the following article to learn more –

  1. Angular 5 and Angular 4
  2. Uses of Angular JS
  3. Ember js vs Angular js
  4. Node.JS vs Angular JS
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • 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

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

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

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

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

EDUCBA Login

Forgot Password?

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

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

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

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

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

Let’s Get Started

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