ANGULAR REFERENCE: April 2016

SELECT the Data From The DB and parse to array and then to json for angular access

<?php

$con=mysqli_connect("localhost","root","","ang");

$query="SELECT * FROM user";

$res=mysqli_query($con,$query);
$arr=array();
    if($res->num_rows > 0){
        while($row = $res->fetch_assoc()){
            $arr[]=$row;
        }

    }
echo $json_response = json_encode($arr);

insert .php for angular check to inser db with json methods

<?php
$data = json_decode(file_get_contents("php://input"));$con=mysqli_connect("localhost","root","","ang");$un=mysqli_real_escape_string($con,$data->un1);
$pw=mysqli_real_escape_string($con,$data->pw1);

$query="INSERT INTO user('UN','PW') VALUES('".$un."','".$pw."')";mysqli_query($con,"INSERT INTO user(UN,PW) VALUES('".$un."','".$pw."')");
error_log("Oracle database not available!" . $query, 0);

?>

nab.js // the javascript for angular db connectivity

/** * Created by HOME on 4/18/2016. */

var app = angular.module('myapp',[]);app.controller('mycontroller',function($scope,$http){
    $scope.insertdata=function(){

        var req1 = {            method: 'POST',            url: 'http://localhost/angular/ANGULAR_WITH_DB_AND_MYSQL/insert.php',            headers: {                'Content-Type': undefined            },            data: { 'un1': $scope.un,                'pw1': $scope.pw
            }        }
        $http(req1).then(function(){
            console.log("Inserted . . ");
        }, function(){console.log("Some Problem i think ");});

        //Second Request..
        $http.post("http://localhost/angular/ANGULAR_WITH_DB_AND_MYSQL/select.php").success(function(data){
            $scope.proj=data;            console.log(data);
        })








    }
});

The mysql DB TEST FRONT END . html / php


<HTML>
<HEAD>
    <TITLT>
        Angular Test With my sql
    </TITLT>
    <script src="angular.min.js"></script>


</HEAD>

    <body>
    <form>        <div ng-app="myapp" ng-controller="mycontroller">
            <input type="text" ng-model="un" />            <input type="text" ng-model="pw" />            <input type="button" ng-click="insertdata()" value="insert Data"/>

    </form>

    <script>



    </script>




        <table>
            <tr ng-repeat="items in proj">                <td>{{items.ID}}</td>                <td>{{items.UN}}</td>                <td>{{items.pw}}</td>
            </tr>



        </table>



        </div>
    <script src="nab.js"></script>


    </body>

</HTML>

Front End [HTML] abc.php / html


<HTML>
<HEAD>
    <TITLE>
        Angular Test img
    </TITLE>
    <script src="angular.min.js"></script>    <script src="imgjs.js"></script>


</HEAD>

<body>
        <div ng-app="myapp" ng-controller="mycontroller">



            <input type="button" ng-click="loadnext()" value="load NEXT" / >            <input type="button" ng-click="loadprev()" value="load PREV" / >            <h4>{{clickup}}</h4>
            <img ng-src="{{clickup3}}">
        </div>



</body>

</HTML>

Angular JS

/** * Created by HOME on 4/18/2016. */
    var app=angular.module('myapp',[]);
var no=0;var ur=0;var image=["oo1.jpg","oo2.jpg"];
    app.controller('mycontroller',function($scope){


            $scope.loadnext=function(){
                ur=no++;

                if(image.length <= ur){
                    $scope.clickup="No more Images ";                }else {                    console.log("you clicked a button");                    $scope.clickup = "You Clicked "+ ur +" Times ";                    $scope.clickup2 = "You pulled " + ur + "-><img src= height='40px' width='25px'> ";                    $scope.clickup3 = image[ur];                }
            }

        $scope.loadprev=function(){
            ur=no--;

            if( ur <= 0){
                $scope.clickup="No more Images ";            }else {                console.log( "You Clicked "+ ur +" Times ");                $scope.clickup = "You Clicked "+ ur +" Times";                $scope.clickup2 = "You pulled " + ur + "-><img src= height='40px' width='25px'> ";                $scope.clickup3 = image[ur];            }
        }









    });

Monday, April 18, 2016

Angular JS