从ng-app转到手动引导程序不起作用，出现空白页

Question

In order to run hybrid angular 1 and angular 2, I am following these guidelines: https://angular.io/guide/upgrade#upgrading-with-ngupgrade 为了运行混合角度1和角度2，我遵循以下准则： https : //angular.io/guide/upgrade#upgrading-with-ngupgrade

One issue I have run into is switching from using ng-app to bootstrap to a manual bootstrap method as manual bootstrap is required from the upgrade to work. 我遇到的一个问题是，从升级到工作需要使用手动引导程序，因此从使用ng-app引导程序切换为手动引导程序方法。 The below ng-app bootstrapping method works just fine: 下面的ng-app bootstrapping方法可以正常工作：

    <!DOCTYPE html SYSTEM "about:legacy-compat">
<html ng-app="c2c" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" class="no-js">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <title>c2c</title>
  <link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900' rel='stylesheet' type='text/css'>
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css({.tmp/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <!-- css files will be automatically insert here -->
  <!-- endinject -->
  <!-- endbuild -->
</head>

<body ng-controller="UserController as mainApp">
  <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <div class="container-fluid">
    <div class="row">
      <div class="c2c-header"></div>
    </div>
    <div class="row" ng-if="emailClass!='email'">
      <div class="c2c-navbar"></div>
    </div>
    <div class="row">
      <!--<div ng-if="emailClass!='email'" class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2" ng-if="mainApp.hasPermission('DealPoint.VIEW')"></div>-->
      <div class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2"></div>
      <div class="talent-content body-bg col-xs-9 col-sm-9 col-md-10 col-lg-10">
        <div class="ui-view"></div>
      </div>
    </div>
  </div>

  <!--  <div class="pageloader" ng-if="loader">
    <img src="app\assets\images\balls.gif" width="100" height="100" class="loaderImage" />
    <span class="loaderText" ng-if="loadingText.length>0">{{loadingText}}</span>
    </div>
    -->


  <!-- build:js(src) scripts/vendor.js -->
  <!-- bower:js -->
  <!-- run `gulp inject` to automatically populate bower script dependencies -->
  <!-- endbower -->
  <!-- endbuild -->
  <!--<script src="../bower_components/angular-filter/dist/angular-filter.min.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>-->

  <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
  <!-- inject:js -->
  <!-- js files will be automatically insert here -->
  <!-- endinject -->

  <!-- inject:partials -->
  <!-- angular templates will be automatically converted in js and inserted here -->
  <!-- endinject -->
  <!-- endbuild -->



</body>

</html>

But when I switch to the manual bootstrapping method, I get a blank page with no console errors: 但是当我切换到手动引导方法时，我得到了一个空白页面，没有控制台错误：

<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" class="no-js">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <title>c2c</title>
  <link href='https://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900' rel='stylesheet' type='text/css'>
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css({.tmp/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <!-- css files will be automatically insert here -->
  <!-- endinject -->
  <!-- endbuild -->
</head>

<body ng-controller="UserController as mainApp">
  <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <div class="container-fluid">
    <div class="row">
      <div class="c2c-header"></div>
    </div>
    <div class="row" ng-if="emailClass!='email'">
      <div class="c2c-navbar"></div>
    </div>
    <div class="row">
      <!--<div ng-if="emailClass!='email'" class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2" ng-if="mainApp.hasPermission('DealPoint.VIEW')"></div>-->
      <div class="talent-aside col-xs-3 col-sm-3 col-md-2 col-lg-2"></div>
      <div class="talent-content body-bg col-xs-9 col-sm-9 col-md-10 col-lg-10">
        <div class="ui-view"></div>
      </div>
    </div>
  </div>

  <!--  <div class="pageloader" ng-if="loader">
    <img src="app\assets\images\balls.gif" width="100" height="100" class="loaderImage" />
    <span class="loaderText" ng-if="loadingText.length>0">{{loadingText}}</span>
    </div>
    -->


  <!-- build:js(src) scripts/vendor.js -->
  <!-- bower:js -->
  <!-- run `gulp inject` to automatically populate bower script dependencies -->
  <!-- endbower -->
  <!-- endbuild -->
  <!--<script src="../bower_components/angular-filter/dist/angular-filter.min.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>-->

  <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
  <!-- inject:js -->
  <!-- js files will be automatically insert here -->
  <!-- endinject -->

  <!-- inject:partials -->
  <!-- angular templates will be automatically converted in js and inserted here -->
  <!-- endinject -->
  <!-- endbuild -->
<script>
    angular.module('c2c', [])
      .controller('UserController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(function() {
      angular.bootstrap(document, ['c2c']);
    });
  </script>


</body>

</html>

Any help would be great! 任何帮助将是巨大的！ Thanks! 谢谢！

Answer 1

angular.element(function() {
      angular.bootstrap(document, ['c2c']);
    });

The anonymous function here is not returning anything; 这里的匿名函数不返回任何东西。 in fact, I don't believe you need the angular.element wrapper either. 实际上，我也不认为您也需要angular.element包装器。 Try just using 尝试只使用

angular.bootstrap(document, ['c2c']);

Answer 2

You need to wait for the document to be ready to bootstrap AngularJS. 您需要等待文档准备好引导AngularJS。

Change 更改

 angular.element(function() {
   angular.bootstrap(document, ['c2c']);
 });

To 至

 angular.element(document).ready(function(){
   angular.bootstrap(document, ['c2c']);
 });

从ng-app转到手动引导程序不起作用，出现空白页

问题描述

2 个解决方案

解决方案1
0 2018-03-28 20:14:30

解决方案2
0 2019-07-30 15:45:06

从ng-app转到手动引导程序不起作用，出现空白页

问题描述

2 个解决方案

解决方案1 0 2018-03-28 20:14:30

解决方案2 0 2019-07-30 15:45:06

解决方案1
0 2018-03-28 20:14:30

解决方案2
0 2019-07-30 15:45:06