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

Webアプリ構築のためのAngularJS

作者: 外村和仁
出版社/メーカー: マイナビ
発売日: 2014/10/06
メディア: Kindle版
この商品を含むブログを見る

『Webアプリ構築のためのAngularJS』を買って早速写経を始めたんだけど、最初のサンプルから動かず『ほぎゃー』ってなったのでメモ。

デモ

デモが公開されています。

AngularJS incremental search demo

メモ

サンプル※を写経して起動したら、以下のエラーが出ました。

Error: Argument 'MainCtrl' is not a function, got undefined

※ちなみに該当部はCodeGridで読めます。

<a href="https://app.codegrid.net/entry/angularjs-1">攻略！AngularJS - AngularJSとは | CodeGrid</a>

攻略！AngularJS - AngularJSとは | CodeGrid

どうやらサンプルはAngularJS1.2.7っぽい。今回使用したのは1.3.10。 1.2.7に戻したら動作する。先生に聞いたら以下が見つかったので反映した。

<a href="http://stackoverflow.com/questions/17289236/error-argument-is-not-a-function-got-undefined">Error: Argument is not a function, got undefined</a>

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'}
  ]