ArguTech

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

Unknown 11:31 AngularJS , 4 Comments

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
ngIf	enter 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

Unknown 12:38 AngularJS , 1 Comments

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.

Unknown 12:21 AngularJS , 0 Comments

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 ng-app>


          <head>

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

          
          <body>

                    
                    <div ng-controller="Ctrl">

                             
                             <form name="sortForm">

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

                                                                                                               <tr ng-repeat="product in products | orderBy : sortingOrder : reverse">
                                                        <td>{{product.Product}}</td>
                                                        <td>{{product.Price}}</td>

                                                  </tr>
                                        </table>
                              </form>

                    <button type="btn" ng-click="sortOrder('Product')">Sort Order</button>          </div>
</body>
</html>

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!

Monday, 21 October 2013

Create NGTodo Application using AngularJS

Unknown 13:33 AngularJS , 1 Comments

Create NGTODO Application using AngularJS

Part 5:

NGTodo is one of the task management application. It's very useful for manage project management or daily activities. Create this application using ng-repeat angularjs modle. The ng-repeat modle is extracting item from array. ng-repeat tutorials array binding tutorials

In this application, three type of methods used. One method is addTask(), it is perform add task in array that is tasks(array). Next method, checkTask() is check box method. It is used for click check box display delete task button. Final method, deleteTask() is deleted task. Note: This tutorials is checked single check box to deleted event is performed and how to check multiple checkbox to delete and inline editing task in next tutorials.

Sample code:

Contoller sample code, ngtodo controller

Sample result:

Demo this tutorial - Simple NGTodo Application

Tough with me! Gain more!

Saturday, 19 October 2013

Create Calculator application use Angularjs.

Unknown 22:10 AngularJS , 0 Comments

Create calculator application use Angularjs

Part 4:

ng-option is one of the angularjs module. ng-option is using to create calculator application. This module is embedded in <select> html tag.

Syntax:

<select
   ngModel = "{select ng-model name - string}"
   [name ="{select name - string}"]
   [required]
   [ngRequired="{string format}"]
   [ngOptions = "{comprehension_expression}"]>
</select>

The angularjs module, ngOptions can be used dynamically create option list in <select> tag. The ngOptions
is consist of array values.

example:

<select
   ng-model = "selectedOperator"
   ng-options = "operator for operator in operators" >
</select>

operators is an array, create in controller site,

example:

$scope.operators = [ '+' , '-', '*', '/' ];

sample code:

Demo :

Calculator - jsfiddle

Touch with me! Gain more!

Thursday, 17 October 2013

Online tools - AngularJS, MySQL, JS, JQuery, PHP.

Unknown 09:41 Tools , 0 Comments

Online tools - Angularjs, MySQL, JS, JQuery, PHP.

This type of tools very useful for running sample codes. Dosn't require particular resource file.

MySql - MySQL Online Tool