Cordova環境でのAngularJSのコントローラー読み込みについて

http://blog.asial.co.jp/1220
を参考にcorodovaにてアプリの作成をしています。
まずはいじらす上記サイトのようにするため、自分の環境に合わせて以下のように構築しました。
ところが動かず、"Error: [ng:areq] Argument 'FlickrController' is not a function, got undefined ...となっており、FlickrControllerが
ないよと出てしまいますが、なぜでしょうか？

なお、js/cssともにリンクが正常に確立されていることは確認済みです。

hello/www/index.html

llang
1<!DOCTYPE html>
2<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
3<html lang="en" ng-app="app" ng-csp>
4<head>
5    <meta charset="utf-8" />
6    <meta name="apple-mobile-web-app-capable" content="yes" />
7    <meta name="mobile-web-app-capable" content="yes" />
8
9    <!-- JS dependencies (order matters!) -->
10    <script src="scripts/platformOverrides.js"></script>
11    <script src="lib/angular/jquery.min.js"></script>
12    <script src="lib/angular/angular.js"></script>
13    <script src="lib/onsen/js/onsenui.js"></script>
14    <script type="text/javascript" src="topiclist.js"></script>
15
16    <!-- CSS dependencies -->
17    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
18    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
19
20    <!-- CSP support mode (required for Windows Universal apps) -->
21    <link rel="stylesheet" href="lib/angular/angular-csp.css" />
22
23
24    <!-- --------------- App init --------------- -->
25
26    <title>タイトル</title>
27
28    <script>
29        angular.module('app', ['onsen']);
30        
31        
32        
33    </script>
34    
35    
36  
37
38    <style>
39        .page--menu-page__background {
40            background-color: #333;
41        }
42
43        .page--menu-page__content {
44            color: white;
45        }
46
47        .menu-close,
48        .menu-close > .toolbar-button {
49            color: #999;
50        }
51
52        .menu-list,
53        .menu-item:first-child,
54        .menu-item:last-child,
55        .menu-item {
56            background-color: transparent;
57            background-image: none !important;
58            border-color: transparent;
59            color: #fff;
60        }
61
62        .menu-item {
63            padding: 0 0 0 20px;
64            line-height: 52px;
65            height: 52px;
66            text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
67        }
68
69            .menu-item:active {
70                background-color: rgba(255, 255, 255, 0.1);
71            }
72
73        .menu-notification {
74            display: inline-block;
75            margin-top: 12px;
76            font-size: 14px;
77            height: 16px;
78            line-height: 16px;
79            min-width: 16px;
80            font-weight: 600;
81        }
82
83        .bottom-menu-list,
84        .bottom-menu-item:first-child,
85        .bottom-menu-item:last-child,
86        .bottom-menu-item {
87            border-color: #393939;
88            background-color: transparent;
89            background-image: none !important;
90            color: #ccc;
91        }
92
93            .bottom-menu-item:active {
94                background-color: rgba(255, 255, 255, 0.1);
95            }
96    </style>
97
98</head>
99
100<body>
101    <!-- Cordova reference -->
102    <script src="cordova.js"></script>
103    <script src="scripts/index.js"></script>
104    <!-- -->
105
106    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
107                      var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
108    </ons-sliding-menu>
109
110    <ons-template id="menu.html">
111        <ons-page modifier="menu-page">
112            <ons-toolbar modifier="transparent"></ons-toolbar>
113
114            <ons-list class="menu-list">
115                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
116                    <ons-icon icon="fa-plus"></ons-icon>
117                    New Post
118                </ons-list-item>
119
120                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
121                    <ons-icon icon="fa-bookmark"></ons-icon>
122                    Bookmark
123                </ons-list-item>
124
125                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
126                    <ons-icon icon="fa-twitter"></ons-icon>
127                    Official Twitter
128                </ons-list-item>
129            </ons-list>
130
131            <br>
132
133            <ons-list class="bottom-menu-list">
134                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
135                    Settings
136                    <div class="notification menu-notification">3</div>
137                </ons-list-item>
138
139                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
140                    Help
141                </ons-list-item>
142
143                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
144                    Send feedback
145                </ons-list-item>
146            </ons-list>
147        </ons-page>
148    </ons-template>
149
150    <ons-template id="page1.html">
151        <ons-page>
152            <ons-toolbar>
153                <div class="left">
154                    <ons-toolbar-button ng-click="menu.toggle()">
155                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
156                    </ons-toolbar-button>
157                </div>
158                <div class="center">Flickr</div>
159            </ons-toolbar>
160
161            <ons-row style="margin-top: 100px; text-align: center;">
162                
163                <ons-col>
164                    
165                    
166                    <!--APIより取得し埋め込み-->
167<div ng-controller="FlickrController">
168    <ons-list>
169        <ons-list-item class="center">                          
170                <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
171        </ons-list-item>
172 
173        <ons-list-item ng-animate="'zoom'" ng-show="failed">
174            Oops! looks like Flickr is down.
175        </ons-list-item>
176 
177        <ons-list-item ng-repeat="item in feeds.items">
178            <img width="100%" ng-src="{{item.media.m}}">
179        </ons-list-item>
180 
181    </ons-list>
182 
183</div>
184                    <!--APIより取得し埋め込みここまで-->
185                    
186                    
187                </ons-col>
188            </ons-row>
189        </ons-page>
190    </ons-template>
191
192    <ons-template id="page2.html">
193        <ons-page>
194            <ons-toolbar>
195                <div class="left">
196                    <ons-toolbar-button ng-click="menu.toggle()">
197                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
198                    </ons-toolbar-button>
199                </div>
200                <div class="center">Page 2</div>
201            </ons-toolbar>
202
203
204            <ons-row style="margin-top: 100px; text-align: center;">
205                <ons-col>
206                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
207                        Toggle Menu
208                    </ons-button>
209                </ons-col>
210            </ons-row>
211
212        </ons-page>
213    </ons-template>
214</body>
215</html>

