如何链接每个文件的angularjs组件

Posted 2023-02-23

【中文标题】如何链接每个文件的angularjs组件

【英文标题】：How to link angularjs component per file

【发布时间】：2015-08-15 00:17:06

【问题描述】：

我是 angularjs 的新手，我在多个地方读到过，我们应该旨在为每个文件定义一个组件。当您的组件很少时，这可以正常工作，但是一旦您开始拥有超过 5 个的组件，那么将它们链接起来将是一场噩梦。 示例：-

如果我在 file1.js 中定义了一个控制器

angular.module('module-name')
    .controller('controller1', function (service1) 
        return 
            ....
        ;
    );

以及在另一个名为 file2.js 的文件中定义的服务

angular.module('module-name')
    .factory('service1', function () 
        return 
            ....
        ;
    );

现在在我的 html 文件中我需要同时包含两者

<script src="file1.js"></script>
<script src="file2.js"></script>

很快就会变得一团糟。

我们如何解决这个问题？我在 ASP.NET MVC 中使用它。非常感谢您的帮助。

谢谢

【问题讨论】：

在服务器端做捆绑并在客户端加载文件asp.net/mvc/overview/performance/bundling-and-minification?

谢谢。这似乎有效

接受我添加的答案并关闭此问题。

【参考方案1】：

当您使用 Asp.net c# 时，您可以使用服务器端 Bundling & Minification

在你的Global.asax 中使用BundleTable.EnableOptimizations = true; 在服务器端启用捆绑

将所有CSS 和JS 文件捆绑在单独的包中。之后使用

在.cshtml 页面上引用它们

使用@Scripts.Render("bundleName.js")引用捆绑的JS文件

欲了解更多信息look at this.