AngularJS Live Example

by dshilkret

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div ng-controller = "myCtrl1"> 
First Name: <input type="text" ng-model="fname" ng-change ="onfnameChange(fname)" required>
            Last Name: <input type="text" ng-model="lname" ng-change ="onlnameChange(lname)" required>
            <button ng-click="search()">Send HTTP Request</button>
            <p>Searching for : {{fname}} {{lname}}</p>
            <p>Response Status: </p>
            <p>{{status}}</p>
            <p>Data: {{data}}</p><br>
            <p>Total number of results : {{data.numResults}}</p>
    
    <pre>fname: {{fname | json}}</pre>
    <pre>fname: {{lname | json}}</pre>
</div>

JavaScript

var myApp = angular.module('myModule', []);

myApp.controller('myCtrl1', ['$scope','$rootScope', '$http', function($scope, $rootScope, $http) {
    $rootScope.fname = "";
    $rootScope.lname="";
    
    $scope.onfnameChange = function(val){
       $rootScope.fname = val;
    };
    
    $scope.onlnameChange = function(val){
      $rootScope.lname = val;
    };
    
    $rootScope.search = function() {

        var search_url = "/search?fname=" + $rootScope.fname + "&lname=" + $rootScope.lname;
       alert (search_url);
//      alert("/search?fname=" + $scope.fname + "&lname=" + $scope.lname);
        $http({method:'GET', url:search_url})
        .success(function(data, status, headers, config) {
            $rootScope.status = status;
            $rootScope.data = data;
            $rootScope.headers = headers;
            $rootScope.config = config;
        });
    };
}]);