Saturday, 1 February 2014

AngularJS: How to create simple form using AngularJS.

Simple form using AngularJS


Form is a collection of controls for the purpose of grouping related controls together.

Form and controls provide validation services, so that the user can be notified of invalid input. This provides a better user experience, because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.

The key directive in understanding two-way data-binding is ngModel. The ngModel directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.

index.html

<!doctype html>
<html ng-app>
   <head>
         <script src="http://code.angularjs.org/1.0.4angular.min.js"></script>
         <script src="script.js"></script>
  </head>
  
<body>

  <form novalidate class="simple-form">

   Name:<input type="text" ng-model="user.name" /><br />

   E-Mail: <input type="email" ng-model="user.email" /><br />

   Gender <input type="radio" ng-model="user.gender" value="male" / >Male

   <input type="radion" ng-model="user.gender" value="female" />Female<br />

   <button ng-click="reset()">Reset</button>

   <button ng-click="update(user)">Save</button>

</form>

<pre>form = {{user | json}}</pre>

<pre>master = {{master | json}}</pre>

</div>

</body>

</html>

script.js

function controller($scope) {

$scope.master = {}'

$scope.update = function(user) {

$scope.master = angular.copy(user);

};

$scope.reset = function() {

$scope.user = angular.copy($scope.master);

};

$scope.reset();

}

AngularJS: Difference Between Angular Expressions and JS Expressions

Angular Expressions vs JS Expressions


It might be tempting to think of Angular view expressions as Javascript expressions, but that is not entirely correct, since angular does not use a Javascript eval() to evaluate expressions. You can think of Angular expressions as Javascript expressions with following diffences:

1.Attirbute Evaluation: 
                              
                             Evaluation of all properties are against the scope, doing the evaluation, unlike in Javascript where the expressions are evaluate against the global window.

2.Forgiving

             Expression evaluation is forgiving to undefined and null, unlike in Javascript, where such evaluations generate NullPointerExceptions.


3.No Control Flow Statements

             You can pass result of expression evaluations through filter chains. For example to convert date object into a local specific human-readable format.

If, on the other hand, you do want to run arbitrary Javascript code, you should make it a controller method and call the method. If you want to eval() an angular expression from JavaScript, use the $eval() method.

index.html

<!doctype html>
 <html ng-app>
     <head>
         <script src="http://code.angularjs.org/1.0.4angular.min.js"></script> 
     </head>
     <body>
               1+2={{1+2}}

     </body>       
 </html>

Result:

1+2 = 3

You can try evaluating different expressions here:

index.html

<!doctype html>
<html ng-app>
     <head>
           <script src="http://code.angularjs.org/1.0.4angular.min.js"></script>
           <script src="script.js"></script>
     </head>
     <body>
           <div ng-controller="expcnt" class="expressions">

            Expression:

            <input type="text" ng-model="expr" size="80" />

             <button ng-click="addExp(expr)">Evaluate</button>

              <ul>

                   <li ng-repeat="expr in exprs">

                     [<a href="" ng-click="removeExp($index)">X</a>]

                     <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
                    </li>

                 </ul>

               </div>

           </body>

        </html>


script.js

function expcnt($scope) {

var exprs = $scope.exprs = [];

$scope.expr = '3*10 | currency';

$scope.addExp = function(expr) {

exprs.push(expr);

};

$scope.removeExp  = function(index) {

 exprs.splice(index,1);

};

}

Saturday, 4 January 2014

Angularjs Tutorials - Filter AngularJS

                                                     How use fileters in angularjs

Filters perform data transformation. Typically they are used in conjunction with the locale to format the data in  locale specific output.

index.html

<!doctype html>

<html ng-app>

        <head>

                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

        </head>

        <body>

                <div ng-init= "list = ['iPhone ', 'HTC','Samaung','Nokia']">
               
                 Number formatting : {{1234567890 | number}} <br>

                Array filtering <input ng-model="predicate">

                {{ list | filter:predicate | json}}

                </div>
        </body>
</html>
  


refer : jsfiddle work place


Wednesday, 27 November 2013

AngularJS : How to connect AngularJS with MySQL database

                                             How to connect angularjs with MySql database

Now, we are discusses about connect angularjs with backend. It is one of the way to connect database. AngularJS is one of the powerful web application framework. The angularjs is reducing the backend overload.

Understanding the angularjs concept  refer previous tutorials. Easy to understanding server loading data examples:

1.Without AngularJS Web application performance :


First diagram, without using angularjs concept  building web applications diagram. This diagram explains, server workload high and  performance low and response time is very high.


2. With AngularJS web application performance:


