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



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

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

我要在Backbone中做的是,我将这些模块拆分为独立的模块有自己的视图模板,视图控制器等等。这样,我就可以在我的应用程序中使用模块的几个地方。模块不知道除了自己以外的任何事情。

如何在AngularJS中处理这个问题?有没有可能产生一个角。每个模块(例如TAB模块)?

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

编辑:我又做了一些调查。看起来指令就是我想要的。而在AngularJS中,一个模块代表了整个web应用程序。所以把"组件"one_answers"模块"这两个名字混在一起让我很困惑。

我现在在正确的路径上吗?

你完全可以定义模块,你可以在应用级包含你的模块,然后通过依赖注入允许你的控制器使用他们需要的。

我有一个小应用程序的概念证明的例子,我正在学习角(它是相当脏和我的游乐场):

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

我的应用定义是这样的:

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

你可以看到我在我的应用程序中包含了一堆不同的模块,然后是一个控制器的例子,它从services模块中获取一些服务:

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

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

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

服务用于更抽象的事物,或者那些即使没有直接对应的用户界面,其存在和行为也有意义的事物。您可以明智地将更多的逻辑塞到独立服务中,您的应用程序就会变得更加模块化,代码就更易于重用。

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

Angular确实有一个陡峭的学习曲线,但继续研究,然后不同的部分就会变得明显,并各就各位。这里有一个资源是这个问题:"用angular思考"。如果我有jQuery的背景?

看看我的帖子:

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

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

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

最新更新