一、AngularJS Bootstrap核心概念解析

AngularJS的Bootstrap是框架啟動的核心機制，包含兩種初始化方式：

• 自動初始化：通過ng-app指令聲明應用根節點，AngularJS在DOM加載完成后自動初始化。
• 手動初始化：使用angular.bootstrap()方法精準控制啟動時機和多個應用實例。

手動初始化優勢明顯：避免全局污染、支持多應用共存、可在依賴加載完成后啟動，尤其適合企業級復雜項目。

二、AngularJS Bootstrap示例代碼實戰

1. 自動初始化示例

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
    {{ message }} <!-- 輸出：Hello AngularJS! -->
  </div>
  <script>
    angular.module('myApp', [])
      .controller('MainCtrl', function($scope) {
        $scope.message = 'Hello AngularJS!';
      });
  </script>
</body>
</html>

2. 手動初始化示例

<!DOCTYPE html>
<html>
<head>
  <script src="angular.min.js"</script>
</head>
<body>
  <div id="appRoot" ng-controller="MainCtrl">
    {{ message }} <!-- 輸出：手動初始化成功 -->
  </div>
  <script>
    // 定義模塊
    var app = angular.module('manualApp', []);
    app.controller('MainCtrl', function($scope) {
      $scope.message = '手動初始化成功';
    });
    
    // DOM加載后手動啟動
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById('appRoot'), ['manualApp']);
    });
  </script>
</body>
</html>

三、阿里云如何賦能AngularJS應用部署與優化