Question

我正在根据功能对我的electronicjs（angular，mysql）应用程序文件进行分组，例如，我正在开发一个库存系统，这就是我组织文件的方式：

 /app

  /scripts

       /categories
             -- app.js
             -- category.html
             -- categoryController.js
             -- categoryService.js (MySQL data access procedures)

      / brands
             -- app.js
             -- brands.html
             -- brandsController.js
             -- brandsService.js (MySQL data access procedures)

      / unitsofmeasure
             -- app.js
             -- unitsofmeasure.html
             -- unitsofmeasureController.js
             -- unitsofmeasureService.js (MySQL data access procedures)

      / products
      / suppliers
      ....

以及每个功能等等。

在每个app.js文件中（类别示例）：

(function () {
    'use strict';

    var _templateBase = './scripts';    

    angular.module('app', [
        'ngRoute',
        'ngMaterial',
        'ngAnimate'        
    ])
    .config(['$routeProvider', function ($routeProvider) {
            $routeProvider
            .when('/', {
                templateUrl: _templateBase + '/category/category.html' ,
                controller: 'categoryController',
                controllerAs: '_ctrl'
            });
            $routeProvider.otherwise({ redirectTo: '/' });
        }
    ]) ;            
})();

我的问题：我的应用程序可能拥有的每个功能都有几个app.js文件可以吗？

Answer 1

尝试遵循干练习或不要重复自己。因此，最好的方法是在所有子文件夹的文件夹之外创建一个模块。我的意思是你创建module.js或任何你想在脚本文件夹根目录中命名它。在module.js中，您可以创建一个稍后将使用的模块，也可以包含所有配置。

第一种方式：

(function () {
  'use strict';  

  angular.module('app', [
      'ngRoute',
      'ngMaterial',
      'ngAnimate'        
  ])

})();

然后在每个文件夹文件中进行路由（可能是categoriesConfig.js ...）：

(function () {
  'use strict';

  var _templateBase = './scripts';    

  angular.module('app')
  .config(['$routeProvider', function ($routeProvider) {
          $routeProvider
          .when('/', {
              templateUrl: _templateBase + '/category/category.html' ,
              controller: 'categoryController',
              controllerAs: '_ctrl'
          });
          $routeProvider.otherwise({ redirectTo: '/' });
      }
  ]) ;            
})();

第二种方式：

(function () {
  'use strict';

  var _templateBase = './scripts';    

  angular.module('app', [
      'ngRoute',
      'ngMaterial',
      'ngAnimate'        
  ])
  .config(['$routeProvider', function ($routeProvider) {
          $routeProvider
          .when('/category', {
              templateUrl: _templateBase + '/category/category.html' ,
              controller: 'categoryController',
              controllerAs: '_ctrl'
          });
          $routeProvider.otherwise({ redirectTo: '/' });
      }
  ]) ;    
  .config(['$routeProvider', function ($routeProvider) {
          $routeProvider
          .when('/brands', {
              templateUrl: _templateBase + '/brands/brands.html' ,
              controller: 'brandsController',
              controllerAs: '_ctrl'
          });
          $routeProvider.otherwise({ redirectTo: '/' });
      }
  ]) ;         
})();

Answer 2

取决于您在此类结构组织中想要实现的目标。如果您希望保持与组件相关的路由靠近相关组件，则只需添加带有到每个文件夹的路由的配置（您的第一个示例）。在这种情况下，您不会复制所有模块中出现的依赖关系。

示例1 ：

 angular.module('app')
  .config(['$routeProvider', function ($routeProvider) {
      $routeProvider
      .when('/', {
          templateUrl: _templateBase + '/category/category.html' ,
          controller: 'categoryController',
          controllerAs: '_ctrl'
      });
      $routeProvider.otherwise({ redirectTo: '/' });
  }
]) ;

如果您的组件将来可能会增加一些子组件。您可能希望为每个子模块创建子模块，并将配置附加到它们。

示例2

 angular.module('app.brands', [])
  .config(['$routeProvider', function ($routeProvider) {
      $routeProvider
      .when('/', {
          templateUrl: _templateBase + '/category/category.html' ,
          controller: 'categoryController',
          controllerAs: '_ctrl'
      });
      $routeProvider.otherwise({ redirectTo: '/' });
  }
]) ;

我个人的感觉，第一个例子最适合你。但是你最好知道你的应用程序的域名，所以选择你自己。无论如何，你应该尽量减少所有项目中出现的依赖注入。

我的电子网络应用中的每个功能的app.js文件

2 个答案: