在AngularJS分割JS文件應用

Question

我建立一個AngularJS應用程序，而現在我只有一個.js文件，其中包含控制器，服務，過濾器，指令...

看起來是這樣的：

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload']) 

.controller('LoggerCtrl',['$scope', 'dataService', function($scope, dataService) 
    { ... }]) 

.filter('showhide', function() { 
    ... 
}) 

.service('dataService', function() { 
    ... 
}) 

.directive('headerLinks', function() { 
    ... 
}); 

現在正在工作，但我認爲這不是很好的做法。

我該如何分割文件？ 它對我稱之爲的順序有什麼影響嗎？

我應該包括

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload']) 

在所有這些？

Answer 1

我建議你按照angular styleguide from John Papa，它使用每個功能的文件夾。

Answer 2

這裏是關於角應用結構的好文章：https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Answer 3

通常有關於如何分割文件思想的2所學校。一種是類型，例如controller，directive，filter，分裂view等：

root 
- controller 
    - controller-1.js 
    - controller-2.js 
- directive 
    - directive-1.js 
    - directive-2.js 
- filter 
    - filter-1.js 
    - filter-2.js 
- view 
    - partial-1.html 
    - partial-2.html 

另一種是組羣文件的邏輯上下文或功能：

root 
    - login 
    - login-controller.js 
    - login-directive.js 
    - login-view.html 
    - account 
    - account-controller.js 
    - account-directive.js 
    - account-view.html 

你的選擇是最多您。我發現第一個適用於非常小的項目，但我很快轉向第二個大項目。

Answer 4

是的，最好是分割你的文件，下面是一個Angular服務和使用該服務的Angular控制器的例子。只要你確定你包含兩個.js文件，你應該沒問題。

這裏是服務（ReadPolicyService.js）

(function() { 
    var readPolicy = function ($http) { 

    var read = function 
     (
      searchTerm 
     ) { 

     return $http({ 
      url: localStorage["policyServiceUrl"] + "api/ReadPolicy/Read", 
      dataType: 'json', 
      method: 'POST', 
      headers: { 
       "Authorization": "Bearer " + localStorage["yat"] 
      }, 
      data: { 
       "SearchTerm": searchTerm 
      } 
     }).success(function (response) { 
      return response.data; 
     }); 
    }; 

    return { 
     read: read 
    }; 
}; 


var module = angular.module("yugasat"); 
module.factory("readPolicy", ["$http", readPolicy]); 
}()); 

這裏是控制器（SearchPolicyController.js）

(function() { 
var module = angular.module("yugasat"); 

var searchPolicyController = function ($scope, readPolicy) { 
    $scope.policies = []; 
    $scope.searchTerm = ""; 
    $scope.isBusy = false; 
    $scope.policyError = false; 
    $scope.policySuccess = false; 

    $scope.searchPolicy = function() { 
     $scope.policyError = false; 
     $scope.policySuccess = false; 
     $scope.isBusy = true; 

     readPolicy.read($scope.searchTerm).then(function (response) { 

      if (response.data.Policies.length > 0) { 

       angular.copy(response.data.Policies, $scope.policies); 

       $scope.isBusy = false; 
       $scope.policyError = false; 
       $scope.policySuccess = true; 

       } else { 

        $scope.isBusy = false; 
        $scope.policyError = true; 
        $scope.policySuccess = false; 
       } 
     }, function() { 
      window.location = "/Error/Index"; 
     }); 
    } 
}; 

module.controller("searchPolicyController", ["$scope", "readPolicy", searchPolicyController]); 
}()); 

Answer 5

我一直在做同樣的問題，在過去的幾個星期，所以雖然不是專家，但我可以指出你對我發現有幫助的資源。

如果你有一個pluralsight訂閱我建議約翰爸爸的當然AngularJS模式：清潔守則 http://www.johnpapa.net/angularjs-patterns-clean-code-released/

如果沒有，還是值得瀏覽的git的樞紐課程材料： https://github.com/johnpapa/ng-demos/ 看看模塊化應用程序（src/client/app） 以及他的app.module.js如何在其他模塊中引用，以及它們是如何組織的。

也看看他的dataservice文件夾。他的應用程序的任何部分都需要通過該服務獲取信息。

我剛開始進入單元測試（https://docs.angularjs.org/guide/unit-testing），這讓我進一步重組我的代碼。