46

我看过几个AngularJS的项目模板：官网的seed项目，Yeoman的生成，AngularFun。

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

我的意思是可扩展的

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

6 回答 6

30

您可以查看 Pawel Kozlowski 和我正在组合的演示应用程序： https ://github.com/angular-app/angular-app 。

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

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

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

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

于 2012-11-23T08:32:56.490 回答
8

我想说的是，您的所有观点都可以轻松实现，至少无需对 Angular 进行任何修改。

  • 能够在自己的文件中拆分控制器、指令、过滤器等；

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

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

正如pkozlowski在评论中建议的那样，已经有一些关于问题的描述的条目，你会看到我也在努力解决这个问题，并且实际上有一些结果。我有一个使用 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 构建应用程序
  • 有一些共同的指令和组件
  • 登录后引导时，您可以过滤允许用户查看的视图
  • ngView 中的所有内容都将按需加载

当然，您的应用程序应该非常大，以便完成所有这些额外的工作；）

于 2012-11-23T19:34:12.463 回答
8

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

于 2013-06-26T06:31:26.213 回答
4

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

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

例如，这是我们当前所有的默认插件

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

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

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

于 2013-02-13T12:19:58.820 回答
1

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

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

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

于 2013-12-09T11:54:58.520 回答
1

警告：无耻的插头。

您绝对应该检查generator-angular-xl。

它旨在通过对代码进行逻辑分组、构建单元测试以及自动将 js 和 css 文件注入 index.html 等来创建大型 AngularJS 应用程序。它还通过为您的数据创建模拟后端来帮助您，有效地使其开发原型时的一个不错的选择，它也可以成为成熟的应用程序。它不会生成任何后端代码，因此您可以自由选择所需的任何后端技术。

于 2014-03-11T15:19:37.203 回答