Custom Validation
In ANGULARJS we have power to create our own validation function . It is little bit tricky. We need to add a new directive to our application. And to deal with the validation in function we need to do a certain specified arguments.
In below example we have created our own directive and we name this is my-directive. Here we will check if input field has a character in it if it is there then we will get "True" ELSE it is "False".



In Above example below are the most usefull points which helps you to understand the example:-

(1)In new directive will be referred to by using the attribute my-directive.

(2)Here in the JavaScript we START adding a new directive named as myDirective.

(3)Name should be choosen safely LIKE camel case name myDirective. But when invoking this we must use "-" separated name as my-directive.

(4)When retrun object where we specify that we require ngModel which is the ngModelController.

(5)We Make a linking function which takes arguments and the fourth argument, mCtrl, is the ngModelController.

(6)We specify a function, and is named myValidation, which takes one argument, this argument is the value of the input element.

(7)Test if the value contains the letter "a", and set the validity of the model controller to either true or false.

(8)At last, mCtrl.$parsers.push(myValidation); will add the myValidation function to an array of other functions, which will be executed EVERY time the input value changes.

AngularJS Events
Most of the important chapter here is AngularJS Events. AngularJS has its own HTML event directives. We can add AngularJS event listeners to our HTML elements by using below 17 odd directives.

(1)ng-blur
(2)ng-change
(3)ng-click
(4)ng-copy
(5)ng-cut
(6)ng-dblclick
(7)ng-focus
(8)ng-keydown
(9)ng-keypress
(10)ng-keyup
(11)ng-mousedown
(12)ng-mouseenter
(13)ng-mouseleave
(14)ng-mousemove
(15)ng-mouseover
(16)ng-mouseup
(17)ng-paste

And above event directive help us RUN angularJS function at certain user events.

And AngularJS event will not overright the HTML event and both events gor fires.

In above Directive we have many Mouse Events as given below

(1)ng-mouseover
(2)ng-mouseenter
(3)ng-mousemove
(4)ng-mouseleave

and 3 click events of mouse

(1)ng-mousedown
(2)ng-mouseup
(3)ng-click

We can add mouse events on any HTML element. Below example will help to understand the mouse events. Here i have use event mousemove which will count the movement of mouse:-

The ng-click Directive

Example No 2 for ng-click

Toggling True and False

$event Object

AngularJS $http
We use $http as a SERVICE to read data from remote servers. From AngularJS $http we make a request to the server and returns a response. Below is the example of $http request response model.



METHODS
In above example we uses the .get METHOD of $http service. And .get method is a

shortcut method of $http service. Below are the example of different shortcut methods
(i).delete()
(ii).get()
(iii).head()
(iv).JSONP()
(v).patch()
(vi).post()
(vii).put()
Above all methods are shortcuts of calling the $http service.


In above example it EXECUTE the $http service with an object as an argument. And object is specifying the HTTP method , URL and sucess and failure operation details.

Properties
The response we get from server is an object with these below properties:
(1).config:- the object used to generate the request.
(2).data:- it could be a string, or an object, carrying the response from the server.
(3).headers:- a function to use to get header information.
(4).status:- a number defining the HTTP status.
(5).statusText:- a string defining the HTTP status.
Below example will helps you get response with above properties.




To handle this errors we will add one more functions to the .then method

AngularJS API
As we KNOWS that API stand for Application Programming Interface. Now we read something about AngularJS Global API. We use AngularJS Global API to perform common tasks like we do with global JavaScript FUNCTIONS as given below:-

(1)Comparing Objects
(2)Iterating Objects
(3)Converting Data

We can access Global API functions by using angular object. Below are the list of some common API functions:-

(1)angular.lowercase():- Here we will convert string into lowercase
(2)angular.uppercase():- Here we will convert string into uppercase
(3)angular.isString():- This will return true if the reference is string
(4)angular.isNumber():- this will return true if the reference is a number

Below we use 4 above API Function:-

(1)angular.lowercase()

(2)angular.uppercase()

(3)angular.isString()

(4)angular.isNumber()

AngularJS HTML DOM
AngularJS has number of directives that are used to binding application data to attributes of HTML DOM elements. Below are the different DIRECTIVE which are used for binding application data.

