How to split files for Angular multiple modules page?

Question

I've followed this answer for making a multiple modules in AngularJS, but it doesn't work when I split the Angular codes into multiple js files.

Bootstrap.js

angular.bootstrap(document.getElementById("App2"),['namesList']);

HTML

<html>
<head>
    <script src="components/angular/angular.js"></script>
    <script src="scripts/module1.js"></script>
    <script src="scripts/module2.js"></script>
    <script src="scripts/bootstrap.js"></script>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div id="App2" ng-app="namesList" ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="_name in names">
            <p>{{_name.username}}</p>
        </div>
    </div>
</body>
</html>

Result: the second module doesn't work.

Inline script

<html>
<head>
    <script src="components/angular/angular.js"></script>
    <script src="scripts/module1.js"></script>
    <script src="scripts/module2.js"></script>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div id="App2" ng-app="namesList" ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="_name in names">
            <p>{{_name.username}}</p>
        </div>
    </div>
    <script>
            angular.bootstrap(document.getElementById("App2"),['namesList']);
    </script>
</body>
</html>

Result: it works.

Any ideas what I have missed?

score 2 · Accepted Answer · answered Oct 30 '14 at 15:45

in the first case you are executing the bootstrap.js before the dom gets loaded. This should work:

<html>
<head>
    <script src="components/angular/angular.js"></script>
    <script src="scripts/module1.js"></script>
    <script src="scripts/module2.js"></script>
</head>
<body>
    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div id="App2" ng-app="namesList" ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="_name in names">
            <p>{{_name.username}}</p>
        </div>
    </div>
    <script src="scripts/bootstrap.js"></script>
</body>
</html>

alternatively you can wrap your bootstrap function into document ready and leave the bootstrap.js script in the head section:

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("App2"),['namesList']);
});

How to split files for Angular multiple modules page?

1 Answers1