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.
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 the 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
This is a guide to AngularJS Application. Here we have discussed the different concepts of AngularJS Application with examples. You may also look at the following article to learn more –
