What is AngularJS?
AngularJS supports inbuilt internationalization for three types of
filters currency, date and numbers. We only need to incorporate
corresponding js according to locale of the country. By default it
handles the locale of the browser. For example, to use Danish locale,
use following script
AngularJS is a framework to build large scale and high performance
web application while keeping them as easy-to-maintain. Following are
the features of AngularJS framework.
- AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
- AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.
- Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
- AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
Data binding is the automatic synchronization of data between model
and view components. ng-model directive is used in data binding.
Scopes are objects that refer to the model. They act as glue between controller and view.
Controllers are JavaScript functions that are bound to a particular
scope. They are the prime actors in AngularJS framework and carry
functions to operate on data and decide which view is to be updated to
show the updated model based data.
AngularJS come with several built-in services. For example $https:
service is used to make XMLHttpRequests (Ajax calls). Services are
singleton objects which are instantiated only once in app.
Filters select a subset of items from an array and return a new
array. Filters are used to show filtered items from a list of items
based on defined criteria.
Directives are markers on DOM elements (such as elements, attributes,
css, and more). These can be used to create custom HTML tags that serve
as new, custom widgets. AngularJS has built-in directives (ng-bind,
ng-model, etc) to perform most of the task that developers have to do.
Templates are the rendered view with information from the controller
and model. These can be a single file (like index.html) or multiple
views in one page using "partials".
It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.
Deep linking allows you to encode the state of application in the URL
so that it can be bookmarked. The application can then be restored from
the URL to the same state.
Following are the advantages of AngularJS.
- AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
- AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience.
- AngularJS code is unit testable.
- AngularJS uses dependency injection and make use of separation of concerns.
- AngularJS provides reusable components.
- With AngularJS, developer writes less code and gets more functionality.
- In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
- AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.
Following are the disadvantages of AngularJS.
- Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
- Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.
Following are the three core directives of AngularJS.
- ng-app − This directive defines and links an AngularJS application to HTML.
- ng-model − This directive binds the values of AngularJS application data to HTML input controls.
- ng-bind − This directive binds the AngularJS Application data to HTML tags.
When the page is loaded in the browser, following things happen:
- HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.
- Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
- Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.
Model View Controller or
MVC as it is popularly called, is a software design pattern for
developing web applications. A Model View Controller pattern is made up
of the following three parts:
- Model − It is the lowest level of the pattern responsible for maintaining data.
- View − It is responsible for displaying all or a portion of the data to the user.
- Controller − It is a software Code that controls the interactions between the Model and View.
ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.
ng-model directive binds the values of AngularJS application data to
HTML input controls. It creates a model variable which can be used with
the html page and within the container control( for example, div) having
ng-app directive.
ng-bind directive binds the AngularJS Application data to HTML tags.
ng-bind updates the model created by ng-model directive to be displayed
in the html tag whenever user input something in the control or updates
the html control's data when model data is updated by controller.
ng-controller directive tells AngularJS what controller to use with
this view. AngularJS application mainly relies on controllers to control
the flow of data in the application. A controller is a JavaScript
object containing attributes/properties and functions. Each controller
accepts $scope as a parameter which refers to the application/module
that controller is to control.
AngularJS being a pure javaScript based library integrates easily with HTML.
Step 1 − Include angularjs javascript libray in the html page
Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:
Step 1 − Include angularjs javascript libray in the html page
<head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head>Step 2 − Point to AngularJS app
Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:
<body ng-app = "myapp"> </body>
ng-init directive initializes an AngularJS Application data. It is
used to put values to the variables to be used in the application.
ng-repeat directive repeats html elements for each item in a collection.
Expressions are used to bind application data to html. Expressions
are written inside double braces like {{ expression}}. Expressions
behave in same way as ng-bind directives. AngularJS application
expressions are pure JavaScript expressions and outputs the data where
they are used.
Uppercase filter converts a text to upper case text.
In below example, we've added uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.
In below example, we've added uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.
Enter first name:<input type = "text" ng-model = "student.firstName"> Enter last name: <input type = "text" ng-model = "student.lastName"> Name in Upper Case: {{student.fullName() | uppercase}}
Lowercase filter converts a text to lower case text.
In below example, we've added lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.
In below example, we've added lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.
Enter first name:<input type = "text" ng-model = "student.firstName"> Enter last name: <input type = "text" ng-model = "student.lastName"> Name in Upper Case: {{student.fullName() | lowercase}}
Currency filter formats text in a currency format.
In below example, we've added currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.
In below example, we've added currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.
Enter fees: <input type = "text" ng-model = "student.fees"> fees: {{student.fees | currency}}
filter filter is used to filter the array to a subset of it based on provided criteria.
In below example, to display only required subjects, we've used subjectName as filter.
In below example, to display only required subjects, we've used subjectName as filter.
Enter subject: <input type = "text" ng-model = "subjectName"> Subject: <ul> <li ng-repeat = "subject in student.subjects | filter: subjectName"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
orderby filter orders the array based on provided criteria.
In below example, to order subjects by marks, we've used orderBy marks.
In below example, to order subjects by marks, we've used orderBy marks.
Subject: <ul> <li ng-repeat = "subject in student.subjects | orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul>
ng-disabled directive disables a given control.
In below example, we've added ng-disabled attribute to a HTML button and pass it a model. Then we've attached the model to an checkbox and can see the variation.
In below example, we've added ng-disabled attribute to a HTML button and pass it a model. Then we've attached the model to an checkbox and can see the variation.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button <button ng-disabled = "enableDisableButton">Click Me!</button>
ng-show directive shows a given control.
In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "showHide1">Show Button <button ng-show = "showHide1">Click Me!</button>
ng-hide directive hides a given control.
In below example, we've added ng-hide attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
In below example, we've added ng-hide attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "showHide2">Hide Button <button ng-hide = "showHide2">Click Me!</button>
ng-click directive represents a AngularJS click event.
In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.
In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.
<p>Total click: {{ clickCounter }}</p></td> <button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>l
angular.module is used to create AngularJS modules along with its dependent modules. Consider the following example:
var mainApp = angular.module("mainApp", []);Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.
AngularJS enriches form filling and validation. We can use $dirty and
$invalid flags to do the validations in seamless way. Use novalidate
with a form declaration to disable any browser specific validation.
Following can be used to track error.
Following can be used to track error.
- $dirty − states that value has been changed.
- $invalid − states that value entered is invalid.
- $error − states the exact error.
Using AngularJS, we can embed HTML pages within a HTML page using ng-include directive.
<div ng-app = "" ng-controller = "studentController"> <div ng-include = "'main.htm'"></div> <div ng-include = "'subjects.htm'"></div> </div>
AngularJS provides $https: control which works as a service to make
ajax call to read data from the server. The server makes a database call
to get the desired records. AngularJS needs data in JSON format. Once
the data is ready, $https: can be used to get the data from server in
the following manner:
function studentController($scope,$https:) { var url = "data.txt"; $https:.get(url).success( function(response) { $scope.students = response; }); }
$routeProvider is the key service which set the configuration of
urls, maps them with the corresponding html page or ng-template, and
attaches a controller with the same.
Scope is a special JavaScript object which plays the role of joining
controller with the views. Scope contains the model data. In
controllers, model data is accessed via $scope object. $rootScope is the
parent of all of the scope variables.
Scopes are controllers specific. If we define nested controllers then
child controller will inherit the scope of its parent controller.
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); </script>Following are the important points to be considered in above example.
- We've set values to models in shapeController.
- We've overridden message in child controller circleController. When "message" is used within module of controller circleController, the overridden message will be used.
Services are JavaScript functions and are responsible to do specific
tasks only. Each service is responsible for a specific task for example,
$https: is used to make ajax call to get the server data. $route is
used to define the routing information and so on. Inbuilt services are
always prefixed with $ symbol.
Using service method, we define a service and then assign method to it. We've also injected an already available service to it.
mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); } });
Using factory method, we first define a factory and then assign method to it.
var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; });
factory method is used to define a factory which can later be used to
create services as and when required whereas service method is used to
create a service whose purpose is to do some defined task.
AngularJS provides a supreme Dependency Injection mechanism. It
provides following core components which can be injected into each other
as dependencies.
- value
- factory
- service
- provider
- constant
provider is used by AngularJS internally to create services, factory
etc. during config phase(phase during which AngularJS bootstraps
itself). Below mention script can be used to create MathService that
we've created earlier. Provider is a special factory method with a
method get() which is used to return the value/service/factory.
//define a module var mainApp = angular.module("mainApp", []); ... //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); });
constants are used to pass values at config phase considering the
fact that value cannot be used to be passed during config phase.
mainApp.constant("configParam", "constant value");
Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.
AngularJS provides support to create custom directives for following type of elements.
- Element directives − Directive activates when a matching element is encountered.
- Attribute − Directive activates when a matching attribute is encountered.
- CSS − Directive activates when a matching css style is encountered.
- Comment − Directive activates when a matching comment is encountered.
Internationalization is a way to show locale specific information on a
website. For example, display content of a website in English language
in United States and in Danish in France.
<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"><
Comments
Post a Comment