Html 构建AngularJS应用程序

我在使用AngularJs方面完全是新手，尽管我已经完成了教程，但我的脑海中仍然有大量未回答的问题。我现在主要关心的是如何将我的应用程序划分为模块

基本上，我需要构建一个应用程序，它将充当各种应用程序的门户，每个应用程序代表一个业务功能（有时彼此之间几乎没有关系）

在本教程中，它们展示了如何创建一个具有多个视图的应用程序。我需要的是一个有多个模块的应用程序，每个模块都有自己的视图（我可能也有共享视图）

有人开发过这种结构的应用程序吗？你能分享你的经验和你是如何组织事情的吗

---

AngularJS种子项目（）很好，但它并没有真正展示如何构建复杂的应用程序

您应该转到yeoman和yeoman生成器结构：，它比angular seed更适合安装应用程序。对于不同的业务模块，您应该创建不同的应用程序和共享服务和指令

我发现yeoman generator采用的方法的缺点是，它没有真正与angular模块对齐，因此它对我来说不是很有凝聚力。因此，随着项目变得越来越大，您正在处理一个特定的组件，我发现自己在源代码树中翻了很多

我最近遇到了一种不同的方法。这种方法通过角度模块对文件进行分组，让我感觉更加内聚。一个可能的缺点是，你需要建立一个网站，你不能只是在原地运行它。不过，该项目中的grunt watch任务有助于实现这一点

[编辑] 我在我的博客上写了一篇文章来详细解释事情：

现在，您可以使用代码示例

我会回答我自己的问题。不是因为我认为这是最好的方法，而是因为这是我决定采用的方法

这就是我如何将业务模块划分为文件夹的方法

• 应用程序
  • 业务模块
    • 控制器
      • index.js
      • firstCtrl.js
      • secondCtrl.js
    • 指令
    • 服务
    • 观点
    • 过滤器
  • 另一个业务模块
  • 共享
  • app.js
  • index.html

每个模块都有自己的控制器、指令等文件夹结构

每个文件夹都有一个index.js文件，然后是其他文件，用于分隔每个控制器、每个指令等

js文件包含模块的定义。例如，对于上述businessModule的控制器：

angular.module('myCompany.businessModule.controllers', []);

这里没有依赖项，但可能有任何依赖项

然后在firstCtrl.js中，我可以重用该模块并将控制器添加到其中：

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

然后app.js通过将所有模块添加到dependencies数组来聚合我想要用于我的应用程序的模块

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

共享文件夹包含的指令和其他内容不是特定于业务模块的，可以在任何地方重用

同样，我不知道这是否是最好的方法，但它确实对我有效。也许它能激励其他人

编辑

由于index.js文件包含模块声明，因此在任何其他应用程序脚本之前，必须在html页面中引用它们。为此，我使用了ASP.NET MVC 4的iHandleOrder：

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}

var bundle=newscriptbundle（“~/bundles/app”）{order=new asisbundleorder（）}；
bundles.Add（bundle.IncludeDirectory（“~/app”，“*.js”，true））；
公共类AsisBundleOrder:IBandleOrder
{
公共IEnumerable OrderFiles（BundleContext，IEnumerable文件）
{
files=files.OrderBy（x=>x.Name==“index.js”？0:1）；
归还文件；
}
}

在大多数情况下，山姆的方法似乎是可行的。当前的Angular文档将其设置为每个控制器、服务等的模块，但这与谷歌的米什科本人相矛盾

在Miško最近的一段视频中，他展示了模块的结构如何布局，以便于测试和扩展。请记住，在angular应用程序中，模块的结构不会影响性能

从开发angular应用程序开始，出于上述原因，我建议使用最佳实践方法。您可能希望创建自己的节点脚本来生成控制器等，其中可能包括您希望在其中创建控制器的模块和名称，然后自动生成控制器和正确的测试规范创建

---

如果你想对设置有一个很好的了解，这里有一个关于根据你认为项目的方向设置项目的对于那些感兴趣的人，我制作了一个“模块化”版本的Angular Seed，它更符合Misko的最佳实践：

---

它的设置与早午餐，所以你很快得到页面重新加载，测试运行和更多。您可以快速开发，如果您遵循代码中的模式，您的应用程序应该可以很好地扩展。享受吧

如果你有多个不相关的应用程序，你不需要创建一个大应用程序，只需为每个企业创建一个应用程序即可。应用程序可以重用其他应用程序服务、控制器和指令。请记住，“web应用程序”仍然是一个网页，不管怎样，它不像桌面软件。我可能会错误地表达自己。我只有一个应用程序，但它很大。我想把它分成不同的业务模块。每个业务模块将包含自己的一组视图、指令、控制器等。。。但最终，它还是同一个web应用程序，只有一个入口点。这是一个好的方法吗？我应该如何组织我的代码？不要紧，这取决于您如何按照自己的意愿分割文件。有些人对每个服务、控制器或指令使用1个文件，有些人使用sp