总结AngularJS开发者最常犯的十个错误

前言

AngularJS易于开发、较多的特征及较好的效果导致了较多的应用，伴随而来的是一些陷阱。本文列举了AngularJS的一些共同的易于出问题的地方，下面来一起看看吧。

一、MVC目录结构

AngularJS，直白地说，就是一个MVC框架。它的模型并没有像backbone.js框架那样定义的如此明确，但它的体系结构却恰如其分。当你工作于一个MVC框架时，普遍的做法是根据文件类型对其进行归类：

templates/ _login.html _feed.htmlapp/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js

看起来，这似乎是一个显而易见的结构，更何况Rails也是这么干的。然而一旦app规模开始扩张，这种结构会导致你一次需要打开很多目录，无论你是使用sublime，Visual Studio或是Vim结合Nerd Tree，你都会投入很多时间在目录树中不断地滑上滑下。

与按照类型划分文件不同，取而代之的，我们可以按照特性划分文件：

app/ app.js Feed/ _feed.html FeedController.js FeedEntryDirective.js FeedService.js Login/ _login.html LoginController.js LoginService.js Shared/ CapatalizeFilter.js

这种目录结构使得我们能够更容易地找到与某个特性相关的所有文件，继而加快我们的开发进度。尽管将.html和.js文件置于一处可能存在争议，但节省下来的时间更有价值。

二、模块

将所有东西都一股脑放在主模块下是很常见的，对于小型app，刚开始并没有什么问题，然而很快你就会发现坑爹的事来了。

var app = angular.module('app',[]);app.service('MyService', function(){ //service code});app.controller('MyCtrl', function($scope, MyService){ //controller code});

在此之后，一个常见的策略是对相同类型的对象归类。

var services = angular.module('services',[]);services.service('MyService', function(){ //service code}); var controllers = angular.module('controllers',['services']);controllers.controller('MyCtrl', function($scope, MyService){ //controller code}); var app = angular.module('app',['controllers', 'services']);

这种方式和前面第一部分所谈到的目录结构差不多：不够好。根据相同的理念，可以按照特性归类，这会带来可扩展性。

var sharedServicesModule = angular.module('sharedServices',[]);sharedServices.service('NetworkService', function($http){}); var loginModule = angular.module('login',['sharedServices']);loginModule.service('loginService', function(NetworkService){});loginModule.controller('loginCtrl', function($scope, loginService){}); var app = angular.module('app', ['sharedServices', 'login']);

当我们开发一个大型应用程序时，可能并不是所有东西都包含在一个页面上。将同一类特性置于一个模块内，能使跨app间重用模块变得更容易。