hello/topiclist.js

lang
1function FlickrController ($scope) {
2 
3    $scope.fetchPhotos = function(){
4        $scope.failed = false;        
5        $scope.isFetching = true;
6 
7        $.ajax({
8            url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
9            dataType: "jsonp",
10            jsonpCallback: 'jsonFlickrFeed',            
11            success: function(feeds){
12                $scope.$apply(function(){
13                    $scope.feeds = feeds;
14                    $scope.isFetching = false;
15                    $scope.failed = false;
16                });
17            },
18            error: function(error){
19                $scope.$apply(function(){
20                    $scope.failed = true;                                   
21                    $scope.isFetching = false;    
22                });
23            }
24        });
25    };
26}
27

行動規範の内容に同意します

回答1件

ベストアンサー

質問からずいぶん時間が経ってしまっているので今更かもしれませんが・・・

もしかすると参照している angular.js のバージョン違いかもしれません。
主さんのコードの方式でコントローラーとバインドできるのは AngularJS 1.2.x までです。
1.3 以降のバージョンでは、コントローラーの宣言方法が変わりました。
詳しくはこちらで説明されていますが、ざっくり引用すると・・・

バージョン1.2.xまでは・・・

Javascript
1var app = angular.module("myapp",[]);
2
3function myController($scope) {
4    // controller code here.
5}
6

のように宣言していましたが、バージョン1.3以降では・・・

javascript
1var app = angular.module("myapp", []);
2
3app.controller("myController", function($scope) {
4    // controller code here.
5});

このように宣言するようになりました。
ご参考になれば。

投稿2016/01/17 10:23

tkanda

総合スコア2425

Nanohana

2016/01/17 11:19

ご回答ありがとうございます。解決しました。。。手元のangular.jsはバージョン1.48でした。まさかバージョン1の中で書き方すら変わっているとは驚きました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Cordova環境でのAngularJSのコントローラー読み込みについて

関連した質問