2017-02-07 7 views
1

私は現在mysqlからデータを表示するプロジェクトを行っていますが、現在phpとangularjsを使用しています。私のプロジェクトを分ける助けが必要です。 Angularjs + Php + MySQL

私はmysqlからフェッチしているデータを表示するためにテーブルを作成する必要がありますが、フォーマットとは何か、私はまだ角度の新しい、コントローラやモジュール、ディレクティブの仕組みを知らない。私は別の "js"ファイルを作成してそこに私の角張った機能を置くように言われました。だから私は接続の権利のためだけに "php"ファイルを使用していますか?

私はまた、いくつかのグラフをデータ取り込みと統合する必要があり、私はGoogleのグラフを使う予定です。

私は、PHP

<?php 
error_reporting(E_ALL); 
header("Access-Control-Allow-Origin: *"); 
header('Content-Type: application/json; charset=utf-8'); 

//puerto 3306 en caso de requerir 
$conn = mysql_connect('iphost', 'user', 'password'); 
mysql_select_db('bdname', $conn); 
$result=mysql_query("Select 
    projects.project_name As project_name, 
    projects.project_alert, 
    If((tasks.task_percent_complete < (((To_Days(CurDate()) - 
    To_Days(tasks.task_start_date)) * 100)/(To_Days(tasks.task_end_date) - 
    To_Days(tasks.task_start_date)))), _utf8'ATRASADO', _utf8'ALDIA') As Estado 
From ((tasks Join 
     projects On tasks.task_project = projects.project_id) Join 
    users On tasks.task_owner = users.user_id) Join 
    companies On projects.project_company = companies.company_id 
Where ((tasks.task_end_date < (CurDate() + Interval 10 Day)) Or 
    (tasks.task_end_date = 0)) And tasks.task_percent_complete < 100 And 
    companies.company_name = _utf8'2017 - Proyectos'  "); 


$json = array(); 
while($row = mysql_fetch_array ($result))  
{ 
    $bus = array(
     'proyecto' => $row['project_name'], 
     'alerta' => $row['project_alert'], 
     'Estado' => $row['Estado'] 
    ); 
    array_push($json, $bus); 
} 
$jsonstring = json_encode($json); 
echo $jsonstring; 
?> 

とデータを表示するために、私のHTMLに次のコードを持っている:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Probando select</title> 
     <meta charset="utf-8"> 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
     </script> 
    </head>  
    <body> 
     <div ng-app="selectApp" ng-controller="selectController"> 
      <h1>Probando Select dotproject</h1> 
      <table class="table table-striped table-bordered table-condensed table-hover"> 
       <tr style="color:grey"> 
        <th>Proyecto</th> 
        <th>Alerta</th> 
        <th>Estado</th> 
       </tr> 
       <tr ng-repeat="x in content" > 
        <td>{{x.proyecto}}</td> 
        <td>{{x.alerta}}</td> 
        <td>{{x.Estado}}</td> 
       </tr> 
      </table> 
     </div> 
    </body>  
    <script> 
     var postApp = angular.module("selectApp", []); 
     postApp.controller("selectController", function($scope, $http) { 
      $http.get("selectPrueba.php") 
      .then(function(response) { 
      $scope.content = response.data;  
      }); 
     }); 
    </script> 
</html> 

あなたたちはそれがいいだろう行くためにどの方法を私に伝えることができます。

答えて

0

selectController.jsファイルを作成

(function() { 
    // ----------------------- selectApp Controller Start ----------------------- 
    var selectController = function ($scope, $http,) { 
     //write code here 
     $http.get("selectPrueba.php") 
      .then(function(response) { 
      $scope.content = response.data;  
      }); 

    selectController.$inject = ['$scope', '$http']; 

    angular.module('selectApp') 
      .controller('selectController', selectController); 
    // ----------------------- selectApp Controller End ----------------------- 
}()); 

私は、次のselectControllerを作成することによって、それを修正し、HTMLで

<script src="path/to/selectController.js"></script> 

セットアップの角度のプロジェクトのためのチェックのベストプラクティスhttps://scotch.io/tutorials/angularjs-best-practices-directory-structure

+0

"ここにコードを書いてください"というあなたの助けを借りて、ありがとうございました。 – frager0

+0

あなたが言ったように私は試みましたし、働いていません:( – frager0

0

をこのファイルを追加します。 jsファイルを開きます。

var app = angular.module('selectApp', []); 
app.controller('selectController', function($scope, $http) { 
    $http.get("selectPrueba.php")// aca se consume el JSON que viene de selectPrueba.php 
    .then(function (response) {$scope.content = response.data;}); 
    // acá los datos extraidos en selectPrueba son asignados a la variable content 
}); 
関連する問題