Angular js

AngularJS
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your application's
components clearly and succinctly. Angular's data binding and dependency injection
eliminate much of the code you would otherwise have to write. And it all happens within the
browser, making it an ideal partner with any server technology.
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script
tag:
AngularJS is a JavaScript framework for organizing HTML code in a more structural. This
client-side technology provides easy and light code in order to make developing and even
designing as a simple task.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></scrip
t>
AngularJS Extends:
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
The ng-bind directive binds application data to the HTML view.
Sample Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="">
<p>Name:
<asp:TextBox ID="txtname" runat="server" ng-model="name">
</asp:TextBox>
</p>
<p ng-bind="name"></p>
</div>
</form>
</body>
</html>
AngularJS starts automatically when the web page has loaded.
The ng-init directive initialize AngularJS application variables.
ng-init Example:

<div ng-app="" ng-init="firstName='Prasad'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
AngularJS Expressions:
1) AngularJS expressions are written inside double braces: {{ expression }}.
2) AngularJS expressions binds data to HTML the same way as the ng-bind directive.
3) AngularJS will "output" data exactly where the expression is written.
Example:
<!DOCTYPE html>
<title></title>
<script
</head>
<body>
<div>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</div>
</form>
</body>
</html>
AngularJS Numbers: AngularJS numbers are like JavaScript numbers:
<!DOCTYPE html>
<title></title>
<script
</head>
<body>
<div ng-app="" ng-init="quantity=1;price=5">
Quantity:
<asp:TextBox ID="txtquality" runat="server" type="number" ng-
model="quantity"></asp:TextBox>
Costs:
<asp:TextBox ID="txtprice" runat="server" type="number" ng-
model="price"></asp:TextBox>
Total in dollar: {{ quantity * price }}
</div>
</form>

</body>
</html>
AngularJS Strings: AngularJS strings are like JavaScript strings:
Example:
<!DOCTYPE html>
<title></title>
<script
</head>
<body>
<div ng-app="" ng-init="firstName='Prasad';lastName='D'">
<p>The name is {{ firstName + " " + lastName }}</p>
OR
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
</form>
</body>
</html>
AngularJS Objects: AngularJS objects are like JavaScript objects:
Example:
<!DOCTYPE html>
<title></title>
<script
</head>
<body>
<form id="form1”>
<div ng-app="" ng-init="person={firstName:'Prasad',lastName:'D'}">
<p>The name is {{ person.lastName }}</p>
</div>
</form>
</body>
</html>
AngularJS Arrays: AngularJS arrays are like JavaScript arrays:
Var obj=[2,4,6];
Example:
<!DOCTYPE html>
<html">
<title></title>

{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="y in names">{{ y.name + ', ' + y.country }}
</li>
</ul>
</div>
</form>
</body>
</html>
AngularJS Controllers:
A controller is a JavaScript Object, created by a standard JavaScript object
constructor. AngularJS applications are controlled by controllers. The ng-
controller directive defines the application controller.
Example:
<!DOCTYPE html>
<html">
<head>
<title></title>
<script
</head>
<body>
<form id="form1">
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <asp:TextBox ID="txtfname" runat="server"
ng-model="firstName"></asp:TextBox><br>
Last Name: <asp:TextBox ID="txtlname" runat="server"
ng-model="lastName"></asp:TextBox><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Prasad";
$scope.lastName = "D";
});
</script>
</form>
</body>
</html>
Controller Methods: A controller can also have methods (variables as functions):
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
AngularJS Filters: AngularJS filters can be used to transform data:
Filter Description
Currency Format a number to a currency format
Filter Select a subset of items from an array.
Lowercase Format a string to lowercase.
Uppercase Format a string to uppercase.
orderBy Order an array by an expression.
Adding Filters to Expressions
A filter can be added to an expression with a pipe character (|) and a filter.
The uppercase filter format strings to upper case:
The lowercase filter format strings to lower case:
Example: uppercase-lowercase.html
The currency Filter :
The currency filter formats a number as currency:
Example : currency-filter.html
Filters to Directives
A filter can be added to a directive with a pipe character (|) and a filter.
The orderBy filter orders an array by an expression:
Example : filter-directives.html
Filtering Input : An input filter can be added to a directive with a pipe character (|) and
filter followed by a colon and a model name.
The filter filter selects a subset of an array:
Example: filter-input.html
AngularJS AJAX - $http :
AngularJS $http is a core service for reading data from web servers.
$http.get(url) is the function to use for reading server data.
Example : angularjs-http-get.html

