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

Question

我见过几个AngularJS项目模板:官方网站上的种子项目,Yeoman的生成和AngularFun.

是否有任何其他(非)固定的模板我应该看一下,或者您建议的可扩展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在评论中所建议的那样,已经有了一些问题的描述,你会看到我也在努力解决这个问题,并且实际上已经有了一些结果.我有一个使用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中的所有内容都将按需加载

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

Answer 3

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