个人中心
gpt4 book ai didi

javascript - 使用 $(document).ready() 时，Angular 模块不可用

转载 作者：行者123 更新时间：2023-12-03 02:53:17 28 4
gpt4 key购买 nike

我遇到了一个类似于其他帖子的奇怪错误，但我无法纠正。我使用 jQuery 的 document.ready() 来确保在引用本地 Javascript 文件之前加载所有按钮，该文件包含与 Firebase 和 Angularfire 结合的 AngularJS 前端。

我在控制台中收到以下错误，该错误通常伴随着具有未引用或未初始化依赖项注入(inject)的 Angular Controller :

Error: [$injector:nomod] Module 'myApp' 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.

我在关注this tutorial时编写了这段代码在 YouTube 上，除了前面提到的 jQuery 之外，基本上复制了所有相同的内容。

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Piano Lessons Administrator Signup</title>

    <!--Jquery-->
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <!--AngularJS-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>

    <!--Firebase Dependency-->
    <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>

    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

    <!--Local Javascript-->
    <script>
    $(document).ready(function(){
      $(function(){
          $.getScript('javascripts/piano.js');  
      });
    });
    </script>
    </head>


   <body ng-app="myApp">
      <div ng-congroller="MyCtrl as ctrl">

        <pre>{{ ctrl.object | json }} </pre>

      </div> <!--End myCtrl-->
   </body>

...
</html>

...和 ​​Piano.js

(function () {

// Initialize Firebase
var config = {
    apiKey: "myApikey",
    authDomain: "myAuthDomain",
    databaseURL: "myDatabaseURL",
    projectId: "projectId",
    storageBucket: "myStorageBucket",
    messagingSenderId: "MyMessagingSender"
};
firebase.initializeApp(config);

var myApp = angular
    .module('myApp', ['firebase'])
    .config(function ($firebaseRefProvider) {
    $firebaseRefProvider.registerUrl({
        default: config.databaseURL,
        object: `${config.databaseURL}/angular/object`
    });  
})
    .factory('ObjectFactory', ObjectFactory)
    .controller('MyCtrl', MyCtrl);

function ObjectFactory($firebaseObject, $firebaseRef){
    return $firebaseObject($firebaseRef.object);
}

function MyCtrl(ObjectFactory){
    this.object = ObjectFactory;
    this.sayHello = () => {
    //console.log(this.object.name);
        return `Hello, ${this.object.name}`;
    }
}

const ctrl = new MyCtrl({ name: 'David' });
const message = ctrl.sayHello();
console.log(message);

...
}());

有趣的是，console.log(message) 似乎可以工作，这似乎需要模块为 Controller 和工厂工作才能工作，但标记中的对象不会编译，留下纯文本，这通常意味着 Controller 出现故障。将其放入 $(document).ready() 中是否会使其他标签超出范围？

最佳答案

由于模块是在 DOMContentLoaded 之后加载的事件，应用程序需要手动引导。

首先删除自动引导指令:

 <body ̶n̶g̶-̶a̶p̶p̶=̶"̶m̶y̶A̶p̶p̶"̶ >

然后在加载模块后手动引导应用程序:

$(document).ready(function(){
  $(function(){
      $.getScript('javascripts/piano.js');
      angular.bootstrap(document.body, ['myApp']);  
  });
});

欲了解更多信息，请参阅

关于javascript - 使用 $(document).ready() 时，Angular 模块不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47745772/

28 4 0
文章推荐： javascript - JavaScript 中的 NaN 输出
文章推荐： javascript - 当选择 optgroup 中的选项之一时如何禁用未选择的选项
文章推荐： javascript - 为什么 JQuery 插件无法在 Vue 区域运行？
文章推荐： javascript - 重写 JQuery 函数(日志装饰器)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com