Question

我来自Backbone和JavascriptMVC的世界。但我真的很想转而使用AngularJS。到目前为止，我有一个大问题让我无法转换。

我创建了单页应用。让我们假装它包含一个标签模块，一个文件上传模块和一个文件列表模块。

我在Backbone中做的是将每个作为独立模块拆分用自己的视图模板，viewcontroller等。这样，我就可以在我的应用程序中使用该模块的几个位置。模块不知道除了它自己以外的任何东西。

如何在AngularJS中处理这个问题？是否可以为每个模块创建一个angular.module（例如标签模块）？

我觉得他们告诉如何在文档中的模块中创建许多控制器。但这听起来并不像我需要的那样。或者我在这里误解了一些主要概念？

编辑：我做了一些更多的研究。它看起来像指令是我正在寻找的。虽然AngularJS中的模块代表整个Web应用程序。因此，名称'组件'和'模块'的混合使我感到困惑。

我现在正走在正确的道路上吗？

Answer 1

您绝对可以定义模块，并在应用程序级别包含模块，然后通过依赖注入，您可以让控制器使用他们需要的模块。

我有一个小概念验证示例，我正在努力学习角度（它非常脏和我的游乐场）：

http://plnkr.co/edit/1jGqaB00OznAUpyPZVT3

我的应用定义如下：

angular.module('myApp', ['ngResource','ui.bootstrap', 'myApp.services', 'myApp.servicesMovie', 'myApp.servicesSearch', 'myApp.servicesUtils', 'myApp.servicesMovieList'])

你可以看到我在我的应用程序中包含了许多不同的模块，然后是一个从服务模块获取一些服务的控制器示例：

function SearchCtrl($scope,  $rootScope, $route, $timeout, $routeParams, $location, SearchService, MovieListService) { etc }

这是模块的定义之一（也具有依赖性）：

angular.module('myApp.servicesMovieList', ['myApp.services'])

关于模板，您可以定义这些并将其包含在路线值中：

$routeProvider.when('/view1', {templateUrl: 'view1.html', controller: ViewCtrl});
    $routeProvider.when('/movie/:id', {templateUrl: 'movie-detail.html', controller: MovieCtrl, resolve: MovieCtrl.resolve});
    $routeProvider.when('/search/:q/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.when('/searchlist/:url/:p', {templateUrl: 'movie-search.html', controller: SearchCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});

  }])

当然，您可以使用ng-include

与他们联系

Answer 2

是的，你现在正走在正确的道路上。 Angular中的另一种模块是服务。服务可以非常干净的方式注入任何控制器或指令（甚至是其他服务）。

指令主要用于可重用的东西，这些东西明显是UI的一部分，它通过添加DOM元素/属性的方式反映出来。

服务是针对更抽象的事物或事物，即使没有任何直接对应的用户界面，其存在和行为也是有意义的。您可以理智地推入独立服务的逻辑越多，您的应用程序就越模块化，代码就越可重用。

根据我的经验，控制器倾向于成为最不可重用的，并且成为第一个变得复杂和混乱的人。（但那可能就是我错误地使用它们。）经验法则是让控制器尽可能简单。将它们限制为仅仅纯业务逻辑，并尝试将大部分内容也放入服务中。

Angular确实有一些陡峭的学习曲线，但继续研究，然后不同的部分将变得明显并落实到位。 SO上的一个资源就是这个问题："Thinking in AngularJS" if I have a jQuery background?

Answer 3

看一下我的帖子：

http://leog.me/log/large-angularjs-app-components

这是一个使用RequireJS的解决方案，可以将应用程序分成多个模块，这些模块可以很容易地连接在一起。

如果您发现它有用，请告诉我，以便我可以在此处提供基本信息，以避免引用链接，而不是将有价值的内容放在答案中。

如何将大型AngularJS项目拆分为模块

3 个答案: