Question

我知道还有其他线程与如何在root文件夹中组织脚本并与视图交互（使用ng-route）相关。

我计划使用这种文件结构来保持我的脚本在单个ng-app值内结构化。 然而，如有必要，可以重新考虑。

root
|- app
   |- controller   // where all controllers per view are placed
   |- factory           
   |- directive    
   |- config 
   |- // other angular features
   app.js          // routing implementation
|- css
   |- lib
   |- view
|- js
   |- lib
   |- view  
|- view
   |- view1.html
   .
   |- viewN.html
index.html

基本上index.html的内容就像这样

<!doctype html>
<html lang="en">
<head>
    <!-- GLOBAL STYLESHEET LINKS -->
    <link rel="stylesheet" type="text/css" href="css/lib/*.css" />
</head>
<body ng-app="appName">
    <div ng-view></div>
    <zb-route-styles></zb-route-styles>
    <!-- Library Import -->
    <script type="text/javascript" src="js/lib/*.js"></script>
</body>
</html>

/root/app/app.js会有这样的内容：

var app = angular.module("appName", ["ngRoute", "routeStyles"]);
app.config(routeConfig);
app.factory("FactoryName", factoryName);
app.controller("ViewNCtrl", viewNCtrl);

我的问题是：

我的文件结构是否合适？
使用这种结构有哪些缺陷？
由于我使用Angular Route Styles，是否有类似的控制器实现，因此我不需要在路由配置上index.html上包含控制器脚本？

所以基本上不是这个：

/root/index.html <body>

<script src="app/controller/*.js"></script>

此语法是否有任何角度库

/root/app/config/routeConfig.js

.when("/view1", {
    templateUrl: "view/view1.html",
    controller: "View1Ctrl",
    css: "css/view/view1.css,
    js: "app/controller/view1.js"
})

如果您有澄清，请为我发表评论以解决问题。

Answer 1

构建AngularJS应用程序的方法有很多种。两种主要方式是按类型和组织进行组织。按功能组织。

按TYPE：

root/
|-app/
  |-controllers/
  |-services/
  |-views

按功能：

root/
|-app/
  |-checkout/
  |-dashboard/
  |-users/

虽然您提供的示例是按类型，但我建议按功能进行构建。它可以更好地组织，以便在扩展时处理您的应用。此外，当新成员加入团队时，更容易对代码库进行排序。

AngularJS文件结构

1 个答案: