如何组织角度的.JS文件?

时间:2012-11-12 15:20:58

标签: javascript angularjs

嘿伙计们我是AngularJS的新手,一般来说是JS。我来自Java世界,因为我曾经用GWT实现客户端。

现在当我搬到AngularJS时,我面临这个问题:

如何整理.js文件?在java中,每个类都有它的.java文件,但是,如果在JS中实现这种做法,则会有很多http请求来获取.js文件,因为每个类(Function)都驻留在单独的.js文件中。

此外,应该对文件进行组织,以便其他程序员可以在它们之间进行分配和导航,并能够阅读和理解这些文件的相关内容。

5 个答案:

答案 0 :(得分:7)

不幸的是,有大约一百万种方法可以做到这一点。由于角度使用模块和所有角度代码都应该在模块中,因此使用javascript命名空间的IMO将成为模块命名空间的辅助。

看看这个项目(angular-grunt-coffeescript)。这是我尝试解决这个问题。我使用coffeescript,但同样的想法可以应用于.js项目。

还有angular-sprout试图扩展'angular-seed'项目以使其可用于大型应用程序 - angular-sprout是js。

更新

Yeoman看起来可能会成为创建骨架AngularJS项目的标准,因此应该为所有内容提供“主页”(我个人还没有使用它)。看看here

答案 1 :(得分:4)

对于大型项目,我建议每个模块使用一个目录,每个“东西”使用一个文件(服务,值,工厂,控制器......)。 Html partials应该与它们各自的指令或控制器一起存储在每个模块目录中。

我们一直在使用这种方法,它确实很好。该项目由maven构建(Java用于后端),并且所有js文件在每个角度应用程序中连接成一个文件,另外一个文件用于角度应用程序之间共享的组件。如果你是maven,请查看yuicompressor-maven-plugin中的汇总。

因为我们每个模块有几个js文件,所以我们需要一种方法来创建一个模块一次,然后我们在每个js文件中注册“thing”。

我们提出的解决方案是在每个模块目录中使用模块创建语句添加一个名为0-module.js的文件。 yuicompressor-maven-plugin会首先将其添加到聚合文件中。

示例文件结构:

mymodule/
   0-module.js
      >angular.module('mymodule', []); //Create module
   MyController.js
      >angular.module('mymodule').controller("MyController", [... // Register MyController
   myTemplate.html

答案 2 :(得分:3)

我通常将代码拆分为包含与该命名空间相关的类的命名空间。我将每个命名空间放在一个单独的JS文件中。

因此,如果您有名为LinkedList,BinaryTree,KDTree等的类,则可以将它们捆绑在DataStructures命名空间中并将其保存在

datastructures.js

所以你可以通过说:

来实例化
var kd = new Datastructures.KDTree();

通过保持命名空间名称和文件名相同,您可以轻松找到实际的代码片段而无需强大的IDE,因为名称本身就是自我描述的。

希望这有帮助!

答案 3 :(得分:2)

我建议使用Yeoman,因为我认为开发人员也是这样(他们提倡相当多,请查看他们的gPlus页面,或者他们的video。它允许脚手架(遵循Angular-Seed的结构),测试,通过JS服务器进行实时预览,以及部署 - 它将所有.js文件连接在一起,避免了多个请求的问题。看看吧!

答案 4 :(得分:0)

当前这个问题发生了,为了今天的问题,这里是我使用Angular的不同最佳方式的集合,包括他们的文件结构 http://www.dancancro.com/comparison-of-angularjs-application-starters/