9

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

我创建单页应用程序。让我们假设它包含一个选项卡模块、一个文件上传模块和一个文件列表模块。

我在 Backbone 中所做的是将这些中的每一个拆分为具有自己的视图模板、视图控制器等的独立模块。这样，我就可以在我的应用程序中的多个地方使用该模块。这些模块不知道除了它自己之外的任何东西。

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

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

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

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

4

3 回答 3

3

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

我有一个用于学习 Angular 的小型应用程序的概念证明示例（它很脏，我的操场）：

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

于 2013-05-12T16:12:33.853 回答
1

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

指令主要用于可重用的东西，这些东西明显是 UI 的一部分，这在某种程度上反映在它们的使用方式上：通过添加 DOM 元素/属性。

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

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

Angular 的学习曲线确实有些陡峭，但继续研究，然后不同的部分就会变得明显并到位。SO上的一个资源是这个问题：“在AngularJS中思考”如果我有jQuery背景？

于 2013-05-13T12:07:13.877 回答
0

看看我的帖子：

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

如果您觉得它有帮助，请告诉我，这样我就可以将基本信息放在这里以避免引用链接，而不是将有价值的内容放在答案中。

于 2014-12-31T00:49:31.703 回答