AngularJS 中啟動多個 ng-app 的問題

最近正在學習 AngularJS，在編寫一個小 Demo 程序時遇到一個問題，就是當在單個頁面上加載了多個 ng-app 時，只有第一個會起作用。

查詢后找到答案：在 angular 頁面中，每一個 HTML 頁面只有一個 ng-app 會被自動裝載。

所以我們有幾種方案來解決這個問題。

　　1. 可以簡單的將多個 ng-app 合並成為一個根模塊。

　　2. 可以手動裝載除了第一個以外的多個 ng-app。

 

ng-app 是 angular 中的一個十分重要的標簽。一個 ng-app 應當對應一塊業務邏輯，所以一個頁面是可能需要使用多個模塊的。為了避免不同模塊間代碼的耦合，我個人更偏向於第二種做法。代碼如下：

    <div id="app1div" ng-app="myApp1" ng-controller="personCtrl">
        <p>personCtrl</p>
        First name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        Full Name: {{fullName()}}
    </div>

    <br><br>
    <div id="app2div" ng-app="myApp2" ng-controller="personCtrl">
        <p>personCtrl</p>
        First name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        Full Name: {{fullName()}}
    </div>

    <script>
        var app1 = angular.module('myApp1', []);
        var app2 = angular.module('myApp2', []);

        app1.controller('personCtrl', function($scope){
            $scope.firstName = 'Aaron';
            $scope.lastName = 'S';
            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }
        });

        app2.controller('personCtrl', function($scope){
            $scope.firstName = 'Andy';
            $scope.lastName = 'W';
            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }
        });
        angular.bootstrap(document.getElementById("app2div"), ['myApp2']);
    </script>