sinmetal / angularjs-sample Goto Github PK

Guetbookを未入力の状態でsubmitすると、AngularJSでerrorが発生する。
http://localhost:8080/#/guestbook/entry

コンボボックスを選択してない状態で、$scopeの内容を取得しようとしたのが原因のような気がする。
TypeError: Cannot read property 'pokemon' of undefined
at Object.$scope.submit (http://localhost:8080/script/main.js:63:46)
at y (http://code.angularjs.org/1.0.7/angular.min.js:72:251)
at Object.$get.e.$eval (http://code.angularjs.org/1.0.7/angular.min.js:88:347)
at Object.$get.e.$apply (http://code.angularjs.org/1.0.7/angular.min.js:88:454)
at HTMLFormElement.Gd.restrict (http://code.angularjs.org/1.0.7/angular.min.js:144:219)
at HTMLFormElement.x.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:14113)
at HTMLFormElement.x.event.add.v.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:10850)

qiitaのコメント欄で教えてもらったdirectiveを作る。
http://qiita.com/sinmetal/items/096474ba9c9c1ed705eb

今回のdirectiveは、classを付与した要素に独自属性として付与するdirectiveにする。
locationを関しするという仕様は、part2と同じ。

この作りにすることにより、domと分離されるので、再利用性が高まる。

$routeChangeStartを使って、locationを検知して、topmenuのactiveを変更する。

こうすれば、classにdirectiveをぶっこまなくても、locationの変更を検知して、activeを切り替えれるかも。

古いブラウザはサポートする気は無いので、urlを綺麗にするために、$locationProviderにhtml5モードを適用する。

twitter bootstrapの機能で標準であるかもしれないけど、サンプルとして。

app.yamlでstatic fileを定義している書き方を変える。

proppyのを参考にすれば、指定したdir内のファイルをまるごとstatic fileにできるのかな？
https://github.com/GoogleCloudPlatform/appengine-angular-gotodos/blob/master/app.yaml

DOMをシンプルにしておこうと思っていたけど、まぁ、良いかということで、twitter bootstrapのformの書き方にDOMを合わせようかと思う。

https://github.com/najeira/testbed
を使って、UnitTestを動かす

store一覧を返すAPIを作る。
因みにstoreは適当に付けたので、これが何の一覧なのかは完全に謎。

AngularJS Topの"Wire up a Backend"と同じ感じにする。
これをやれば、AngularJS読み込み前のDOMがちらちら見えるのが解決する気がする。

Toppageを作成する。

なんか適当な文言でも書いてあるページ。

AngularJSのversionを1.0.6から1.0.7に上げる。

https://github.com/angular/angular.js/blob/master/CHANGELOG.md

良いサンプルページが思いつかなかったので、好きなポケモンでも登録しよう。
コンボボックス連動部分は、タイプとポケモンにしよう。

minifayされると、controller名が圧縮されてAngularJSから見えなくなってしまうため、以下のようにcontroller名を縛る。

こんなふうにコントローラ定義しておいて
app.controller("EntryController", ['$scope', '$location', '$resource', EntryController]);

で、コントローラの名前を文字列で指定してあげればよかった気がします。
$routeProvider.when('/entry', {controller:"EntryController", templateUrl:'entry.html'});

save成功時のリアクションが何も無いので、一覧ページに戻るようにする

上部に共通のメニューを作成する

angular appのmoduleを即時関数の中に入れる。

サンプル用のコンボボックスが2つ連動するformの画面を作成する

URLを元に上部メニューのactiveを切り替える。

routeProviderで、":id"みたいなのを指定した時は、どうやって取るんだっけ？

今の作りだと、urlを全て見ているので、以下のようになってしまう。

url : guestbook/entry
a tag : guetbook
urlとa tagの内容が不一致なので、activeにならない。

これをactiveの状態にしたいため、第一階層のみ見るようにする。
上記の例だと、guestbook/entryなので、guestbookのみで判定したい。

どのページでも開いたら、Error吐いている。
Port error: Could not establish connection. Receiving end does not exist.

miscellaneous_bindingsで発生しているようだけど、誰だそれはｗ

PostされたものをServer側ではスルーしているが、こいつをDatastoreに保存して一覧取得とかできるようにしたい

デバッグ用のゴミを消すの忘れてた
currentPageController={{currentPageController}}

タイプを選択したら連動して、ポケモンが変わる2つのコンボボックスを作る