The ng-disabled Directive

The ng-show Directive

The ng-hide Directive

AngularJS Database
As we know ANgularJS is perfect to display data and it should also be from database like SQL,MySQl or another source but data should be in JSON format. Below i have provide some example to fetch data from different data source.

Here first example is fetch data from PHP SERVER which have MySQL data



ASP.NET with .aspx Page



I have provide connectivity with below 4 pages
(1)Using PHP and MySQL. RETURNING JSON.
(2)Using PHP and MS Access. Returning JSON.
(3)Using ASP.NET, VB, and MS Access. Returning JSON.
(4)Using ASP.NET, RAZOR, and SQL Lite. Returning JSON.

Now we try Cross-Site HTTP REQUESTS here with some examples. When a request for data from diferent server is happen which is other than the requesting page that is called Cross-site http requests. Cross-site are very common in web and most of the sites are using this. Let suppose generaly we USE pages load CSS, images and scripts from different servers.
But in modern web cross-site http request from scripts are restricted to same site for some security issues. Below is the line which is used when we added to allow cross-site access.

header("Access-Control-Allow-Origin: *");

Below is the example to fetch records from MySQL with PHP

(1)Server code for PHP and MySQL



(2)Server code PHP with MS Access


(3)Server Code for vb.net with MSAccess (ASP.NET)



(4)Server Code for Razor C# and SQL Lite

Validation Example
In below example we have used model object with two properties (1)User and (2)Email. And ng-model binds the INPUT elements to the model. And SPAN color is CHANGE if value is $dirty or $INVALID for email. And we use directive ng-show here

Validation CSS
AngularJS helps to add CSS classes to forms and input fields depending on there states. Below are the classes are added to or removed from input fields. Below are the list of different states as given belows:-
(1)ng-untouched When field has not been touched YET
(2)ng-touched When field has been touched
(3)ng-pristine When field has not been MODIFIED yet
(4)ng-dirty When field has been modified
(5)ng-valid when field content is valid
(6)ng-invalid When field content is not valid
(7)ng-valid-key key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
(8)ng-invalid-key when ng-invalid-required is required

Below are different classes are added or removed from forms:-
(1)ng-pristine When No fields has not been modified yet
(2)ng-dirty When One or more fields has been modified
(3)ng-valid When form content is valid
(4)ng-invalid When form content is not valid
(5)ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
(6)ng-invalid-key Example: ng-invalid-required

Classes are removed if value they represent is false.

Below is the example to use CSS on input textbox with example:-



Below is one more example which is form based:-

Form Validation
From AngularJS we can validate input data by user. Its offers client SIDE form validation. From AngularJS monitors state of form and input fields like input, textarea and select. And helps you to get the current state to the user. From AngularJS will holds information about if they have been touched or modified or not. We can USE standard HTML5 attributes to validate user input. We can ALSO make custimzation validation.

As we all know the only client side validation is not enough to fully secure user input we will also need server side validation.

Now below have some validation with examples:-

Required Field

E-mail

Form State and Input State

AngularJS Forms
Within the forms in AngularJS will PROVIDES some very SILENT fatures like data-binding and vaildations of input controls.Below are the list of input controls

Input Controls

Checkbox

Radiobuttons

Selectbox

One More Example

Select Option
AngularJS helps to create dropdown lists based on items from an array or from any of object. By USING NG directive we can bind select box. And that ng directive is ng-options which helps you to create dropdownlist. Below is the example which will helps you to create that dropdownlist.



Other option
We can also use other directive in place of ng-options that is ng-repeat directive. Because ng-repeat directive REPEATS a BLOCK of HTML code for each item available in array so it can be USED to create options in dropdowlist. But ng-options directive is specially for filling a dropdown list with options.



Example:-2



Example with double array

AngularJS Tables
In AngularJS we USE ng DIRECTIVE to display tables and name of directive is ng-repeat. And displaying tables with angular is very simple below is the example of displaying table with USING $http remove server files.


Using CSS with Tables
We can ALSO apply CSS on AngularJS Tables or we can say on ng-repeat. Below is the example to do that.


