Laravel+Angularjs+D 3可視化データ作成、RESTful+Ajax

大まかな考え方は以下の通りであるが,最近ではLaravelもAngularjsを学んでいるため,これまでのプロジェクトを加えてd 3を用いた.
元の案は以下の通りです.
jQuery+highchart.js+Django
jQueryは主にajax、およびJson解析の詳細を示します.http://api.phodal.com
今の案は
Laravel+Angularjs+D3+Bootstrap
効果:www.xianuniversity.com/athome
最後の効果図は次のとおりです.

コード表示:https://github.com/gmszone/learingphp
フレームワークの概要
Laravel
Laravelは簡潔で優雅なPHP Web開発フレームワーク(PHP Web Framework)です.麺のように雑然としたコードから解放されます完璧なネットワークAPPを構築することができ、各行のコードが簡潔で表現力に富んでいます.
開発は創造的な過程であり、あなたを苦しめることではなく、楽しむことができるはずです.
Angular
AngularJSは動的WEBアプリケーションのために設計された構造フレームワークである.テンプレート言語としてHTMLを使用し、HTMLの構文を拡張することで、アプリケーションコンポーネントをより明確かつ簡潔に構築することができます.その革新的な点は、データバインドと依存注入を利用して、大量のコードを書く必要がなくなります.これらはすべてブラウザ側のJavascriptによって実現され、任意のサーバ側技術と完璧に結合することができます.
しかし、最初はember jsを考えていて、グーグルの学術化したものが好きではありません.ただember jsの体積は一時的に私に興味を失わせた.
D3
D 3は最もポピュラーなビジュアル化ライブラリの1つであり、他の多くのテーブルプラグインで使用されています.これにより、任意のデータをDOMにバインドし、データ駆動変換をDocumentに適用できます.基本的なHMTLテーブルを配列で作成したり、流体の過剰とインタラクションを利用して、似たようなデータで驚くべきSVGストライプ図を作成したりすることができます.
Bootstrap
BootstrapはTwitterが発売したフロントエンド開発用のオープンソースツールパッケージです.TwitterのデザイナーMark OttoとJacob Thorntonが共同で開発したCSS/HTMLフレームワークです.
一つ一つのオープンソースを組み合わせて、大きな優位性を形成しました.人気の技術に興味があります...(Phodal's Blogより転載)
RESTfulの作成
これはつまりLavarelで完成しました.

php artisan migrate:make create_athomes_table

対のtableを開いて修正します.コードは大体次の通りです.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateAthomesTable extends Migration {

	/**
	 * Run the migrations.
	 *
	 * @return void
	 */
	public function up()
	{
		Schema::create('athomes', function(Blueprint $table)
		{
			$table->increments('id');
			$table->float('temperature');
			$table->float('sensors1');
			$table->float('sensors2');
			$table->boolean('led1');
			$table->timestamps();
		});
	}

	/**
	 * Reverse the migrations.
	 *
	 * @return void
	 */
	public function down()
	{
		Schema::drop('athomes');
	}

}

modelsの下にclassを追加する必要があります

<?php

class Athomes extends Eloquent {

	protected $table = 'athomes';

}

routesに追加します.php

Route::get('/athome/{atid}',function($atid){
	$atdata=Athomes::where('id','=',$atid)
						->select('id','temperature','sensors1','sensors2','led1')
						->get();
	return Response::json($atdata);
});

ページをもう1つ作成

Route::get('/athome',function(){
	$maxid=Athomes::max('id');
	return View::make('athome')->with('maxid',$maxid);
});

2つのseedsを追加

class AthomesTableSeeder extends Seeder
{
	public function run()
	{
		Athomes::create(array(
			'temperature'=>'19.8',
			'sensors1'=>'22.2',
			'sensors2'=>'7.5',
			'led1'=>False
		));
		Athomes::create(array(
			'temperature'=>'18.8',
			'sensors1'=>'22.0',
			'sensors2'=>'7.6',
			'led1'=>False
		));
	}
}

そして、

php artisan migrate
php artisan db:seed

これでRESTの作成が完了しました
/athome/1を開いて、対応するjsonデータが表示されているかどうかを確認します.
Angularjsの追加
開始前にangularjsを修正する必要があります.デフォルトの{{私は好きな<%を選択しました.コードを修正するには以下のようにします.

	var myApp = angular.module('myApp', [], function($interpolateProvider) {
	    $interpolateProvider.startSymbol('<%');
	    $interpolateProvider.endSymbol('%>');
	});

簡単な例を使って、仕事があるかどうかをテストしましょう.

function FetchCtrl($scope, $http, $templateCache) {
	  $scope.method = 'GET';
	  $scope.url = '<?= url('/athome/1') ?>';

	  $scope.code = null;
	  $scope.response = null;
	 
	  $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
	    success(function(data, status) {
	        $scope.status = status;
	        $scope.data = data;
	        $.each(data,function(key,val){
	        	sensorsData.push(val.sensors1);
	        })
	    }).
	    error(function(data, status) {
	        $scope.data = data || "Request failed";
	        $scope.status = status;
	        log.l("Request Failed");
	    });
	}

HTMLコード

				    <div id="App1" ng-app="myApp" ng-controller="FetchCtrl">
				      <pre>http status code: <%status%></pre>
				      <pre>http response data: <%data%></pre>
				    </div>

なぜid=「App 1」と書くのかというと、id=「App 2」、すなわちangularjsの2つのAppが現れるため、2番目の下に追加する必要があります.

	angular.bootstrap(document.getElementById("App2"),['chartApp']);

効果は次のようになります.

http status code: 200

http response data: [{"id":1,"temperature":19.799999237061,"sensors1":22.200000762939,"sensors2":7.5,"led1":0}]

または下図のように

D3
私たちは最後にデータの部分を生成するために使用します.
ここではhttps://github.com/n3-charts/line-chartこのライブラリ.
だから簡単

	var app = angular.module('chartApp', ['n3-charts.linechart']);
	app.controller('MainCtrl', function($scope, $http, $templateCache) {
		$scope.click=function(){
			$scope.options = {lineMode: 'cardinal',series: [{y: 'value', label: '  ', color: 'steelblue'}]};
			$scope.data=[{x:0,value:12}];
	        $scope.url = '<?= url('/athome') ?>';
            $scope.url=$scope.url+'/'+{{$maxid}};
			log.l($scope.url);

			$scope.method = 'GET';
			 
			$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
			    success(function(data, status) {
			        $.each(data,function(key,val){
			        	$scope.data.push({x:1,value:val.sensors1});
			        	$scope.data.push({x:2,value:val.sensors2});
			        	log.l($scope.data);
			        })
			    }).
			    error(function(data, status) {
			        $scope.data = data || "Request failed";
			        log.l("Request Failed");
			    });
		}
	});

HTMLコードは次のとおりです.

				    <div id="App2" ng-controller="MainCtrl">
				        <button ng-click="click()" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Star
    </button>
					    <linechart data='data' options='options'></linechart>
					</div>

補足:bootstrapフレームワークが使用されています