The AngularJS application is defined by ng-app. The application runs inside a <div>.
The ng-controller directive names the controller object.
The customersCtrl function is a standard JavaScript object constructor.
AngularJS will invoke customersCtrl with a $scope and $http object.
$scope is the application object (the owner of application variables and functions).
$http is an XMLHttpRequest object for requesting external data.
$http.get() reads JSON data from http://www.w3schools.com/angular/customers.php.
If success, the controller creates a property (names) in the scope, with JSON data from
the server.
Displaying Data in a Table :
We can display data in table format using ng-repeat directive. It is perfect for displaying
tables.
Example: angularjs-tables.html
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
Displaying with CSS Style
To make it nice, add some CSS to the page:
Example : angularjs-tables.html
Display with orderBy Filter
To sort the table, add an orderBy filter:
Example :
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
</tr>
</table>
Display with uppercase Filter :
To display uppercase, add an uppercase filter:
Example:
<table>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
Table Index ($index): To display the table index, add a <td> with $index:
Example:

<table>
<td>{{ $index + 1 }}</td>
</tr>
</table>
AngularJS Example Application with SqlServer
AngularJS HTML DOM : The ng-disabled directive binds AngularJS application data to the
disabled attribute of HTML elements.
Example : angularjs-disabled.html
<div ng-app="">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p><p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
</div>
The ng-disabled directive binds the application data mySwitch to the HTML
button's disabled attribute.
The ng-model directive binds the value of the HTML checkbox element to the value
of mySwitch.
If the value of mySwitch evaluates to true, the button will be disabled:
The ng-show Directive
The ng-show directive shows or hides an HTML element.
Example: angularjs-ng-show.html
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
The ng-show directive shows (or hides) an HTML element based on the value of ng-show.
You can use any expression that evaluates to true or false:
AngularJS Events :
The ng-click Directive :
The ng-click directive defines an AngularJS click event.
Example : angularjs-ng-click.html
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>
</div>
Hiding HTML Elements :
The ng-hide directive can be used to set the visibility of a part of an application.
The value ng-hide="true" makes an HTML element invisible.
The value ng-hide="false" makes the element visible.
Example : angularjs-ng-hide.html
The first part of the personController is the same as in the chapter about controllers.
The application has a default property (a variable): $scope.myVar = false;
The ng-hide directive sets the visibility, of a <p> element with two input fields,
according to the value (true or false) of myVar.
The function toggle() toggles myVar between true and false.
The value ng-hide="true" makes the element invisible.
Showing HTML Elements :
The ng-show directive can also be used to set the visibility of a part of an application.
The value ng-show="false" makes an HTML element invisible.
The value ng-show="true" makes the element visible.
Here is the same example as above, using ng-show instead of ng-hide:
Example: angularjs-ng-show.html
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "Harish",
$scope.lastName = "G"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
AngularJS Modules :
An AngularJS module defines an application.
A module is a container for the different parts of an application.
All application controllers should belong to a module.

A Module With One Controller
This application ("myApp"), has one controller ("myCtrl"):
Example: modules examples
Modules and Controllers in Files :
It is common in AngularJS applications to put the module and the controllers in JavaScript
files. In this example, "myApp.js" contains an application module definition, while
"myCtrl.js" contains the controller:
Forms in AngularJS :
An AngularJS form is a collection of input controls.
HTML Controls
HTML input elements are called HTML controls:
 input elements
 select elements
 button elements
 textarea elements