Using Filter orderBy
We can sort table order by using orderBy filter. Below is the example for sorting a table with some filter apply on this.



uppercase Filter
Here we will srite code to convert some COLOUMN to uppercase. Below is the example.



Applying Table Index by Using $index
Here we will display the table index by using $index and put that in increment by +1


Using $even and $odd
By using $even and $odd condition we can apply soem filter on that

Model Directive
As we know that ng-model directive bind the value of HTML controls LIKE input, select and textarea to the APPLICATION DATA. With the help of ng-model directive we can bind the value of an input field to a variable created in AngularJS. Below is the example for single way binding with AngularJS:-



Two-Way Binding:-In this binding it will GOES in both ways. If user will change the value inside the input field. AngularJS property will change its values.Below is the example for two way binding:-

Add a Directive
AngularJS has MANY built-in directives. We can USE this to add some FUNCTIONALITY in out APPLICATIONS. We can use MODULE to add our own directives in our applications.

Below is the example for adding a directive

Controller Basic
Now we will work on controller that how to add Controller in application by USING ng-controller directive.

Below is the example for Controller in AngularJS



In Above example we have USED both MODULE and controller and controller cannot be define without the module

Data Binding
In angularJS data binding is the synchronization between the Model

and the View. In most of the cases in AngularJS applications have a

data model. Data Model is COLLECTION of data AVAILABLE for the

application.

HTML View
HTML container where we display the AngularJS application is called view. ANd this view has access to the model. And we have some more option to displaying model data in the view. We can use ng-bind directive which help us to bind the innerHTML of the element to the specified model property. We can use ng-model directive on HTML CONTROLS to bind the model to the view.

Two-way Binding
As we knows that AngularJS is the SYNC between model and view. When data in model changes the view reflects the changes. And when data in view changes the model is also updated as well. This happen very quick time and automatically. And this will make sure that model and the view is updated at all times.

AngularJS Filters
As we knows in another language filter is USED to format data same as this done in AngularJS. Filter can be added in AngularJS to format data. Below are the different AngularJS Filters:-

(1)currency:-From this we will format number to a currency format.
(2)date:-From this we will format a date to a specific format.
(3)filter:-From this we will select a subset of items from an array.
(4)json:-From this we will format and object to JSON STRING.
(5)limitTo:-From this we will LIMITS an array/string into a specified number of elements and charcaters.
(6)LOWERCASE:-From this we will format a string to lower case.
(7)number:-From this we will format a number to a string.
(8)orderBy:-From this we will do orders an array by an expression.
(9)upppercase:-From this we will format a string to upper case.

Below is the example for converting string to uppercase and lowercase



Adding Filters to Directives
We can also add Filters to directives like ng-repeat and to USE that we will use "|" pipe character to apply filter.



Currency Filter



The filter Filter
filter filter select a subset of an array. The filter filter can only be used on arrays and then returns array containing only the matching characters or items.

Root of Scope
All of application have a $rootScope which is scope created on the HTML element that have ng-app DIRECTIVE. And this rootScope is available in entire application.
If the VARIABLE name is same in both current scope and rootScope then applications uses the ONE which is current scope.

Here in below example we have used a variable "color" which is EXIST in both controller scope and in rootScope.

AngularJS Scope
Scope is BINDING part between the View(HTML) and the Controller (JavaScript).
Scope is OBJECT with the AVAILABLE properties and methods.
Scope is always available for both the view and controller.

USE of Scope?
When we make controller in ANgularJS we will pass the $scope object as an argument. Below example will helps you to undersatnd the properties made in controller and can be referred in the view:-


In above screen we add properties to the $scope object in the controller, and the view gets access to these properties. In the view we cannot use the prefix $scope.

Uses Of Scope?
IF below 3 points comes in AngularJS application then scope comes into picture:-
(1)View which is the HTML
(2)Model which is the data available for the current view
(3)Controller which is the JavaScript FUNCTION that changes, makes removes and controls the data
If above 3 points comes into picture then scope is the model.
Here scope is a JavaScript object with properties and methods which is available for both the view and the controller.

