
- 作者: 外村和仁
- 出版社/メーカー: マイナビ
- 発売日: 2014/10/06
- メディア: Kindle版
- この商品を含むブログを見る
『Webアプリ構築のためのAngularJS』を買って早速写経を始めたんだけど、最初のサンプルから動かず『ほぎゃー』ってなったのでメモ。
デモ
デモが公開されています。
AngularJS incremental search demo
メモ
サンプル※を写経して起動したら、以下のエラーが出ました。
Error: Argument 'MainCtrl' is not a function, got undefined
※ちなみに該当部はCodeGridで読めます。
攻略!AngularJS - AngularJSとは | CodeGrid
どうやらサンプルはAngularJS1.2.7っぽい。今回使用したのは1.3.10。 1.2.7に戻したら動作する。先生に聞いたら以下が見つかったので反映した。
angularjs - Error: Argument is not a function, got undefined - Stack Overflow
・index.html
<!DOCTYPE html> <html lang="ja" ng-app=myApp> <head> <meta charset="utf-8"> <title>AngularJS incremental search demo</title> <script src="angular.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="MainCtrl"> <input type="search" placeholder="Search" ng-model="search"> <ul ng-repeat="person in people | filter:search"> <li>{{person.firstName}} {{person.lastName}}</li> </ul> </div> </body> </html>
<html lang="ja" ng-app>
を<html lang="ja" ng-app=myApp>
に変更
・app.coffee ついでにcoffeeに書換え
angular.module('myApp', []).controller 'MainCtrl', ($scope)-> $scope.people = [ {firstName: 'Kazuhito', lastName: 'Hokamura'} {firstName: 'Takeshi', lastName: 'Takatsudo'} {firstName: 'Akihiro', lastName: 'Oyamada'} {firstName: 'Kazuhori', lastName: 'Tokuda'} ]
これで動いた。
やってみて
『Webアプリ構築のためのAngularJS』半分くらい読み進めたけど、今いちまだピンと来ていない。 ほんとはインクリメンタルサーチもMasonaryと組み合わせたかったんだけどなんかうまくいかない。
こんなのもあるし
passy/angular-masonry · GitHub
こんなサンプルもあるけどなんか大変そう。
http://jsfiddle.net/bens/76hxwm1d/
http://jsfiddle.net/bens/76hxwm1d/
AngularJSはハマれば手間を省けるけど、少しイレギュラーなことをやろうとするとなんか、めんどくさいし、癖や決まり事が多くて大変そうって印象。学習コストも低くはない?