Example : angularjs-forms.html
The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the user object in the model.
The formCtrl function sets initial values to the master object, and defines
the reset() method.
The reset() method sets the user object equal to the master object.
The ng-click directive invokes the reset() method, only if the button is clicked.
AngularJS Input Validation : AngularJS forms and controls can provide validation
services, and notify users of invalid input.
Example: angularjs-validations.html
AngularJS API : API stands for Application Programming Interface.
AngularJS Global API :
The AngularJS Global API is a set of global JavaScript functions for performing common
tasks like:
 Comparing objects
 Iterating objects
 Converting data
The Global API functions are accessed using the angular object.
API Description
Angular.lowecase() Converts a string to lowercase.

Angular.uppercase() Converts a string to uppercase.
Angular.isString() Returns true if the reference is a string.
Angular.isNumber() Returns true if the reference is a number.
Service and factory, custom directory, templates
Custome Directives : 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 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.
Example : angularjs-custom-directives.html
Services & Factory :
Factory : A factory is a simple function which allows you to add some logic before creating
object. It returns the created object.
Syntax: app.factory(‘servicename’,function(){return serviceObj;})
Example :
module.factory('userService', function(){
var fac = {};
fac.users = ['John', 'James', 'Jake'];
return fac;
});
Services : A service is a construction function which creates the object using new keyword.
You can add properties and functions to a service object by using this keyword.
Example : services-example.html
AngularJS Templates: In Angular, templates are the views with the HTML enriched by
Angular elements like directive and attributes. Templates are used to display the
information from the model and controller that a user sees in his browser.
There are 2 types of templates :
1) Static Templates : A static template is defined by using script tag. It must has an id attribute
with a unique value and a type attribute with value text/ng-template. Also, a static template
must be inside the scope of the ng-app directive otherwise it will be ignored by Angular.
Example : static-templates.html

2) Dynamic Templates : A dynamic template is an html page which is compiled and rendered by
Angular on demand.
Example : dynamic-templates.html
$watch()
The $scope.watch() function creates a watch of some variable. When you register a
watch you pass two functions as parameters to the $watch() function:
 A value function
 A listener function
$scope.$watch(function() {},
function() {}
);
The first function is the value function and the second function is the listener function.
The value function should return the value which is being watched. AngularJS can then check
the value returned against the value the watch function returned the last time. That way
AngularJS can determine if the value has changed. Here is an example:
$scope.$watch(function(scope) { return scope.data.myVar },
function() {}
);
http://www.dotnet-tricks.com/Tutorial/angularjs/V2YS090914-Understanding-
AngularJS-Factory,-Service-and-Provider.html

What is AngularJS?
Ans: AngularJS is a javascript framework used for creating single web page
applications. It simplifies binding javascript objects with HTML ui elements. It allows
you to use html as your template language and enables you to extend HTML’s syntax to
express your application’s components clearly.
What are key the features of Angularjs?
Ans: Model, View, Controller, Directives, Filters, Scope, Services, Data Binding.
What is a directive in AngularJS and what are different types of directives?
Ans: Directives are attributes decorated on the HTML elements. All directives start with
the word “ng”. As the name says directive it directs angular what to do.
During compilation process when special HTML constructs are encountered a function is
triggered, this function is referred as directive. It is executed when the compiler
encounters it in the DOM.
1) Element Directive
2) Attribute Directive
3) CSS class Directive
4) Comment Directive
What are the advantages of angularjs?
Ans:
1) AngularJS supports MVC pattern.
2) Using angularjs can do 2 ways binding.
3) It has pre-defined form validations.
4) It supports client-server communications.
5) It supports animations.
What is “$rootScope” and how is it related with “$scope”?
Ans: “$rootScope” is a parent object of all “$scope” angular objects created in a
webpage.
How is the data binding in angularjs?
Ans: its two way binding. So whenever you make changes in one entity the other entity
also gets updated.

Angular js

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Angular js (20)

Recently uploaded (20)

Angular js