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

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

ただいまの
回答率

90.35%

  • iOS

    4954questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • AngularJS

    618questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Cordova

    499questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

  • Onsen UI

    375questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,454

Nanohana

score 108

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

<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/jquery.min.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script type="text/javascript" src="topiclist.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />


    <!-- --------------- App init --------------- -->

    <title>タイトル</title>

    <script>
        angular.module('app', ['onsen']);



    </script>




    <style>
        .page--menu-page__background {
            background-color: #333;
        }

        .page--menu-page__content {
            color: white;
        }

        .menu-close,
        .menu-close > .toolbar-button {
            color: #999;
        }

        .menu-list,
        .menu-item:first-child,
        .menu-item:last-child,
        .menu-item {
            background-color: transparent;
            background-image: none !important;
            border-color: transparent;
            color: #fff;
        }

        .menu-item {
            padding: 0 0 0 20px;
            line-height: 52px;
            height: 52px;
            text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
        }

            .menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }

        .menu-notification {
            display: inline-block;
            margin-top: 12px;
            font-size: 14px;
            height: 16px;
            line-height: 16px;
            min-width: 16px;
            font-weight: 600;
        }

        .bottom-menu-list,
        .bottom-menu-item:first-child,
        .bottom-menu-item:last-child,
        .bottom-menu-item {
            border-color: #393939;
            background-color: transparent;
            background-image: none !important;
            color: #ccc;
        }

            .bottom-menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }
    </style>

</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                      var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
    </ons-sliding-menu>

    <ons-template id="menu.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent"></ons-toolbar>

            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New Post
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    <ons-icon icon="fa-bookmark"></ons-icon>
                    Bookmark
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-twitter"></ons-icon>
                    Official Twitter
                </ons-list-item>
            </ons-list>

            <br>

            <ons-list class="bottom-menu-list">
                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Settings
                    <div class="notification menu-notification">3</div>
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    Help
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Send feedback
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page1.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Flickr</div>
            </ons-toolbar>

            <ons-row style="margin-top: 100px; text-align: center;">

                <ons-col>


                    <!--APIより取得し埋め込み-->
<div ng-controller="FlickrController">
    <ons-list>
        <ons-list-item class="center">                          
                <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
        </ons-list-item>

        <ons-list-item ng-animate="'zoom'" ng-show="failed">
            Oops! looks like Flickr is down.
        </ons-list-item>

        <ons-list-item ng-repeat="item in feeds.items">
            <img width="100%" ng-src="{{item.media.m}}">
        </ons-list-item>

    </ons-list>

</div>
                    <!--APIより取得し埋め込みここまで-->


                </ons-col>
            </ons-row>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 2</div>
            </ons-toolbar>


            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
                        Toggle Menu
                    </ons-button>
                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>
</body>
</html>

hello/topiclist.js

function FlickrController ($scope) {

    $scope.fetchPhotos = function(){
        $scope.failed = false;        
        $scope.isFetching = true;

        $.ajax({
            url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
            dataType: "jsonp",
            jsonpCallback: 'jsonFlickrFeed',            
            success: function(feeds){
                $scope.$apply(function(){
                    $scope.feeds = feeds;
                    $scope.isFetching = false;
                    $scope.failed = false;
                });
            },
            error: function(error){
                $scope.$apply(function(){
                    $scope.failed = true;                                   
                    $scope.isFetching = false;    
                });
            }
        });
    };
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

var app = angular.module("myapp",[]);

function myController($scope) {
    // controller code here.
}


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

var app = angular.module("myapp", []);

app.controller("myController", function($scope) {
    // controller code here.
});


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/17 20:19

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • iOS

    4954questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

  • AngularJS

    618questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Cordova

    499questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

  • Onsen UI

    375questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。