北京阿里云代理商：AngularJs bootstrap詳解及示例代碼

時(shí)間：2025-06-27 17:42:01 點(diǎn)擊：

北京阿里云 代理商：AngularJS Bootstrap詳解及示例代碼

一、AngularJS Bootstrap核心概念解析

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

自動初始化：通過ng-app指令聲明應(yīng)用根節(jié)點(diǎn)，AngularJS在DOM加載完成后自動初始化。
手動初始化：使用angular.bootstrap()方法精準(zhǔn)控制啟動時(shí)機(jī)和多個(gè)應(yīng)用實(shí)例。

手動初始化優(yōu)勢明顯：避免全局污染、支持多應(yīng)用共存、可在依賴加載完成后啟動，尤其適合企業(yè)級復(fù)雜項(xiàng)目。

二、AngularJS Bootstrap示例代碼實(shí)戰(zhàn)

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>