Second diagram, building web applications with angularjs - server work load very low and performance very high and response time is very quick processes.

The angularjs is get all data from database and its make JSON(Java Script Object Notation) format.

The connecting angularjs with mysql database.

 First method call to controller site.



sample code :



$scope.addBook = function()
{
http({

method : 'POST',
url: 'index.php?urls',
data: {book_name : $scope.bookName, book_price : $scope.bookPrice},
headers : {'Content-type' : 'application/json'}
}).success(function(data, status, headers, config){

if(data.success)
{
$scope.books.push(data);
 }

}).error(function(data, status, headers, config){

//set error message.

});

}


addBook() is one of the method in view site. The addBook() method call to controller site.

ex:

<button ng-click = "addBook()" >Add book </button>

book_name, book_price  -> books table column names.

$scope.bookName , $scope.bookPrice -> html textbox ngmodel name.

ex:

<input type="text" ng-model="bookName">

<input type="text" ng-model="bookPrice">


Touch with me! Gain more!

Monday, 11 November 2013

AngularJS - ngAnimate in Filter Array Items 3D Rotate

                           
 AngularJS - ngAnimate in Filter Array items



In this tutorials, we are discuss about ngAnimate in filter array items. The ngAnimate with the some of the directives,

Directive name Animation type
ngRepeate enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIfenter and leave
ngShow show
ngHide hide

Filter array items in 3D rotate using ngAnimate.



index.html

<!DOCTYPE html>
<html ng-app>

<head>

<link rel="stylesheet" href="style.css">

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>

</head>

<body ng-init="products=['iPhone', 'Samsung', 'HTC', 'Nokia' , 'Sony', 
 
'iPhone 5c' 'Apple', 'iPad', 'Lava', 'Surface']; ">

<div class="well">

<form class="form-search">

<input type="text" ng-model="search" placeholder="Filter items..">

<ul>

<li ng-animate=" 'animate' " ng-repeat="product in products |  filter : search">

<a href="#">{{product}}</a>

</li>

</ul>

</form> 

</div> 

</body> 

</html>


Stylesheet file. Support all borwsers.



style.css


.animate-enter,  .animate-leave {

-webkit-transition : 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;

-moz-transition : 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;

-ms-transition : 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750 ) all;

-o-transition : 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;

transition : 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;

position : relative;

display : block;

}


.animate-leave.animate-leave-active,

.animate-enter {

-webkit-transform : rotateX(90deg)  rotateZ(90deg);

-moz-transform : rotateX(90deg)  rotateZ(90deg);

-ms-transform : rotateX(90deg)  rotateZ(90deg);

-o-transform : rotateX(90deg) rotateZ(90deg);

transform : rotateX(90deg)  rotateZ(90deg);

opacity : 0;

height : 0px;

}

.animate-enter .animate-enter-active,

.animate-leave {


-webkit-transform : rotateX(0deg)  rotateZ(0deg);

-moz-transform: rotateX(0deg) rotateZ(0deg);

-ms-transform : rotateX(0deg) rotateZ(0deg);

-o-transform : rotateX(0deg) rotateZ(0deg);

transform: rotateX(0deg) rotateZ(0deg);

opacity : 1;

height :30px;

}



Demo -  Filter Array Items - 3D Rotate




If have any doubts about this tutorial means post comments.

Touch with me! Gain more.





Thursday, 7 November 2013

AngularJS : How to using ngAnimate in partial template view




               How to using ngAnimate in partial template views.







In this tutorial, we are discusses about using ngAnimate in partial template view.

Using nganimate in partial template view.

In this tutorial using two type of modules

1.ngRoute - It is used for routing of templates

2.ngAnimate -  It is used for animation effects in user file.


The ngAnimate is using slides show and moving effects in custom file.

download link - ngAnimate resource file



The ngRoute is using  identify the template location path.

download link - ngRoute resource file



index.html

<!DOCTYPE html> 
 
<!--ng-app module name - animation--> 
<html ng-app="animation">  
 
<!--head tag starts--> 
<head>
 
<!--custom css file--> 
<link rel="stylesheet" href="style.css"> 
 
<!--angularjs resource files--> 
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script> 
 
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
 
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script> 
 
<script src="script.js"></script>
 
</head><!--head tag ends--> 
 
<!--body tag starts--> 
<body ng-controller="animateCtrl">
 
<!--click button - animation on or off status--> 
<p>ngAnimate using in templates view : <button ng-click="animateCtrl.switch()">Animation On / Animation Off</button></p><br><br>
 
<!--ng-view - partial template views--> 
<ng-view></ng-view>
 
</body><!--body tag ends-->
 
</html><!--html tag ends-->



Custom script file.

script.js

