如何为Angular多模块页面拆分文件

How to split files for Angular multiple modules page?

本文关键字：拆分 文件 模块 Angular      更新时间：2023-09-26

我已经按照这个答案在AngularJS中制作了多个模块，但当我将Angular代码拆分为多个js文件时，它不起作用。

引导程序.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>

结果：第二个模块不工作。

内联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>

结果：它起作用了。

你知道我错过了什么吗？

在第一种情况下，您将在加载dom之前执行bootstrap.js。这应该有效：

<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>

或者，您可以将引导函数封装到文档中，并将bootstrap.js脚本保留在标题部分：

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