JSONデータを角度jsアプリケーションに解析しようとしましたが、解析は私のWampサーバーでは機能していません。ログインページで[送信]ボタンをクリックすると、応答はありません。私が自分のコードでどこで間違えたのかを教えてください。angularjsでデータ解析が機能しない

Controller.js：

var app = angular.module("empApp", []); 
app.controller("emp", ['$scope', 'empService', function($scope, empService){ 
    $scope.doSearch = function(){ 
    empService.findEmployeeById($scope.searchEmpno, function(r){ 
     $scope.empno = r.empno; 
     $scope.ename = r.ename; 
     $scope.edept = r.edept; 
     $scope.esal = r.esal; 
    }); 
    }; 
}]); 

app.service("empService", ['$http', '$log', function($http, $log){ 
    this.findEmployeeById = function(empno, cb){ 
     $http({ 
      url: 'http://localhost/', 
      method: 'GET' 
     }) 
     .then(function(resp){ 
      cb(resp.data); 
     }, function(resp){ 
      $log.error('Error occurred'); 
     }); 
    }; 
    } 
}]); 

app.directive('empDetails', function(){ 
    return { 
    templateUrl: 'emp-details.html' 
    } 
});

HTML

<body ng-app="empApp"> 
    <div class="container-fluid"> 
     <div ng-controller="emp"> 
      <form class="form-inline"> 
       <div class="form-group"> 
        <label>Enter Employee No:</label> 
        <input type="text" name="name" class="form-control" ng-model="searchEmpno"/> 
       </div> 
       <div> 
        <button type="button" class="btn btn-primary" ng-click="doSearch()">Click</button> 
       </div> 
      </form> 
      <hr> 
      <div emp-details ng-if="empno != undefined">  
      </div> 
     </div> 
    </div> 
    </body>

EMP-details.html

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3>Employee details</h3> 
    </div> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-sm-4"><strong>Employee No</strong></div> 
      <div class="col-sm-7">{{empno}}</div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"><strong>Name:</strong></div> 
      <div class="col-sm-7">{{ename}}</div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"><strong>Department:</strong></div> 
      <div class="col-sm-7">{{edept}}</div> 
     </div> 
    </div> 
</div>

JSON：この

{ 
"employee":{ "empno": 251, "name":"John", "age":30, "edept":"New York" } 
}

出典

2017-02-15 burner

あなたのプロジェクトのフォルダ 'structure'を共有することができますを参照してください？あなたのプロジェクトにサーバーを使用していますか？ @Muhammadが正しいです、あなたのURLは正しく定義されていません。あなたのフォルダ構造を知ることによって、私はより多くのヘルプを提供することができます。 – AllJs

すべてのファイルが同じ場所に配置されています。ます。http：//localhost/login.html C：\ WAMP \ WWW controller.js data.json EMP-details.html login.htmlと – burner

が私をチェックアウト、私は私のブラウザ上のファイル、次のURLを見つけます回答。それがあなたのために働いた場合私に教えてください。 – AllJs

問題のほとんどは、RELAです構造とファイル構成をプロジェクトに移しました。

angleJSアプリケーションを適切に整理してコーディングするには、johnpapa-angular-styleguideを読むことをお勧めします。

複数の変更が必要です。

Controller.jsファイルを参照していません。
サービスに追加の}があります
data.jsonのようなファイルはありません。そのファイルを作成してサービスで参照する必要があります。 $http({ url: 'data.json', method: 'GET' })
サービスでは、resp.dataが返されます。 resp.data.employeeである必要があります。

cb(resp.data.employee);

あなたがrelative URLを使用する必要がありますパスを参照しています。

は作業plnkr

出典

2017-02-15 09:44:28

問題をクリアしてくれてありがとう... – burner

カップル：コールバックで'data.json'

から'http://localhost/'からあなたのURL

変更、resp.data.employeeにresp.dataを変更します。これにより、従業員データに直接アクセスできるようになります。

これが役立つかどうか教えてください。

Controller.js

$scope.doSearch = function(employeeN){ 
    empService.findEmployeeById(employeeN) 
    .then(function(r){ 
     $scope.empno = r.empno; 
     $scope.ename = r.ename; 
     $scope.edept = r.edept; 
     $scope.esal = r.esal; 
    }); 
};

サービス

this.findEmployeeById = function(empno){ 
    $http({ 
     url: 'http://localhost/data.json', 
     method: 'GET' 
    }) 
    .then(function(resp){ 
     return resp.data.employee; 
    }, function(resp){ 
     $log.error('Error occurred'); 
    }); 
};

HTML

<div> 
    <button type="button" class="btn btn-primary" ng-click="doSearch(searchEmpno)">Click</button> 
</div>

出典

2017-02-15 06:22:35 AllJs

angularjsでデータ解析が機能しない

答えて

問題のほとんどは、RELAです構造とファイル構成をプロジェクトに移しました。

関連する問題