Friday 25 October 2013


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!




Monday 21 October 2013

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


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.

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

MySql - MySQL Online Tool

mysql


PHP - PHP Online Tool



Angularjs, JS, JQuery, MooTools, Prototype, YUI, DoJo, Processing.JS, Ext.JS........etc.

Running this type of files use - JS Online Tool





Touch with me! Gain more!



Wednesday 16 October 2013






How to set limit text in textbox and check email format using angularjs


Part 3:

Normally, no limit to enter number of characters in textbox. Minimum length or maximum length characters set in  textbox so, display Too short! or Too long! messages. This concept is very useful for login page development and more.

Ex:
 Set minimum length characters and maximum length characters in user name or password. User can enter two characters in text box, so display Too short message or user can enter more characters in text box, so display Too length message.

Sample Code:


Angularjs module:

ng-minlength and ng-maxlengt.

Note: external array binding concept include.








Monday 14 October 2013


AngularJS Array Binding and Filter concept


Part 2:

How to set array binding and filter in angularjs step by step examples in this tutorial.

What is array?

An array stores multiple values in single variable. An array is a special variable, which can hold more than one value at a time.

ex:

In php,

$lang = array("PHP","MYSQL");

access array values use index values,

echo "Front end". $lang[0] . "Back end" . $lang[1].

It is simple array concept in php. How to this type of array concept use in angularjs, it's very simple and easy.

Step 1:

Already, create file structure and include angularjs file.

refer link part 1 tutorial: Create file structure and include angularjs file - part 1.

Follow step by step,


Step 2:

Array initialize use ng-init model name. Array binding in two ways 1.internal array binding, 2.external array binding.

First, explain internal array binding concept. Next tutorials explain external array binding in angularjs.

ex:

ng-init = "employees= [

                             { name:'Ramesh', phone:'9898987678',
                               name:'Vijay', phone:'8976986789',
                               name:'Kumar', phone:'9878987698'
                             }

                             ]"; 


Step 3:

Create text box use input type tag, ng-model name searchText. It's use for enter name or phone search from array and display.


Step 4:

After, create table use html tags. One of the magic code ng-repeat. It's use for extracting single item from array. Its similar
to foreach loop. Filter is reserved word(key word). Filter is filtering the array items. Text box ng-model name assign to filter.

ex:
ng-repeat = "employee in employees | filter:searchText" 


Step 5:

Enter employee name in text box,filter particular employee name and phone number extracting from array.

Result:


enter upper case or lower case letter to search items from array.


refer link: Practical Session! Click Here!


Next tutorial:

How to set limit text in textbox use angularjs?

How to check email format use angularjs?


Touch with me! Gain more!

Saturday 12 October 2013

MySQL Line Comment.

This is new MySQL Line Comment tutorial.

Part 1:

create simple database and tables through MySQL line comment.

1. Create Database Query
2. Create Tables Query
3. Insert Query
4. Select Query


Step 1:

Open MySql Line Comment window. Enter your system password.


Some instructions display.

Step 2:

Create EMPLOYEE database. Get employee details for employee name, employee address, employee salary and attendance details .. etc.

Syntax:

CREATE DATABASE ;

ex:


CREATE DATABASE EMPLOYEE;


Step 3:

After, particular select one database (ex: EMPLOYEE) from group of database. use this query,

Syntax:

USE ;

USE is reserve word.

ex:
USE EMPLOYEE


Step 4:

After, create more than one table in single database.

Syntax:
CREATE TABLE (fields1 ,fields2 ,,,)
ex:
CREATE TABLE EMPLOYEEINFO(E_ID INT(11), E_NAME VARCHAR(255), E_SALARY INT(11));

The table contains, three fields for E_ID is int datatype, E_NAME is varchar datatype, E_SALARY is int datatype.

varchar datatype is support numeric and characters and it's size 255 characters only.

Step 5:

Insert values in table EMPLOYEEINFO.

Syntax:

INSERT TABLE_NAME VALUES('values',....)

ex:
INSERT EMPLOYEEINFO VALUES(101, 'KUMAR', 10000);


Step 6:

Select values from database use select query. Different type select query use retrive values from database. Such as,

Type 1:
SELECT * FROM EMPLOYEEINFO 
Select all fields(column name) from table.

Type 2:
SELECT E_ID FROM EMPLOYEEINFO

Select E_ID single field from EMPLOYEEINFO table.

Type 3:
SELECT E_ID, E_NAME FROM EMPLOYEEINFO WHERE E_ID=101

Select some fields use where conditions

more select statements upcoming tutorials.


insert more records.


Next tutorial concept:

Part 2:

Different type of select queries and aggregate functions in MySQL database.

Touch with me! Gain more!.





Monday 7 October 2013

Angularjs tutorial

Part 1:

simple angularjs.

Angularjs is one of the google product and it is reduce server workload and quickly access data from database.

First of all, How to create simple angularjs.

It is very easy and follow step by step:

Step 1:


First, create one folder, For example, folder name angularjstut.


Step 2:

Create js folder and index.html file in angularjstut folder.


Step 3:


insert angularjs file in js folder.

Download angularjs file use following link,

https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js


file name angular.min.js save in js folder.


Step 4:

Write html codes in index.html


ng-app is angularjs root directory. It is first initialize in top of html tag.

Step 5:


Following, angular.min.js file link in index.html

Magic code in angularjs, data binding in inline code use ng-model.

create text box and assign ng-model name.



Output:


How to set external data binding in html use angularjs?

How to set inline array in html use angularjs?

How to extracting array elements in html use angularjs? ....etc.

this type of concept in another tutorials.

Touch with me! Gain more!.