如何分割大AngularJS项目成模块 [英] How to split large AngularJS projects into modules

问题描述

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

I come from the world of Backbone and JavascriptMVC. But I am really tempted to switch to AngularJS. So far, I have one big issue that keeps me from converting.

创建单页的应用程序。让我们pretend它包含一个标签模块，文件上传模块和文件列表模块。

I create single page apps. Let's pretend it contains a tab module, a file upload module and a filelist module.

我会做的骨干，是我将每一种分裂作为单独模块
用自己的视图模板，ViewController中等等。这样一来，我可以使用该模块的几个地方在我的应用程序。这些模块不知道自身以外任​​何东西。

What I would do in Backbone is that I would split each of these as standalone modules with their own view template, viewcontroller and so on. That way, I am able to use the module several places in my app. The modules don't know about anything other than itself.

这是怎么彪与在AngularJS处理？是否有可能建立每个模块有一个angular.module（例如像一个标签模块）？

How is this ment to be dealt with in AngularJS? Is it possible to create one angular.module per module (like for instance a tab module)?

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

I feel they tell a how to create many controllers within a module in their documentation. But that does not sound like what I need. Or am I misunderstanding some major concepts here?

编辑：
我已经做了一些调查研究。它看起来像指令是我期待的。而在AngularJS模块重新presents整个Web应用程序。所以名称组件和模块的混合是什么我弄糊涂了。

I have done some more research. It looks like directives is what I am looking for. While a module in AngularJS represents the entire web app. So the mixing of the names 'components' and 'modules' is what confused me.

我现在是正确的道路上？

Am I on the correct path now?

推荐答案

您绝对可以定义模块，并且你有你的模块在应用层面，然后用依赖注入你让你的控制器使用他们需要什么。

You absolutely can define modules and you include your modules at the app level and then with dependency injection you allow your controllers to use what they need.

我有概念例如对于一个小应用程序我正在学角度证明（这是pretty肮脏和我的游乐场）：

I have a proof of concept example for a small app I was working on to learn angular (it is pretty dirty and my playground):

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

我的应用程序的定义是这样的：

My app definition looks like this:

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

您可以看到我包括了一堆用我的应用程序不同的模块，然后控制器从该服务模块需要一些服务的一个例子：

You can see I am including a bunch of different modules with my app and then an example of a controller that takes some services from the services module:

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

下面是定义的模块之一（另一个是它的依赖太）：

Here is one of the module's defined (with its dependency too):

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

至于模板，可以定义这些，包括它们与你的路由值：

With regards to templates, you can define these and include them with your route values:

$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-包括

这篇关于如何分割大AngularJS项目成模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！