不知道爲什麼angularJS模塊不會加載

我正在使用ui路由器和角度js，所以當我測試應用程序時，我只是用注入器得到一個空白屏幕：模塊錯誤。這是鏈接到錯誤：不知道爲什麼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變量是未定義的。您需要

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

添加到BlogCtrl.js

同樣的頂部，移動<script src="js/app.js"></script>使其在index.html的控制腳本之前的。由於您在BlogCtrl.js之後加載app.js，因此app.js中定義的模塊在BlogCtrl.js中不可用。

來源

2016-03-21 22:29:41 evsheino

偉大的思想家一樣思考！ –

當我用變量聲明替換'use strict'時，它將調用另一個「injector：nomod」錯誤。 http://errors.angularjs.org/1.3.11/$injector/nomod?p0=myApp – Bleep

使用'嚴格使用'是一件好事 - 你可以把它留在那裏。你有沒有在blog.js上面的index.html中包含app.js？另外，使用角度的非縮小版本會給你更好的錯誤信息。 – evsheino

我認爲你需要包括這條線在blog.js頂部：

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

編輯以刪除第二個參數：, []。

來源

2016-03-21 22:29:49

由於模塊已經定義，因此不要添加第二個參數。它應該是'var app = angular.module（'myApp'）;' – evsheino

我沒有足夠的評論聲譽，但我確實想要添加信息：不要在blog.js中添加var app = angular.module('myApp', [])，因爲括號會初始化一個新應用程序，所以Angular會認爲您正在創建一個新應用程序並會拋出一個錯誤，因爲'myApp'已經存在。請務必使用var app = angular.module('myApp')。在加載Angular之後，請務必鏈接索引文件中的.js文件。

來源

2016-03-21 22:34:45

我添加了第一個，但仍然收到「nomod」錯誤。此外，我只是編輯我的問題，包括我的index.html文件，如果這有助於指出任何類型的鏈接錯誤。 – Bleep

不知道爲什麼angularJS模塊不會加載

回答

相關問題