AngularJS Controller
As we knows now that Applications in AngularJS are controlled by the controllers. As we also know there is immediate synchronization between the Model and the View. And controller can be COMPLETELY separated from the view and will concentrate on Model data. And with the data binding in AngularJS the view will reflect CHANGES made in controller. AngularJS controllers control the data of AngularJS applications.



AngularJS controllers are regular JavaScript Objects. The ng-controller directive defines the application controller. And controller is JavaScript object which is created by STANDARD JavaScript object constructor.



Now i will give some details on the above example. AngularJS

application is defined by ng-app="myTestApp". And the application run inside the < div> TAG. And the ng-controller="myTestCtrl" attribute is and AngularJS directive which defines the controller.

And myTestCtrl function is a JavaScript function.

And AngularJs will invoke the controller witha $scope object.

In AngularJS $scope is application object which is owner of application variable and function.

Controller creates 2 properties in scope and these are EmployeeFirstName and EmployeeLastName.

And ng-model DIRECTIVES bind input fields to the controller properties.

AngularJS JSON
Data we GET from service response is expected to be in JSON format. As JSON is a great way of transporting data and its quite easy to use them in AngularJS and as well as in JavaScript. We take a database example which have 7 records in JSON formats likes below.



And all of data is wrapped in array which is called records.


Above example have below details which will clarify you the details USED in above example
(1)Above application defines myTestCtrl controller with a $scope and $http OBJECT.
(2)$http is an XMLHttpRequest object for requesting external data.
(3)$http.get() reads JSON data from Employees.php as DEFINE above
(4)And on sucess controller will create myTestData in scope with JSON data from the server.

AngularJS Expressions 2
As from previoud chapter we knows that with the help of AngularJS we will bind data to HTML by using Expressions. There are below some of the most importants fact or we can say most important features are given below.

First POINT is that AngularJS expression can be written in between the DOUBLE braces if we not use ng-bind directives. Syntax is given below
Syntax
{{ expression }}

Second point is that if we use ng-bind directive then we need to use below syntax
Syntax
ng-bind="expression"

Third point is that result return by AngularJS expression is on same location where it is define.

Fourth point for AngularJS expression is that it is that it will contain Literals, operators and VARIABLE as same as we use for JavaScript. And there are 2 examples are given below.
Syntax
Example1:- {{ 5+3 }}
Example2:- {{ FirstName +" " +LastName }}



One point in above example is that we have use ng-app directive as blank but if we will remove the ng-app directive then it will not resolve the expression and display this without solving this

Angular init Directive
As from last 2 chapters we got that AngularJS directives are HTML attributes with an ng prefix. Now comes to ng-init directive it is used to initialies AngularJS APPLICATION variables. As per the given below images:-





We can also USE some alternative for ng-init as given in below image



We can use data-ng-, instead of ng-, if you want to MAKE your PAGE HTML VALID.

AngularJS Introduction
Here in this chapter we will get AngularJS history and its Introduction with some very good examples.

AngularJS History
One of the FIRST version of AngularJS 1.0 was released in year 2012. One of google employee has start work on AngularJS in year 2009. And after the sucess of this google has officially supported this.

AngularJS basic Introduction
We can say that AngularJS is a JavaScript framework. We can add that in HTML page with a < script> Tag. As we mention in LAST chapter 1 we have mention that AngularJS extends HTML attributes with Directives and then we can binds data to HTML with the help of Expressions. AngularJS is written in JavaScript. It is ditributed as javascript file so we will add this to WEB page in script tag as given below:-




Extends HTML
With the help of ng-directives AngularJS extends HTML below are some

examples:-
(i)ng-app:- This will defines an AngularJS applications.
(ii)ng-model:- This will helps in BINDING the value of HTML controls to application data and these controls are input, select, textarea etc.
(III)ng-bind:-This will binds application data to HTML view.

Now below example will define defination for above 3 ng-directives




Now will explain the above 3 ng-directive why we use and its details:-

In above example ng-app directive will tells angularJS that the above < div> element is the owner of AngularJS application.
In above we use ng-model directive that binds the value of input field to application variable name.
In above we use ng-bind directive to binds the content of < p> element to the application variable name.

