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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/17 11:19