angular.module('animation', ['ngRoute', 'ngAnimate' ])

.config(function(

$routeProvider  )

{

$routeProvider.

when('/', { templateUrl : 'template-one.html'}). 

when('/alt', {templateUrl : 'template-two.html'});
}).

controller('animateCtrl', function (

$window, $location )

{
this.switch = function()
{
$location.path('/alt' === $location.path() ? '/' : '/alt');

};

}); 
 
 



Custom CSS file.

style.css

ng-view {

display :block;

border : 1px dashed black;

width : 250px;

height : 250px;

position : absolute;

top : 20%;

}

.ng-enter {

-webkit-animation : enter 1s cubic-bezier(.17, .67, .83, .67);

animation : enter 1s cubic-bezier(.17, .67, .83, .67);

}

.ng-leave {

-webkit-animation : enter 1s ease-out reverse;
animation : enter 1s ease-out reverse;

}

@-webkit-keyframes enter {

0% {

background : #f80;

top : 100%;

}

70% {

background : #f08;

}

100% {

background : #8f8;

top : 20%;

}

}

@keyframes enter {


0% {

background : #f80;

top : 100%;

}

70% {

background : #f08;

}

100% {

background : #8f8;

top : 20%;

}

}



template-one.html

AngularJS - ngAnimate



template-two.html

AngularJS - ngRoute



Demo ngAnimate - Plunker


Touch with me! Gain more.

Friday, 25 October 2013

AngularJS - Sorting Array Items using Angularjs.


Sorting Array Items using AngularJS.


Part 6:

Array binding tutorial refer : Array binding concept

Sorting is a processes of arranging the items. Ascending or Descending order performing in the array of items. A standard order is often called ascending order [ex :  0 to 9, A to Z], the reverse processes is descending order [ex: Z  to A, 9 to 0].

The order processes in array items using angularjs. It's using ng-repeat module. 
The ng-repeat  is extracting single item from array items and using orderBy reserved word.


Sample Code:



index.html

<!DOCTYPE html>

<!--html tag starts and module - ng-app-->                                                                               
<html ng-app>     

          <!--head tag starts-->   

          <head>           

                    <!--script files-->                                                                                     

                    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs     /angularjs/1.0.8/angular.min.js"></script>

                    <script type="text/javascript" src="controller.js"></script>

                                        
          </head><!--head tag ends-->                                                                                                                   

          <!--body tag tarts-->                                                                                         

          <body>                   

                    <!--controller div starts-->                                                                                                

                    <div ng-controller="Ctrl">

                             <!--sort form starts-->                                                                                       

                             <form name="sortForm">

                                        <!--product table starts-->                                            

                                        <table>                                                                                    
                                                  <thead> 
                                                         <th>Product</th> 
                                                         <th>Price</th>                                            
                                                  </thead>

                                                  <!--ng-repeat and products is an array-->                                                                         <tr ng-repeat="product in products | orderBy : sortingOrder : reverse">                           

                                                        <td>{{product.Product}}</td>          
                                                        <td>{{product.Price}}</td>
                                                  
                                                  </tr>                                   
                                        </table><!--product table ends-->                                               
                              </form><!--sort form ends-->
                                                                                     
                    <button type="btn" ng-click="sortOrder('Product')">Sort Order</button>          </div><!--controller div ends-->
</body><!--body tag ends-->                                                                                         
</html><!--html tag ends--> 


Description :


The ng-app is one of the angular module. It's root of the angularjs models and directives. This module is manage the controllers, services, factory, directives. Single module is contain multiple controllers.

The controller name is "Ctrl". The controller is controlling the data members and member methods. The controller is used for retrive data from database.

The Products is an array. This array is contains product list and prices.  ex: COMPUTER, TABLET, IPHONE, SAMSUNG, NOKIA. In this, accessing array use the ng-repeat model.

Finally, click the button , sortOrder() method goes to controller file.


Controller.js  


//controller statements
function Ctrl($scope)
{

$scope.products = [

                           { Product : 'COMPUTER', Price : '$450'},
                           {Product : 'TABLET', Price : '$150'},
                           {Product : 'IPHONE', Price : '$200'},
                           {Product : 'SAMSUNG', Price : '$150' },
                           {Product : 'NOKIA', Price : '$150'}

                           ]; 

     //function sortOrder definitation

     $scope.sortOrder = function(newSortingOrder)
     {
               $scope.sortingOrder = newSortingOrder;
               $scope.reverse =! $scope.reverse;
     };
};    
                                                                                                

Sample Output:


Ascending Order Products:



Descending Order Products: 




If you have any doubt about this concept means post comments.

Touch with me! Gain more!