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

我已经看到了几个AngularJS项目模板：官方网站上的seed project，生成的Yeoman和AngularFun。推荐的可扩展AngularJS项目结构？

有没有其他（非）有见识的模板，我应该看看，或者你会为可扩展的AngularJS项目建议任何相关模式？

通过可扩展我的意思是

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

来源

2012-11-23 luisfarzati

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

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

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

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

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

来源

2012-11-23 08:32:56

作为一个额外的评论：按需加载并没有在AngularJS中得到很好的支持，正如此处所解释的那样：http://stackoverflow.com/a/12646328/1418796 –

您的项目非常有用，谢谢！我喜欢你分割模块的方式。我使用的是Yeoman（基于Grunt），我仍然在处理关于构建过程的几个问题，但总的来说，我正在关闭，以实现一个很好的第一次尝试！ – luisfarzati

我会说你的所有观点都可以很容易地实现，至少在没有对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模块achived。

我一直在想，开始一个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应用引导
有一些共同的指令和组件
当引导登录后，你可以过滤的意见，即允许用户看到
一切ngView内将按需加载

当然，那么你的应用程序应该是非常大的，这样做的一切都会是有道理的这些额外的工作的;）

来源

2012-11-23 19:34:12 matys84pl

其实我想添加一些这些作为评论什么pkozlowski在前面的答案写了什么，但我还没有被允许在任何地方发表评论;） – matys84pl

你可以发布更多关于按需加载AngularJS指令的信息吗？据我所知，这是不可能的，没有真正令人讨厌的技巧。 –

当然，我设法通过持有$ compileProvider的引用来做到这一点，直到我加载了指令模块，代码在这里：https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/blob/ master/app/js/utils/lazy-directives.js。还请查看route-congif.js - 这是我使用它的地方。我正在并行加载所有3个文件（部分，控制器和指令）。 – matys84pl

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

只是想我会提到我们在开源基于AngularJS的项目hawtio中所做的工作。我们已经将模块化带入了一个极端:) hawtio使用plugins，它可以在正在运行的服务器的运行时发现（例如，在运行时部署和取消部署UI功能）。所以基于一些REST查询或JMX检测，我们可以动态地或者移除插件。

例如这里是我们所有的current default plugins

就布局而言，每个插件都有自己的代码目录（js），html partials（html）以及其他任何内容（例如css/img目录），这使得事情变得更加容易，模块化。例如这里有camel plugin，它有自己的html，js和img文件夹。

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

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

来源

2013-02-13 12:19:58

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

来源

2013-06-26 06:31:26 ottsch

什么被认为“大”足以保证ng-boilerplate？ – Luke

这个项目听起来前途http://vesparny.github.io/ng-kickstart

它使你能够通过功能来分割你的代码库，并保持你的代码重用，以及livereloading得益于定制咕噜任务为了那个原因。

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

来源

2013-12-09 11:54:58

警告：无耻的插头。

你一定要看看generator-angular-xl。

它特别针对创建大规模AngularJS应用程序，通过对代码进行逻辑分组，脚手架单元测试以及自动将js和css文件注入index.html等。它还可以通过为您的数据创建模拟后端在开发也可以成为全面应用程序的原型时，它是一个很好的选择。它不会生成任何后端代码，因此您可以自由选择所需的任何后端技术。

来源

2014-03-11 15:19:37

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

回答

相关问题