AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is a JavaScript framework.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.
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-model directive can also:

Provide type validation for application data (number, email, required).
Provide status for application data (invalid, dirty, touched, error).
Provide CSS classes for HTML elements.
Bind HTML elements to HTML forms.

The ng-bind directive binds application data to the HTML view.
The ng-init directive initialize AngularJS application variables.

<div ng-app="" ng-init="name='Dinesh'">

     <p>Input something in the input box:</p>
     <p>Name: <input type="text" ng-model="name"></p>
     <p ng-bind="name"></p>
</div>

AngularJS expressions are written inside double braces: {{ expression }}.

<div ng-app="">
<p>My first expression: {{ 10 * 5 }}</p>
</div>

AngularJS Applications

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.

<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}}

<br>

      Full Name: {{fullName()}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "Dinesh";
    $scope.lastName= "Deshmukh";

    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

The AngularJS application is defined by ng-app="myApp". The application runs inside the <div>.
The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
The myCtrl function is a JavaScript function. A controller can also have methods (variables as functions)
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).

AngularJS Objects

<p>The name is {{ person.lastName }}</p>
</div>

AngularJS Arrays

<p>The third result is {{ points[2] }}</p>
</div>

Repeating HTML Elements

The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

<ul>

</li>

</ul>

</div>

AngularJS is perfect for database CRUD (Create Read Update Delete) applications.

Controllers In External Files

create a new controller file:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
Save the file as namesController.js:

And then use the controller file in an application:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names">
              {{ x.name + ', ' + x.country }}
       </li>
    </ul>
</div>
<script src="namesController.js"></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 lower case.
orderBy	Orders an array by an expression.
uppercase	Format a string to upper case.

Filters can be added to expressions and directives using a pipe character.
<p>The name is {{ lastName | uppercase }}</p>
<p>Total = {{ (quantity * price) | currency }}</p>

Adding 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:

<div ng-app="" ng-controller="namesCtrl">
      <ul>
             <li ng-repeat="x in names | orderBy:'country'">
                     {{ x.name + ', ' + x.country }}
            </li>
      </ul>
<div>

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:

<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 names | filter:test | orderBy:'country'">
           {{ (x.name | uppercase) + ', ' + x.country }}
         </li>
    </ul>
</div>
<script src="namesController.js"></script>

First result orderBy:'country'

After Filter value insert result filter:test and then orderBy:'country'

AngularJS AJAX - $http

Save Below data in the customers.json file. OR you can fetch JSON data with any Web Server Link or Web Service Link

{
"records": [
{
    "Name" : "Alfreds Futterkiste",
    "City" : "Berlin",
    "Country" : "Germany"
},
{
    "Name" : "Berglunds snabbköp",
    "City" : "Luleå",
    "Country" : "Sweden"
},
{
    "Name" : "Centro comercial Moctezuma",
    "City" : "México D.F.",
    "Country" : "Mexico"
},
{
    "Name" : "Ernst Handel",
    "City" : "Graz",
    "Country" : "Austria"
},
{
    "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
    "City" : "Madrid",
    "Country" : "Spain"
},
{
    "Name" : "Galería del gastrónomo",
    "City" : "Barcelona",
    "Country" : "Spain"
},
{
    "Name" : "Island Trading",
    "City" : "Cowes",
    "Country" : "UK"
},
{
    "Name" : "Königlich Essen",
    "City" : "Brandenburg",
    "Country" : "Germany"
},
{
    "Name" : "Laughing Bacchus Wine Cellars",
    "City" : "Vancouver",
    "Country" : "Canada"
},
{
    "Name" : "Magazzini Alimentari Riuniti",
    "City" : "Bergamo",
    "Country" : "Italy"
},
{
    "Name" : "North/South",
    "City" : "London",
    "Country" : "UK"
},
{
    "Name" : "Paris spécialités",
    "City" : "Paris",
    "Country" : "France"
},
{
    "Name" : "Rattlesnake Canyon Grocery",
    "City" : "Albuquerque",
    "Country" : "USA"
},
{
    "Name" : "Simons bistro",
    "City" : "København",
    "Country" : "Denmark"
},
{
    "Name" : "The Big Cheese",
    "City" : "Portland",
    "Country" : "USA"
},
{
    "Name" : "Vaffeljernet",
    "City" : "Århus",
    "Country" : "Denmark"
},
{
    "Name" : "Wolski Zajazd",
    "City" : "Warszawa",
    "Country" : "Poland"
}
]
}

AngularJS $http is a core service for reading data from web servers.
$http.get(url) is the function to use for reading server data.

<div ng-app="myApp" ng-controller="customersCtrl">

    <ul>
        <li ng-repeat="x in names">
          {{ x.Name + ', ' + x.Country }}
        </li>
    </ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://localhost/customers.json")
    .success(function(response) {$scope.names = response.records;});
});
</script>

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://localhost/customers.json.
If success, the controller creates a property (names) in the scope, with JSON data from the server.

AngularJS Table

Displaying Data in a Table Index ($index) Using $even and $odd

AngularJS HTML DOM

AngularJS has directives for binding application data to the attributes of HTML DOM elements.

The ng-disabled Directive

The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

<div ng-app="">
     <p>
          <button ng-disabled="mySwitch">Click Me!</button>
     </p>
     <p>
          <input type="checkbox" ng-model="mySwitch">Button
     </p>
</div>

After CheckBox Click

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.

If the value of mySwitch evaluates to false, the button will not be disabled.

The ng-show Directive

The ng-show directive shows or hides an HTML element.

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

<div ng-app="" ng-init="hour=13">
   <p> Current Time: {{hour}} </p>
   <p> Current Time > 12: {{ hour > 12}} </p>
   <p ng-show="hour > 12">I am visible.</p>
</div>

The ng-hide Directive

The ng-hide directive hides or shows an HTML element.
<div ng-app="">
<p ng-hide="true">I am not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>

AngularJS Events

AngularJS has its own HTML events directives.

The ng-click Directive

The ng-click directive defines an AngularJS click event.

<div ng-app="myApp" ng-controller="myCtrl">
       <button ng-click="count = count + 1">Click Me!</button>
       <p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

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.

<div ng-app="myApp" ng-controller="personCtrl">
       <button ng-click="toggle()">Toggle</button>
       <p ng-hide="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>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $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"):

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

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:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

myApp.js

var app = angular.module("myApp", []);
The [] parameter in the module definition can be used to define dependent modules.

myCtrl.js

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});

Functions can Pollute the Global Namespace

Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.
AngularJS modules reduces this problem, by keeping all functions local to the module.

When to Load the Library?

In all our examples, the AngularJS library is loaded in the head of the HTML document.
A common advise for HTML applications, is to place scripts at the very bottom of the <body> element.
But, in many AngularJS examples, you will see the library in the head of the document.
This is because calls to angular.module can only be compiled after the library has been loaded.
Another solution is to load the AngularJS library in the <body> element, before your own AngularJS scripts:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

AngularJS

Sunday, 14 June 2015

AngularJS Fast and Easy