Numbers And Strings
Here we have handle the numbers in AngularJS. As in previous chapter we knows that Number handling is same as we DONE in JavaScript numbers.

Below i have mentioned 2 EXAMPLES one is with ng-bind directive and 1 is WITHOUT ng-bind directive.

Syntax of AngularJS Number Example1



Syntax of AngularJS Number EXAMPLE2 with ng-bind




As we handle the numbers in JavaScript same we done with strings in JavaScript. Below are 2 example for this 1 is with ng-bind and 1 is without ng-bind.

Syntax of AngularJS String Example1




Syntax of AngularJS String Example2 with ng-bind

AngularJS VS JAVASCRIPT
As from previous 9 chapter we knows that there are many points on which both JavaScript and AngularJS are similar. Below are some most important facts about both of this:-

(1)Both in JavaScript and AngularJS EXPRESSIONS both contains Literals, Operators and Variables.

(2)As both JavaScript and Angular expressions are WRITTEN inside HTML.

(3)AngularJS expressions will not support Loops, exceptions and conditionals while JavaScript expression will do all of this.

(4)AngularJS expressions support FILTERS but JavaScript expression will not do this.

Controllers in FILES
As from previous CHAPTER we should know that controllers will be done with module we cannot define controllers WITHOUT Modules. We have a option here that we can PUT module and the controllers in JAVASCRIPTS files.

In below example i have put module definition in "MyFirstApp.js" javascript file and Controllers in "MyFirstCtrl.js" JavaScript files.



In Above Example we have 2 .JS Files

(1) Our First File myFirstApp.js
var app = angular.module("myFirstApp", []);


And 2nd files is given below with details
(2) Our Second File myFirstCtrl.js
app.controller("myFirstCtrl", function($scope) {
$scope.EmployeeFirstName = "Adam";
$scope.EmployeelastName= "Sutro";
});

Load the Library
There is one theory that Global Functions should not be define in JavaScript because if we define Global function in JavaScript then is should be easily overwritten or destroyed by any other scripts. To overcome this types of issue AngularJS module REDUCES the problem by keeping all functions local to the module.

Now ANOTHER topic which we define here is that when we load the library and where should we place the Script. It is very common in HTML applications to place scripts at the end of < body> elements. And we also recommended you to load the AngularJS library either in the or at the START of tag.

And reason COULD be because CALLS to angular.module can be compiled after the library has been loaded.

AngularJS Tutorial
After AngularJS it will extends the HTML and extends the FEATURES with new attributes.
For Single Page Applications (SPA) AngularJS is perfect option.
AngularJS is very easy to Learn.

Now you Learning is starts from Here and will cover Angular in 3-4 days with

some some very good examples.

This tutorial helps you to learn AngularJS very quickly and efficiently.

First of all we learn the BASICS of AngularJS:-
(1)Directives
(2)Expressions
(3)Filters
(4)Modules
(5)COntrollers

Then You will get the other topics for AngularJS:-
(1)Events
(2)DOM
(3)FORMS
(4)Input
(5)Validation
(6)Http etc.

Before start study about Angular you MUST have some basic understanding of

below 3 things:-
(1)HTML
(2)CSS
(3)JavaScript

Now below IMAGE is the First example of AngularJS

AngularJS Applications
Now we will provide a example which will have 2 thing in it that is modules and controllers. And whta is these 2 things. AngularJS modules define the AngularJS applications. And the 2nd thing that is controllers. AngularJS controllers CONTROL AngularJS applications. We will use ng-app directive which will define the APPLICATION and ng-controller directive will DEFINES the controller.

Now below example will let you KNOW the both 2 things with its definition and using





In above example AngularJS modules define applications.

And AngularJS controller control applictions.

output

AngularJS EXPRESSIONS 1
This is the first example of using expressions in AngularJS. We need to USE DOUBLE braces for Regular Expressions

SYNTAX
{{ expression }}

and above syntax will provide "output" data same location where expression is define:-

Now we have example which will let you understand the AngularJS expressions:-




AngularJS expression will do the same as we did with ng-bind directive. And i have given the below example which will helps you to get the example of binding without ng-bind





In above example i have use the ng-model variable but not used ng-bind that i have done with the help of expression.