2015년 5월 12일 화요일

angularjs example source. call php service.

PHP5.3 , angular.js

index.html
================================================================
<!doctype html>

<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="angular.js"></script>
    <script src="myService.js"></script>

    <link rel="stylesheet" href="angul.css">
</head>


    <div class="mainContainer" data-ng-app="myApp">
        <h1>Example</h1>

        <div data-ng-controller="search_ctrl">
       
            <input type="text" data-ng-model="val1">
           
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>phone</th>
                        <th>note</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="row in rows | filter:val1 | orderBy:'DEV_NAME' | limitTo: 10">
                        <td>{{row.DEV_NAME}}</td>
                        <td>{{row.DEV_TEL}}</td>
                        <td>{{row.DEV_MEMO}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div data-ng-controller="insert_ctrl">
            <input type="text" data-ng-model="key_name">
            <input type="text" data-ng-model="key_tel">
            <input type="text" data-ng-model="key_memo">
            <hidden type="text" data-ng-model="message">
            <button data-ng-click="insertValue()">insert</button>
            <hr>
            {{message}}
        </div>
    </div>
==================================================================


myService.js
==================================================================
/* use strict */
var app = angular.module("myApp", []);

app.controller("search_ctrl", function ($scope, $http)
{
    var request = $http({
        method: "post",
        url: "http://yours php url",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    /* Check whether the HTTP Request is successful or not. */
    request.success(function (data) {
        $scope.rows = data;
    });
})

app.controller("insert_ctrl", function ($scope, $http){
   
    $scope.insertValue = function () {
        var request = $http({
            method: "post",
            url: "http://yours php url" + $scope.key_name + "&" + $scope.key_tel,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

        /* Check whether the HTTP Request is successful or not. */
        request.success(function (data) {
            $scope.message = data;
        });
    }
})
==================================================================

댓글 없음:

댓글 쓰기