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.
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:
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:
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:
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:
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 –
