javascript - AngularJS:充分利用 AngularJS 的特性/结构

Question

我正在使用 AngularJS 开发一个网络应用程序，我刚刚开始学习它。我发现它非常有用，但在使用它几天后，我认为该应用程序迟早会变得一团糟，因为我在一个 Controller 中编写了所有“后端”代码。该应用程序使用大量 $http 请求从/向远程服务器获取/发布/删除/放置数据，还使用许多以某种方式操作页面所需的范围变量。

我检查了很多关于 AngularJS 的教程/信息站点(例如 similar question、great blog post)，但我仍然不确定如何在我的应用程序中实现我自己的一个。我想知道使用您自己的服务/模块/指令/工厂的常见情况是什么？我希望稍微重组我的代码，这样一切看起来更有条理；目前我认为我没有在一个地方充分利用 AngularJS 的所有代码，并且除了我的主要应用程序模块和 Controller 以及内置 $http 之外没有使用任何服务/模块。

所以你可以更好地理解我的问题，到目前为止我只使用了两个 javascript 文件，第一个是 app.js :

var app = angular.module('MyAppName',[]);

第二个是 controller.js(我当然可以为此只使用 1 个文件):

app.controller("MyController", function($scope, $http){
    // all my functions/variables in here
   // I initialize them  with $scope.someName = … if they are needed within this controller view.
  //  If they are not needed within view I initialize them (functions for instance)
 // as functionName = function(){};
}

一切都按这种方式工作，但我认为这种方法并没有使用 AngularJS 的所有功能。例如:我不使用我可能应该使用的路由？(url 始终保持不变)。我也不使用 angularJS 的任何其他高级功能，例如自定义服务/指令/模块。

所以我问:我怎样才能重组我的代码，以便它使用更多的 AngularJS 特性并保持可读性？你通常什么时候创建自己的服务/模块/工厂？我有点没有掌握 AngularJS 网站上的全部内容，可能是因为我太早开始开发，没有足够的知识，现在我几乎不了解它(太过双向绑定(bind)并立即开始编码)。

感谢任何有关该主题的帮助。

编辑:好的，我知道我应该弄清楚一些事情:我的主要问题不是外部文件夹/文件结构，而是代码结构本身。现在我有一个 Controller ，其中包含我的网络应用程序中使用的每个变量(30+)和函数，例如登录函数、注销函数、显示/隐藏页面部分的函数、向服务器添加/删除数据的函数ETC…我希望能够以某种方式将这些函数/变量构造为一些独立的部分，但我不确定如何。

编辑 2:例如，我想出了如何使用服务，但不幸的是你不能在 View 中调用服务函数，比如直接使用 ng-click ......你只能调用 $scope 变量，这实际上是合乎逻辑的......不幸的是我仍然不知道如何组织我的代码以使其看起来更具可读性和结构化

Answer 1

关于如何组织 AngularJS 代码有很多意见。看看这些博客文章:

• Code Organization in Large AngularJS and JavaScript Applications
• Code Organization in Angular

还有很多示例项目展示了各种代码组织方案。

看看 angular-seed 项目:

https://github.com/angular/angular-seed

上面的一个替代方法是 angular-enterprise-seed:

https://github.com/robertjchristian/angular-enterprise-seed

您没有提到您使用的是什么后端，但也有类似的“种子”项目展示了 AngularJS + [您的后端] 的推荐代码组织方案。例如，如果您使用的是 Express.js，您可能想看看 angular-express-seed:

https://github.com/btford/angular-express-seed