在angular脚本标记中使用async时手动引导angular

Manual bootstrap angular when using async in angular script tag

本文关键字：angular async 脚本      更新时间：2023-09-26

我想在应用程序中异步下载angular脚本，当它加载时，我想手动引导应用程序。当我尝试这样做时，会抛出一个错误

未能实例化模块wt，原因是：错误：[$injector:modulerr]http://errors.angularjs.org/1.4.5/$injector/modulerr？p0=y…）错误（本机）在https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:6:416在https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:38:98在n(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:7:322)在g(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:180)在https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:349在n(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:7:322)在g(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:180)在eb(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:435)在d(https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:19:381

我的示例代码类似

window.onload = function(){
  app = angular.module('wt', ['ngRoute']);
  app.config(function ($routeProvider,$locationProvider) {
      $routeProvider
          .when('/', {
              controller: 'homeController',
              templateUrl: 'template/home.html?ver='+file_version
          })
          .otherwise({ redirectTo: '/'});
      $locationProvider.html5Mode(true);
  });
  angular.module('wt').controller('homeController', function(){alert('Hello World');});
  angular.bootstrap(document, ['wt']);
};

对于脚本标签，我使用

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" async></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js" async defer></script>

有人能帮我弄清楚我在这里做错了什么吗？

如果你想在执行Angular的东西之前显示DOM，你可以把你的脚本放在</body> 之前

相关文章：