Question

我正在使用ui路由器和角度js所以当我测试应用程序时，我只是得到一个带有进样器的空白屏幕：模块错误。这是错误的链接：

http://errors.angularjs.org/1.3.11/ $注射器/ modulerr P0 = MyApp来＆安培; P1 =错误％3A％... dflare.com％2Fajax％2Flibs％2Fangular.js％2F1.3.11％2Fangular.min.js％3A17％3A350 < / p>

这是我的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文件，其中显示“app is not defined”：

'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>

Answer 1

您已声明'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中不可用。

Answer 2

我认为您需要在blog.js顶部包含此行：

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

已修改删除第二个参数：, []。

Answer 3

我没有足够的声誉来评论，但我确实想要添加信息：不要在blog.js中添加var app = angular.module('myApp', [])，因为括号初始化了一个新应用，所以Angular会认为你＆＃ 39;重新创建一个新的应用程序，并会抛出错误，因为＆＃39; myApp＆＃39;已经存在。请务必使用var app = angular.module('myApp')。还要确保在加载Angular之后链接索引文件中的.js文件。

无法弄清楚为什么angularJS模块不会加载

3 个答案: