AngularJS：服用AngularJS充分利用功能/结构 [英] AngularJS: taking full advantage of AngularJS features/structures

问题描述

我工作的一个Web应用程序与我刚开始学习而回AngularJS。我觉得这是非常有用的，但它工作了几天后，我想通了应用程序是会得到全乱了早晚，因为我写了我所有的'后台'code在一个控制器。
该应用程序使用大量$ HTTP请求来获取/后/删除/把自/至远程服务器，哪些是需要这种或那种方式来操纵页面也有很多变数范围的数据。

I am working on a web app with AngularJS which I just started learning a while back. I find it extremely useful but after working on it for few days, I figured that the app is going to get all messed up sooner or later, since I wrote all my 'backend' code in one controller. The app uses lots of $http requests to get/post/delete/put data from/to remote servers and also many scope variables which are needed to manipulate page in one way or another.

我查了很多关于AngularJS教程/信息网站（类似的问题，的伟大的博客帖子例如），但我还是不知道如何实现我的应用程序中我自己的。我想知道什么是使用自己的服务/模块/指令/工厂通常情况下？我希望能调整自己的code一点点所以一切都显得更有组织性;此刻我觉得在一个地方，我没有充分考虑所有我的code AngularJS的优势，而无需使用任何服务/模块除了我的主要的应用程序模块和控制器和内置的$ HTTP。

I checked lots of tutorials/info sites on AngularJS (similar question, great blog post for instance) but I am still not sure how to implement one of my own within my app. I was wondering what is the usual case with using your own service/module/directive/factory? I am hoping to restructure my code a little bit so everything is going to seem more organized; at the moment I think I am not fully taking advantage of AngularJS with all my code in one place and without using any services/modules besides my main app module and controller and built-in $http.

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

So you can better understand my problem, so far I only use two javascript files, first one being app.js :

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

和第二个是controller.js（当然我可以只使用1个文件此）：

and the second one being controller.js (I could of course use only 1 file for this):

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的所有功能。例如：我不的使用路由我也许应该（网址保持不变所有的时间？）。我还没有使用angularJS任何其他高级功能，如定制服务/指令/模块。

Everything works as it should this way, but I think this approach is not using all the capabilities of AngularJS. For instance: I don's use routing which I probably should?(url stays the same all the time). I also don't use any other advanced features of angularJS such as custom services/directives/modules.

那么请问：我该如何调整自己的code，以便它使用更多的AngularJS的功能，因此它保持可读性？你什么时候通常会创建自己的服务/模块/工厂？
我有点没把握整个事情上AngularJS现场，可能是因为我一开始没有足够的知识太早发展，现在我很难得到它（是太多成双向结合，并立即开始编码）。

So I ask: how can I restructure my code so that it uses more of AngularJS features and so that it stays readable? When do you usually create your own service/module/factory ? I kind of didn't grasp the whole thing on AngularJS site, probably because I started developing too early with not enough knowledge and now I hardly get it (was too much into two-way-binding and started coding immediately).

关于这个问题的任何帮助都AP preciated。

Any help on the subject is appreciated.

编辑：
好吧，我知道我应该清楚一些事情：我的主要问题不在于外部文件夹/文件结构，而code结构本身。现在我有一个控制器包含每一个变量（30+）和功能在我的web应用程序使用，如登录功能，注销功能，功能显示/隐藏页面的某些部分，功能添加从服务器/删除数据/等等…
我希望能够组织这些函数/变量为一些莫名其妙独立的部分，但我不知道怎么样。

OK, I see I should clear some things up: my main problem is not the outside folder/file structure, but the code structure itself. Now I have one controller which contains every variable (30+) and function to use in my web app, such as login function, sign out function, functions for showing/hiding parts of page, function to add/delete data to/from server etc… I would like to be able to structure these functions/variables as some independent parts somehow, but I am not sure how.

EDIT2：
我想通了如何使用服务实例，但不幸的是你不能叫服务职能的内部意见，如直接NG点击......你只能调用$范围变量这实际上是逻辑...不幸的是我还是不知道如何安排我的code显得更具可读性和结构性

I figured how to use services for instance, but unfortunately you cannot call service functions inside views, such as with ng-click directly... you can only call $scope variables which is logical actually... unfortunately i still don't know how to organize my code to seem more readable and structured

推荐答案

有许多关于如何组织AngularJS code意见。看看这些博客文章：

There are lots of opinions about how to organize AngularJS code. Have a look at these blog posts:

• code组织大型AngularJS和JavaScript应用程序


• code在角组织

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

也有很多示例项目，在那里，展示各种code组织方案。

There are also lots of sample projects out there that showcase various code organization schemes.

看看角种子项目：

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

一替代上述是角企业种子：

One alternative to the above is angular-enterprise-seed:

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

您没有提到你所使用的后端，但也有类似的种子项目展示了AngularJS +后端]推荐code组织方案。例如，如果你使用防爆press.js，你可能想看一看角前preSS种子：

You didn't mention what backend you're using, but there are also similar "seed" projects demonstrating the recommended code organization scheme for AngularJS + [your backend]. For instance, if you're using Express.js, you might want to take a look at angular-express-seed:

https://github.com/btford/angular-ex$p$ PSS种子

这篇关于AngularJS：服用AngularJS充分利用功能/结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！