What is AngularJS?
AngularJS is an open-source JavaScript framework which
simplifies binding JavaScript objects with HTML UI elements.
It is distributed as a JavaScript file, and can be added
to a web page with a script tag:
AngularJS uses HTML as the backbone. It creates extended
HTML tags that can be used as normal HTML tags. These tags will help you to
write an efficient code. The interesting fact is that you can reduce the lines
of code you may need to write when you use normal JavaScript.
e.g:
Suppose, you want to create a text box, which has
'employee name', whenever you make changes in the text box, 'employee' object
should get updated and when something is changed internally in the customer
object the UI should get updated.
In order to achieve this communication between UI to
object, the developers end up writing two functions:
1). Function, which takes data from UI and sets it to the
object
2). Function, which takes takes data from the object and
sets it to UI.
The same functionality can be achieved from AngularJS in
a simpler way.
< div
ng-controller="Employee" >
< input
type=text id="txtEmployeeName"
ng-model="EmployeeName"/ >
< /div >
The javascript class is attached to a HTML parent div tag
using “ng-controller” directive and the properties are binded directly to the
text box using “ng-model” declarative. So now whatever you type in the textbox
updates the Employee object and when the Employee object gets updated it also
updates the UI.
Explain Expressions in AngularJS?
AngularJS Expressions are like JavaScript expressions and
are written inside double braces: {{ expression }}. They can contain literals,
operators, and variables. AngularJS will "output" data exactly where
the expression is written.
What is a Modules and how to create Modules in
AngularJS?
An AngularJS module are containers in which application
is defined. A module is a collection of services, directives, controllers,
filters, and configuration information. You can create a module by
angular.module() funtion, e.g:
< div
ng-app="myAppModule" > ...< /div >
< script >
var app =
angular.module("myAppModule", []);
< /script >
In the above example the "myAppModule"
parameter refers to an HTML element in which the application will run. Now you
can add controllers, directives, filters, and more, to your AngularJS
application.
Advantage of
Module: Global functions should be avoided in JavaScript. They can easily
be overwritten or destroyed by other scripts. However in AngularJS, modules
reduces this problem, by keeping all functions local to the module.
Explain Directives in Angular?
Directives are a
core AngularJS feature and are attributes decorated on the HTML elements. All
directives start with the word “ng”(ng-model, ng-app, ng-repeat, ng-bind). As
the name says directive it directs Angular what to do.
The ng-app
directive defines an AngularJS application.
The ng-model
directive binds the value of HTML controls (input, select, textarea) to
application data. Provide type validation for application data (number, email,
required) and status for application data (invalid, dirty, touched, error). It
can also provide CSS classes for HTML elements.
The ng-bind
directive binds application data to the HTML view.
The ng-init
directive defines initial values for an AngularJS application. Normally we use
controller or module instead of ng-init.
How can you add a directive in a Module?
< body ng-app="myApp" >
< test-Directive
> < /test-Directive >
< script >
var app =
angular.module("myApp", []);
app.directive("testDirective",
function() {
return {
template : "I am a test
directive!"
};
});
< /script >
< /body >
You can invoke a directive by using:
·
Element name:
< test-Directive > < /test-Directive
>
·
Attribute : <
div test-Directive > < /div >
·
Class : <
div class="test-Directive" > < /div >
·
Comment : <
!-- directive: test-Directive -- >
You can restrict your directives to only be invoked by
some of the methods. Below directive can be invoked only by attributes:
var app =
angular.module("myApp", []);
app.directive("testDirective",
function() {
return {
restrict : "A",
template : "I am a test
directive!"
};
});
The legal restrict values are: E for Element name, A for
Attribute, C for Class, M for Comment. By default the value is EA, meaning that
both Element names and attribute names can invoke the directive.
What is the use of ngRepeat directive?
ngRepeat directive repeats a set of HTML, a given number
of times. The set of HTML will be repeated once per item in a collection.
Below are the properties of ngRepeat:-
$index : iterator offset of the repeated element
(0..length-1)
$first : true if the repeated element is first in
the iterator.
$middle : true
if the repeated element is between the first and last in the iterator.
$last : true if the repeated element is last in
the iterator.
$even : true if the iterator position $index is even
(otherwise false).
$odd : true if the iterator position $index is
odd (otherwise false).
e.g:
< body >
< h3 > AngularJS
Expressions example< /h3 >
< div
ng-app="" >
< p > Expression to
add two numbers: {{ 7 + 2 }}< /p >
< /div >
< h3 > AngularJS
Numbers example< /h3 >
< div
ng-app="" ng-init="quantity=10;cost=7" >
< p > Total Amount:
{{ quantity * cost }}< /p >
OR
< p > Total Amount
(using ng-bind): < span ng-bind="quantity * cost" > < /span
> < /p >
< /div >
< h3 > AngularJS
Strings example< /h3 >
< div
ng-app="" ng-init="firstName='Michael';lastName='Ghomes'"
>
< p > Name is {{
firstName + " " + lastName }}< /p >
< /div >
< h3 > AngularJS
Objects example< /h3 >
< div
ng-app="" ng-init="employee={empName:'Peter',empID:'10'}"
>
< p > Employee Name
is {{ employee.empName }}< /p >
< /div >
< h3 > AngularJS Arrays example< /h3 >
< div
ng-app="", ng-init="colorsPresent=['red', 'blue',
'voilet']" >
< p > Color at 2nd
position is {{ colorsPresent[1] }}< /p >
< /div >
< h3 > Iterating
using ng-repeat directive< /h3 >
< div
ng-app="", ng-init="employeeNamesPresent=['Micheal', 'Mark',
'John']" >
< h4 > showing the
names using ng-repeat< /h4 >
< ul >
< li ng-repeat="employeeNamePresent
in employeeNamesPresent" > {{ employeeNamePresent }} < /li >
< /ul >
< /div >
< h4 > showing the
names using ng-repeat: odd row has color '#f1f1f1' and even Row has a color
'#f1aaaa'< /h4 >
< div
ng-app="", ng-init="employeeNames=['Micheal', 'Mary', 'Nancy',
'John']" >
< table >
< tr
ng-repeat="employeeNamePresent in employeeNames" >
< td
ng-if="$odd" style="background-color:#f1f1f1" > Name :
{{ employeeNamePresent }}< /td >
< td
ng-if="$even" style="background-color:#f1aaaa" > Name :
{{ employeeNamePresent }}< /td >
< /tr >
< /table >
< table >
< h4 > ng-repeat
variable example:< /h4 >
< tr
ng-repeat="employeeNamePresent in employeeNames" >
< td
ng-if="$first" > First
'Name' in the array : {{ employeeNamePresent }}< /td >
< td
ng-if="$middle" > Middle
'Name' in the array : {{ employeeNamePresent }}< /td >
< td
ng-if="$last" > last 'Name'
in the array : {{ employeeNamePresent }}< /td >
< /tr >
< /table >
< /div >
< div
ng-app="" ng-init="customerNames=[{empName:'Mambo',empID:'10'},
{empName:'Marchel',empID:'11'}, {empName:'Eugen',empID:'11'}]" >
< h4 > ng-repeat:
with uppercase and lower case< /h4 >
< ul >
< li
ng-repeat="customerName in customerNames" > Customer Name in Upper
Case : {{ customerName.empName | uppercase }} < /li >
< /ul >
< ul >
< li
ng-repeat="customerName in customerNames" > Customer Name in Lower
Case : {{ customerName.empName | lowercase }} < /li >
< /ul >
< h4 > ng-repeat:
with filters and order by< /h4 >
Search Customer Name: < input
type="text" ng-model="custName"/ >
< ul >
< li
ng-repeat="customerName in customerNames | filter: custName |
orderBy:'empName'" > Customer Name : {{ customerName.empName }} < /li
>
< /ul >
< /div >
< /body >
What are controllers and need of ng-controller
and ng-model in Angular?
Controllers are simple javascript function which provides
data and logic to HTML UI. As the name says controller they control how data
flows from the server to HTML UI.
e.g: Employee controller which provides data via
'EmployeeName' and 'EmployeeCode' property and Add/ Update logic to save the
data to database.
function
Employee($scope)
{
$scope.EmployeeName =
"Martin";
$scope.EmployeeCode =
"108";
$scope.Add = function () {
}
$scope.Update = function () {
}
}
'ng-controller' is a directive and is used to attach
Controllers to the HTML UI. The properties of the controller are attached by
using 'ng-model' directive. For example below is a simple HTML UI which is
attached to the “Customer” controller via the “ng-controller” directive and the
properties are binded using “ng-model” directive.
Explain $scope in AngularJS?
Usually we do not put our logic in the 'view', as its not
maintainable. So we keep it in another javascript object 'Controllers'.
'$scope' is the glue (ViewModel) between view and
controller. '$scope' object instance gets created when 'ng-controller'
directive is encountered.
Here is the simple example, in which we are creating the
list of customers. $scope is dynamically injected in CustomerController(). This
function serves as the source of data for the view. As the Controllers is
unaware about view, so the $scope will act as a glue between view and controller.
The parser first finds “ng-controller” directive which is
pointing to CustomerController. He creates a new instance of “$scope” object
and connects to the 'custdiv' UI.
< script >
var app =
angular.module('myApp', []);
app.controller('CustomerController',
function($scope) {
$scope.customers=[
{name:'David',
city:'Kempten'},
{name:'Muller',
city:'Berlin'},
{name:'Simson',
city:'Munich'},
{name:'Richard',
city:'Ulm'}
];
});
< /script >
< div
ng-app="myApp" ng-controller="CustomerController" >
< ul >
< li
ng-repeat="custo in customers" > {{ custo.name}} - {{ custo.city}}
< /li >
< /ul >
< /div >
What is “$rootScope” and how is it related with
“$scope”?
“$rootScope” is a parent object of all “$scope” angular
objects created in a web page.
-K Himaanshu Shuklaa..
No comments:
Post a Comment