Wednesday 27 November 2013

AngularJS : How to connect AngularJS with MySQL database

12:11 AngularJS , 19 Comments
                                             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!
By at 19 comments:
Labels:

Monday 11 November 2013

AngularJS - ngAnimate in Filter Array Items 3D Rotate

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





By at 4 comments:
Labels:

Thursday 7 November 2013

AngularJS : How to using ngAnimate in partial template view

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.
By at 1 comment:
Labels: