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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

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

Onsen UI

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1993閲覧

MonacaでのOnsenUI、Angular JSを使ったアプリ開発。setMainPageプロパティでエラーが出ます。

poooooo

総合スコア125

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

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

Onsen UI

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2016/07/29 05:03

Monaca公式ガイドブックを参考に、試験的なアプリを作成しています。
OnsenUI及びAnglarJSに触れる機会がなかったので、最初は本に載っている内容を丸呑みしようと、そっくりそのままコードを写しています。
しかしコードを書き終えて動かしてみたところ、エラーが出て動かずにいます。

showDetailPageメソッドを呼び出したときに、
ons.slidingMenu.setMainPageのプロパティに問題があるとエラーが出ます。

console.logでdataが返されていることの確認、
ShareData.set(data)まで一応通っていることの確認はしております。

一応、著書と記述が相違ないか何度も確認致しましたが、
なぜこのようなエラーが出てしまうのか、ご教授いただきたいです。
1年以上前の著書になるので、アップデートにより仕様が変わってしまったのでしょうか。
それとも著書をみていくと、ところどころ誤字脱字が見受けられるのですが、こちらの記述にも誤字があるのでしょうか。

よろしくお願い致します。


以下にコードを記載します。

エラー文

VM470 loader.js:1463TypeError: Cannot read property 'setMainPage' of undefined at Scope.$scope.showDetailPage (VM473 index.html:20) at fn (eval at compile (VM470 loader.js:1466), <anonymous>:4:300) at VM470 loader.js:1475 at Scope.$eval (VM470 loader.js:1464) at Scope.$apply (VM470 loader.js:1464) at HTMLElement.listener (VM470 loader.js:1475) at HTMLElement.eventHandler (VM470 loader.js:1461)

index.html

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <script> 11 var app = ons.bootstrap('myApp'); 12 13 app.controller('MenuController', function($scope, $http, SharedData) { 14 $http.get("data.json").then(function(response){ 15 $scope.dataList = response.data; 16 }); 17 18 $scope.showDetailPage = function(data) { 19 SharedData.set(data); 20 ons.slidingMenu.setMainPage('detail.html', {closeMenu: true}); 21 } 22 }); 23 24 app.controller('DetailController', function($scope, SharedData){ 25 $scope.data = SharedData.get(); 26 }); 27 28 app.factory('SharedData', function(){ 29 var sharedData = {}; 30 sharedData.data = {}; 31 32 sharedData.set = function(data) { 33 sharedData.data = data; 34 }; 35 36 sharedData.get = function() { 37 return sharedData.data; 38 } 39 40 return sharedData; 41 }); 42 </script> 43</head> 44<body> 45 <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="top.html" side="left" type="overlay" max-slide-distance="200px"> 46 </ons-sliding-menu> 47</body> 48</html>

menu.html

HTML

1<ons-page ng-controller="MenuController" style="background: #fff"> 2 <ons-list-item ng-repeat="data in dataList" modifier="tappable" class="list__item__line-height" ng-click="showDetailPage(data)"> 3 <span style="margin-left: 10px"> 4 <ons-icon icon="ion-image" style="color:#555;"></ons-icon> 5 {{data.name}} 6 </span> 7 </ons-list-item> 8</ons-page> 9

detail.html

HTML

1<ons-page ng-controller="DetailController"> 2 <ons-toolbar> 3 <div class="left"> 4 <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"> 5 <ons-icon icon="icon-navicon"></ons-icon> 6 </ons-toolbar-button> 7 </div> 8 <div class="center">{{data.name}}</div> 9 </ons-toolbar> 10 11 <ons-list modifier="inset"> 12 <ons-list-item style="text-align: center"> 13 <span class="label">{{data.season}}</span> 14 </ons-list-item> 15 </ons-list> 16 17 <ons-list modifier="inset" style="margin-top: 20px"> 18 <ons-list-header class="title"> 19 {{data.name}} 20 </ons-list-header> 21 <ons-list-item class="desc"> 22 {{data.desc}} 23 </ons-list-item> 24 <ons-list-item class="date">{{data.date}}撮影</ons-list-item> 25 </ons-list> 26</ons-page>

data.json

JSON

1[ 2 { 3 "id": 0, 4 "name": "福寿草", 5 "season": "春", 6 "date": "4月14日", 7 "desc": "白馬で春の訪れを告げる黄色い花は、福寿草です。" 8 }, 9 { 10 "id": 1, 11 "name": "姫踊り子草", 12 "season": "春", 13 "date": "4月21日", 14 "desc": "姫踊り子草の説明文がこちらに入ります。名前の由来は、踊り子が笠をかぶっているように見えるからだそうです。" 15 }, 16 { 17 "id": 2, 18 "name": "片栗", 19 "season": "春", 20 "date": "4月22日", 21 "desc": "片栗の説明文" 22 }, 23 { 24 "id": 3, 25 "name": "菊咲一華", 26 "season": "春", 27 "date": "5月14日", 28 "desc": "菊咲一華菊咲一華菊咲一華菊咲一華名前の由来は、踊り子が笠をかぶっているように見えるからだそうです。" 29 }, 30 { 31 "id": 4, 32 "name": "座禅草", 33 "season": "春", 34 "date": "5月6日", 35 "desc": "名前の由来は、見えるからだそうです。福寿草です。" 36 } 37]

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。

正誤表に記載されていたようです。
http://www.shoeisha.co.jp/book/detail/9784798140285

ons → app
の間違いのようです。

投稿2016/07/29 05:17

poooooo

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問