Question

很抱歉，但我无法找到相关文档。

我有一个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]
    })
});

Answer 1

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

只要您的app.js文件包含在出厂前的HTML中，您就不需要做任何特别的事情来将数据＆＃34;放入＆＃34;应用程序 - 当您运行angular.module('App')（而非angular.module('Data')）时，您正在执行的操作。只需将Data注入您需要的任何控制器或工厂中！

Answer 2

我投票结束，因为这只是一个意见问题，但人们倾向于采取两种主要方法。那说，因为我有自己的看法，无论如何我都要在这里张贴;）

为controllers / directives / services / views创建一个文件夹，或者创建一个反映功能元素的目录结构。从那以后，我倾向于第二条路线，你可以为每个脚本文件创建一个新模块，每个脚本文件包含可以协同工作的功能。

我最终得到的是具有类似内容的脚本文件：

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中，我包含了所有的脚本文件，但由于每个脚本文件都定义了一个新模块，所有内容都没有发生，直到它全部加载并且有角度引导它才能完成。

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

2 个答案: