angularJSモジュールがロードされない理由を理解できません

私はuiルータと角度jを使用していますので、アプリをテストすると、インジェクタ：モジュールエラーの空白の画面が表示されます。これは、エラーへのリンクです：ここではangularJSモジュールがロードされない理由を理解できません

http://errors.angularjs.org/1.3.11/ $injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350

は私app.jsコードです：

：ここ

var app = angular.module('myApp', ['ui.router', 'firebase']); 

// Creating fireref instance 
app.factory('FireRef', function($firebase){ 
    var ref = new Firebase('https://dablog.firebaseio.com/'); 
    return ref; 
}); 

// Creating fireauth instance 
app.factory('FireAuth', function($firebaseAuth){ 
    var ref = new Firebase('https://dablog.firebaseio.com/'); 
    return $firebaseAuth(ref); 
}); 

app.config(function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/site/home'); 
    $stateProvider 
    .state('site', { 
     url: '/site', 
     templateUrl: 'partials/site.html' 
    }) 
    .state('site.home', { 
     url: '/home', 
     templateUrl: 'partials/home.html' 
    }) 
    .state('site.about', { 
     url: '/about', 
     templateUrl: 'partials/about.html' 
    }) 
    .state('site.projects', { 
     url: '/projects', 
     templateUrl: 'partials/projects.html' 
    }) 
    .state('site.blog', { 
     url: '/blog', 
     templateUrl: 'partials/blog.html' 
     // controller: 'BlogCtrl' 
    }) 
    .state('site.login', { 
     url: '/login', 
     templateUrl: 'partials/login.html' 
     // controller: 'LoginCtrl' 
    }) 
    .state('site.newpost', { 
     url: '/newpost', 
     templateUrl: 'partials/newpost.html', 
     // controller: 'NewPostCtrl' 
    }) 
    .state('site', { 
     url: '/contact', 
     templateUrl: 'partials/contact.html' 
    }); 
})

は、「アプリが定義されていません」と言う私のblog.jsファイルですここで

'use strict' 

app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){ 
    var data = $firebaseArray(FireRef); 
    $scope.posts = data; 

    $scope.$watch('posts', function(newValue, oldValue){ 
     $scope.posts = $sce.trustAsHtml(data); 
    }) 

    $scope.login = function() { 
     $state.go('site.login'); 
    } 

    $scope.newPost = function(){ 
     $state.go('site.newPost'); 
    } 
});

は私のindex.htmlコードです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset= "utf-8"> 

     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <!-- Angular --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script> 

     <!-- Angular UI Router --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script> 

     <!-- Angular Animate --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script> 

     <!-- jQuery --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

     <!-- Bootstrap --> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script> 

     <!-- Firebase --> 
     <script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script> 
     <script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script> 

     <!-- Controllers --> 
     <script src="js/controllers/BlogCtrl.js"></script> 
     <script src="js/controllers/LoginCtrl.js"></script> 
     <script src="js/controllers/NewPostCtrl.js"></script> 

     <!-- App --> 
     <script src="js/app.js"></script> 

     <!-- Styling --> 
     <link rel="stylsheet" type="text/css" href="css/styles.css"> 
     <link rel="stylsheet" type="text/css" href="css/animate.css"> 

    </head> 

    <body ng-app="myApp"> 
     <div ui-view></div> 
    </body> 
</html>

出典

2016-03-21 Bleep

あなたは 'use strict'を宣言しているので、app変数は未定義です。あなたは、またBlogCtrl.js

の先頭に

var app = angular.module('myApp');

を追加し、それはindex.htmlをコントローラスクリプトの前にありますように<script src="js/app.js"></script>を移動する必要があります。 BlogCtrl.jsの後にapp.jsを読み込むので、app.jsで定義されたモジュールはBlogCtrl.jsで使用できません。 , []：

var app = angular.module('myApp');

編集2番目のパラメータを削除するには：

出典

2016-03-21 22:29:41 evsheino

偉大な心は似ていると思います！ –

'use strict'を変数宣言で置き換えると、別の "injector：nomod"エラーが発生します。 http://errors.angularjs.org/1.3.11/$injector/nomod?p0=myApp – Bleep

'use strict'を使うのは良いことです。あなたはそこに置くことができます。 blog.js上のindex.htmlにapp.jsを含めましたか？また、非縮小バージョンの角度を使用すると、より良いエラー情報が得られます。 – evsheino

は、私はあなたがblog.jsの上部に次の行を含める必要があると思います。

出典

2016-03-21 22:29:49

モジュールがすでに定義されているため、2番目のパラメータを追加しないでください。 'var app = angular.module（ 'myApp'）;' – evsheino

私はコメントするほどの評判はありませんが、情報を追加したいと思います：ブラケットは新しいアプリを初期化するので、var app = angular.module('myApp', [])をblog.jsに追加しないでください。Angularはあなたが新しいアプリを作成していると思うでしょう'myApp'は既に存在するため、エラーが発生します。代わりにvar app = angular.module('myApp')を必ず使用してください。また、Angularがロードされた後、インデックスファイル内の.jsファイルをリンクするようにしてください。

出典

2016-03-21 22:34:45

私は最初のものを追加しましたが、まだ "nomod"エラーが表示されます。また、私はリンクエラーの任意の並べ替えを指摘するのに役立ちます私の質問index.htmlファイルを含めるように編集しました。 – Bleep

angularJSモジュールがロードされない理由を理解できません

答えて

関連する問題