Question

我见过几个AngularJS项目模板：官方网站上的seed project，Yeoman生成的AngularFun和{{3}}。

我是否应该查看其他（非）固定的模板，或者您建议的可扩展AngularJS项目的任何相关模式？

可缩放我的意思是

能够在自己的文件中拆分控制器，指令，过滤器等;
能够按需加载这些文件，而不是让浏览器加载所有内容;
能够拥有通用的跨项目组件（例如，通用指令，过滤器或服务）。

Answer 1

你可以看一下Pawel Kozlowski和我在一起的演示应用程序： https://github.com/angular-app/angular-app

它不提供任何按需加载文件的支持，但您可以看到我们将模块吐出到单独的文件中，并将测试设置为第一类组件。我们有一个构建过程（使用Grunt）来连接（并在发布时缩小）js文件，并且可以运行单元和端到端测试。

我们选择将我们的模块分成两组功能应用领域和常见的跨领域库代码，而不是简单地分为指令，过滤器，服务等。在功能区域，我们可能有一些服务，指令，控制器和模板。

这使得针对功能区域的开发更容易，因为所有相关项目都在一个地方。

该项目依靠简单的nodeJS服务器来提供文件（支持HTML5模式深层链接），并提供身份验证和授权服务。

Answer 2

我会说你的所有观点都可以轻松实现，至少不需要对Angular进行任何修改。

能够在自己的文件中拆分控制器，指令，过滤器等;

这当然可以使用基本的Angular来完成，因为您可以根据需要包含尽可能多的带有控制器/服务的脚本标签。当然它根本不可扩展，所以最好的选择是使用AMD模块，比如RequireJS。这是具有这种配置的种子之一：https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

能够按需加载这些文件，而不是让浏览器加载所有内容;

正如 pkozlowski 在评论中提到的那样，已经有了一些问题的描述和条目，你会看到我也在努力解决这个问题，并且实际上已经有了一些结果。 I have a working example of loading controllers, templates and directives on demand using RequireJS和路由配置的解析参数。

能够拥有通用的跨项目组件（例如，通用指令，过滤器或服务）

通过使用RequireJs模块可以轻松解决以前的问题。

我一直想知道开始一个agularjs-lazy-seed项目是不是一个好主意？对此有什么需求吗？我们甚至可以更进一步，将路径配置移到通常配置之外，假设你有一个views.json文件（理想情况下是一个用json响应的服务），你想要包含在你的应用程序中的视图：

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

这样你可以：

在分离中开发视图并基于此json bootstrap构建应用程序
有一些共同的指令和组件
登录后的bootstrap，您可以过滤允许用户查看的视图
ngView中的所有内容都将按需加载

当然，你的应用程序应该非常大，以便完成所有这些额外的工作是有意义的;）

Answer 3

你应该试试ng-boilerplate。更大的AngularJS项目最有希望的kickstart模板：http://joshdmiller.github.io/ng-boilerplate/#/home

Answer 4

我同意其他人到目前为止所说的观点;它很容易将事物拆分成单独的模块，并使模块相互依赖于常规的AngularJS。然后，您的JS代码可以拆分为您喜欢的任何文件和目录树。

我想我会提到我们在基于AngularJS的开源hawtio项目中所做的工作。我们已经将模块化变得有点极端了:) hawtio使用plugins，它可以在运行时在运行的服务器中发现（例如在运行时部署和取消部署UI函数）。因此，基于一些REST查询或JMX检测，我们可以动态地或删除插件。

e.g。这是我们所有的current default plugins

在布局方面，每个插件都有自己的代码（js），html partials（html）和其他任何目录（例如css / img目录），这使得保持简洁和模块化变得容易。例如这是camel plugin，它有自己的html，js和img文件夹。

然后一个特定的插件定义了自己的AngularJS模块，指令，过滤器，然后依赖于其他模块。

到目前为止，我们还没有为源文件提供非常多的有用naming conventions :)。我们发现每个控制器编写一个文件似乎最简单;但是除了fooPlugin.ts文件和helpers.ts文件（对于一般模块特定的辅助函数），我们到目前为止还没有找到任何其他有意义的命名约定。

Answer 5

这个项目听起来很有希望http://vesparny.github.io/ng-kickstart

它使您能够按功能拆分代码库并保持代码可重用，以及通过自定义Grunt任务进行实时重载。

该项目还面向单元测试，并附带自定义“dist任务”，可让您创建优化的生产就绪版本。

Answer 6

警告：无耻插头。

您一定要查看generator-angular-xl。

它的目的尤其是通过逻辑分组代码，脚手架单元测试以及自动将js和css文件注入index.html等来创建大规模AngularJS应用程序。它还可以通过为您的数据创建模拟后端来解决问题，在开发可以成为完整应用程序的原型时，有效地使其成为一个很好的选择。它不会生成任何后端代码，因此您可以自由选择所需的任何后端技术。

推荐可扩展的AngularJS项目结构？

6 个答案: