Angularjs - 将服务和控制器分成单独文件的最佳方法是什么？答案

【问题标题】：Angularjs - What is the best way to seperate services and controllers into separate files?Angularjs - 将服务和控制器分成单独文件的最佳方法是什么？
【发布时间】：2014-08-31 23:26:01
【问题描述】：

抱歉，我找不到任何相关文档。

我有一个 app.js 文件，其中包含我所有的服务和控制器。

我想将它们分成不同的文件，在不同的目录下。例如。文件结构

app.js

/controllers/controllerName.js

/services/servicesName.js

似乎有不同的方法。

这是在单独的文件中创建服务的最佳方式吗？

angular.module('Data')
    .factory('Data', function($http) {  code  });

如何将它包含在我的 app.js 中？

我需要在 index.html 中包含所有三个文件吗？

现有的 app.js 在下面...

var App = angular.module('App', ['ngSanitize' , 'ngTouch' , 'ngAnimate']);

// Service
App.factory('Data', function($http) {
    var promise;
    var jsondata = {
        get: function() {
            if ( !promise ) {
                var promise =  $http.get('src/app_preprocess/data_json.js').success(function(response) {
                    return response.data;
                });
                return promise;
            }
        }
    };
    return jsondata;
});

App.controller('ControllerOne', function (Data , $scope) {
    Data.get().then(function(d) {
        $scope.paraOne =  d.data.PACKAGE.ITEM[3].TEXT_COMPONENT[0].TEXT[0]
    })
});

【问题讨论】：

标签： angularjs controller

【解决方案1】：

是的，您需要将任何单独的 JS 文件包含到 index.html 中。如果您将所有内容分成不同的文件（我推荐），这可能会导致包含相当长的脚本列表。有两种方法可以拆分所有文件。一种方法是放入控制器文件、服务文件等。另一种方法是按它们支持的功能对项目进行分组。我更喜欢第一种方式（至少在一个模块内），因为功能之间并不总是有明确的界限（如果有你可能想创建一个不同的模块）。

只要你的 app.js 文件在你的工厂之前包含在 HTML 中，你不需要做任何特殊的事情来让数据“进入”应用程序 - 这就是你在运行 angular.module('App') 时所做的事情（不是angular.module('Data')）。只需将Data 注入您需要的任何控制器或工厂！

【讨论】：

【解决方案2】：

我投票结束，因为这实际上只是一个意见问题，但人们倾向于采取两种主要方法。那就是说，因为我有自己的看法，所以无论如何我都会在这里发布；）

要么为控制器/指令/服务/视图创建一个文件夹，要么创建一个反映功能元素的目录结构。从那时起，我倾向于采用第二条路线，您可以为每个脚本文件创建一个新模块，并且每个脚本文件都包含可以协同工作的功能。

我最终得到的是这样的脚本文件：

angular.module("surveyModule.services", []).service('surveyService', ["$http", "$q" ,function ($http, $q) {
//service code here
}])
angular.module("surveyModule.controllers", []).controller('SurveyGeneratorCtrl', [
'$scope',
'$location',
'$routeParams',
'$dialog',
'surveyService',
function (
  $scope,
  $location,
  $routeParams,
  $dialog,
  surveyService) {
//controller code here
}

angular.module('surveyModule', ['surveyModule.services','surveyModule.controllers']);

然后在我的 mainApp.js 中包含我的模块，例如：

var mainApp = angular.module("mainApp", [
  'userModule',
  'gardenModule',
  'loginModule']);

在我的 index.html 中，我包含了所有脚本文件，但是由于每个脚本文件都定义了一个新模块，并且在全部加载并进行角度引导之前什么都不会发生。

【讨论】：