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

Can't figure out why angularJS module won't load

本文关键字：模块 加载 为什么 弄清楚 angularJS      更新时间：2023-09-26

>我正在使用 ui 路由器和 angular js，所以当我测试应用程序时，我只是得到一个空白屏幕，带有 injector：module 错误。这是指向错误的链接：

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

这是我的应用程序.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'
    });
})

这是我的博客.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');
    }
});

这是我的索引.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>

您已声明"use strict"，因此未定义应用程序变量。您需要添加

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

到博客Ctrl的顶部.js

此外，<script src="js/app.js"></script>移动，使其位于 index.html 中的控制器脚本之前。由于您在 BlogCtrl.js 之后加载应用程序.js因此在 app.js 中定义的模块在 BlogCtrl .js 中不可用。

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

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

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

已编辑以删除第二个参数：, [] 。

相关文章：