不肖者の人生実験: CakePHPとAngularJSでWebアプリを作る。その3

AngularJS側のページを作る。

コントローラを作成

JSON側はできた（と思っていた）のでAngularJSのアプリページを作っていきます。まずはコントローラです。
/app/Controller/AngularjsController.phpを作成します。

App::uses('AppController', 'Controller');

class AngularjsController extends AppController {
 …
 public $layout = "angularjs";

 public function index() {
  
 }
 
 // jsonを取得するページ。
 public function json_get_test(){
  
 }
 
 public function beforeFilter() {
  parent::beforeFilter();
  $this->set('title_for_layout','AngularJS test');
 }
}

ビューを作成

レイアウトもAngularJS用のレイアウトを用意します。
/app/View/Layouts/angularjs.ctp

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
 <?php echo $this->Html->charset(); ?>
 <title>Test Site<?php echo $title_for_layout; ?></title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php
  echo $this->Html->meta('icon') . "\n";
  echo $this->Html->css(array('bootstrap.min','bootstrap-responsive')) . "\n";
  echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js') . "\n";
  echo $this->fetch('meta') . "\n";
  echo $this->fetch('css') . "\n";
  echo $this->fetch('script') . "\n";
 ?>
</head>
<body>
 <div class="container-fluid">
  <div class="row-fluid">
   <div class="span3">
    <?php echo $this->fetch('sidebar'); ?>
   </div><!--/span-->
   <div class="span9">
<?php echo $this->fetch('content'); ?>
   </div><!--/span-->
  </div><!--/row-->
  <hr>
 </div>
<?php
 echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js') . "\n";
 echo $this->Html->script('bootstrap') . "\n";
?>
</body>
</html>

htmlタグの所に「ng-app」、AngularJS用のjavascriptファイルの読み込みをすれば後は、まあご自由にどぞ。ちなみにCSSはTwitter Bootstrapを使ってます。CakePHP用のプラグインの方は使ってません。

ようやくお待たせしました。メインのAngularJS部分の記述を以下のビューファイルに書いてきます。 /app/View/Angularjs/json_get_test.ctp

<?php
$this->start('sidebar');
echo $this->element('angularjs_localnavi');
$this->end();

$this->start('script');
?>
<script type="text/javascript">

var requestCtrl = function($scope, $http, $templateCache){
  //取得先のURL
  $scope.jsonUrl = 'no url';
  //JSONを取得する
  $scope.doGetUser = function(){
   var url = $scope.jsonUrl;
   console.log(url);
   $http.jsonp(url).success(function(data,status) {
    console.log('success');
    console.log(data);
    console.log(status);
    $scope.result = data;
   }).
   error(function(data, status) {
    console.log('error');
    console.log(data);
    console.log(status);
   });
  }
  //サンプル用のURLとYouTube用のURLのどちらかを設定する。
  $scope.setJsonURL = function(type){
   var url = null;
   if(type == 0){
    url = ' http://sample.com/api/hogeUsers/get/user_list?'
    + [
     'callback=JSON_CALLBACK'
     ].join('&');
   } else {
    url = 'https://gdata.youtube.com/feeds/api/videos?'
     + [
      'q=' + 'ももクロ',
      'alt=json',
      'max-results=5',
      'v=2',
      'callback=JSON_CALLBACK'
     ].join('&');
   }
   $scope.jsonUrl = url;
  }
 }
</script>
<?php $this->end(); ?>
<div >
 <h3>AngularJSでJSON取得のテスト</h3>
</div>
<div ng-controller="requestCtrl">
 <form name="getTarget">
  <pre>$scope.jsonUrl : {{jsonUrl}}</pre>
  <button ng-click="doGetUser()"  class="btn btn-primary">ユーザーJSONデータ取得</button><br/>
  <br />
  <button ng-click="setJsonURL(0)" class="btn">HogeUser List</button>
  <button ng-click="setJsonURL(1)" class="btn">Youtube</button>
 </form>
</div>

これでブラウザ(クローム)のコンソールに取得したJSONオブジェクトが表示されるはず！「HogeUser List」ボタンを押してから「ユーザーJSONデータ取得」を押す！！

JSON側の修正へ

そしてエラー

無常にもコンソールにはエラーが出るorz。

エラーの内容は

Uncaught SyntaxError: Unexpected token :

予期しないトークン「:」と出ている…。???、直接ブラウザで確認するもJSON形式に則っているように見える…。
ここからハマった。
それならブラウザをFireFoxに変えて試してみる。やっぱりエラー…。でもよく見ると

SyntaxError: invalid label

とエラーの内容が違う。
ここで昔Ajaxでやった時にJSONを「()」で囲む事を思い出す。なんか、この括弧で囲まないとエラーがでるんだっけ？

JsonView.phpをいじる

HogeUsersControllerでJSON用のビューを設定してました。そのビューはどうやら「/lib/Cake/View/JsonView.php」の事らしい。Cakeディレクトリの中にあるので「/app/View/JsonView.php」にコピペして開いてみます。
中を確認すると

   $content = json_encode($data);

という部分があったので、括弧で囲むように修正↓

   $content = '('.json_encode($data).')';

これで再び実行してみる。

またエラー

コンソールに表示された内容は

error
undefined
0

と出る。「SyntaxError」は出なくなったが、JSONの取得後の「success」側の処理ではなく「error」側の処理を実行している模様。
そして途方に暮れる。
腹立ちまぎれに続きは次回。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

不肖者の人生実験

2013年3月22日金曜日

CakePHPとAngularJSでWebアプリを作る。その3