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

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

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

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

AngularJS

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

Q&A

解決済

1回答

3150閲覧

Angularでng-appを定義するとエラーになる

rontec

総合スコア169

JavaScript

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

AngularJS

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

0グッド

0クリップ

投稿2016/01/21 13:59

編集2016/01/22 00:02

以前Angularで途中まで他の方が実装していたシステムがあり、諸事情のAngularを一度排除した後、再度一部だけAngularを使うことになりました。

私は何度かAngularの使用経験はあり、特に気負うことなく担当していたのですが、ng-appをHTML上に定義すると以下のエラーが発生し、解決に至ることが出来ませんでした。

javascript

1Failed to instantiate module testApp due to: 2Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

https://docs.angularjs.org/api/ng/function/angular.module

javascript側で拾っているng-appの名前とスペルミスはありません。

以前Angularで実装されていた残りカスがあり、インスタンスを作る際それが邪魔している可能性も考慮しましたが、grepで単語検索までしたところ、他にng-appなどの定義をしている箇所はありませんでした。
※一部thymeleaf上に「ng-show」などの定義は残っていましたが。

現状ng-appを定義しているテンプレートは一箇所であり、またそれをJsでインスタンス化している箇所も一箇所のみです。
インジェクトする時の第二引数云々がヒントに書いてありますが、はじめてインスタンス化する今回に関係ない気がしています。

var app = angular.module('testApp', []); app.controller('myController', ['$scope', function($scope) { ~ }]);

※こんな感じのコントローラーの定義箇所が一箇所という意味です。

かなり時間をかけて対応したのですが、結局解決することが出来ませんでした。
何か思い当たることがある方がいらしたら、ご教授願います。

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

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

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

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

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

tkanda

2016/01/21 14:45

HTML側でng-appとng-controllerを指定している部分はどうなっているか、そこも重要なポイントなのでできれば追記してもらったほうがいいと思いますが、いかが?
rontec

2016/01/21 14:52

ご返答ありがとうございます。 本日はコードに触れることが出来ないため、明日追記させて頂きます。 まだ中身を作れていないので、基本的には現状「こんな感じ」で記載したコードとおなじです。
tkanda

2016/01/21 15:08

HTMLファイル側で ng-app="test" と記述してある部分と、ng-controller="myController" と記述してある部分を、それぞれ前後の脈絡が解るように示していただけると、答えが出やすいと思われますので、もし可能でしたら。
rontec

2016/01/21 15:11

帰宅後、思い返しながら投稿させて頂いたので、不一致がございました。 明日、正確なコードを記載させて頂きます。 よろしければご確認頂ければ幸いです。
rontec

2016/01/22 00:02

コードを修正させて頂きました。 よろしければご確認ください。
guest

回答1

0

自己解決

コーディングのあるあるではございますが、非常にバカバカしい失敗をしていました。
JSファイルの中でAngularのAppとControllerを受け取る部分を定義していたのですが、それが「$(function() {}」の内側に入っていました。
こんなつまらないことに3時間ぐらい頭悩ましたのかと自己嫌悪中です。

tkanda様、ご返答頂きありがとうございました。

投稿2016/01/22 00:37

rontec

総合スコア169

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問