undefined

bokuweb.me

AngularJSの勉強始めにインクリメンタルサーチのサンプルを写経してみたらエラーでほぎゃーってなったログ


Webアプリ構築のためのAngularJS

Webアプリ構築のためのAngularJS

『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はハマれば手間を省けるけど、少しイレギュラーなことをやろうとするとなんか、めんどくさいし、癖や決まり事が多くて大変そうって印象。学習コストも低くはない?