如何在AngularJS項目中實現代碼復用

在 AngularJS 項目中實現代碼復用時，可以通過以下幾種方法：

1. 使用 AngularJS 的模塊（Modules）和控制器（Controllers）：

   創建自定義模塊，將復用的功能封裝到模塊中。然后在需要的控制器中注入這些模塊，從而實現代碼復用。例如：

   // 自定義模塊
   angular.module('myCommonModule', []);
   
   // 在模塊中添加服務
   myCommonModule.service('myCommonService', function() {
       this.doSomething = function() {
           // ...
       };
   });
   
   // 在控制器中注入模塊
   angular.module('myApp', ['myCommonModule'])
       .controller('myController', ['$scope', 'myCommonService', function($scope, myCommonService) {
           $scope.doSomething = function() {
               myCommonService.doSomething();
           };
       }]);
   

2. 使用 AngularJS 的指令（Directives）：

   創建自定義指令，將復用的 UI 邏輯封裝到指令中。然后在 HTML 中使用這些指令，從而實現代碼復用。例如：

   // 自定義指令
   angular.module('myApp')
       .directive('myDirective', function() {
           return {
               restrict: 'E',
               template: '<div>這是一個復用的組件</div>',
               controller: function($scope) {
                   // ...
               }
           };
       });
   
   // 在 HTML 中使用指令
   <my-directive></my-directive>
   

3. 使用 AngularJS 的服務（Services）：

   創建自定義服務，將復用的業務邏輯封裝到服務中。然后在需要的控制器或服務中注入這些服務，從而實現代碼復用。例如：

   // 自定義服務
   angular.module('myApp')
       .service('myCommonService', function() {
           this.doSomething = function() {
               // ...
           };
       });
   
   // 在控制器中注入服務
   angular.module('myApp')
       .controller('myController', ['$scope', 'myCommonService', function($scope, myCommonService) {
           $scope.doSomething = function() {
               myCommonService.doSomething();
           };
       }]);
   

4. 使用 AngularJS 的工廠（Factories）：

   創建自定義工廠，將復用的邏輯封裝到工廠中。然后在需要的控制器或服務中注入這些工廠，從而實現代碼復用。例如：

   // 自定義工廠
   angular.module('myApp')
       .factory('myCommonFactory', function() {
           return {
               doSomething: function() {
                   // ...
               }
           };
       });
   
   // 在控制器中注入工廠
   angular.module('myApp')
       .controller('myController', ['$scope', 'myCommonFactory', function($scope, myCommonFactory) {
           $scope.doSomething = function() {
               myCommonFactory.doSomething();
           };
       }]);
   

通過以上方法，可以在 AngularJS 項目中實現代碼復用，提高開發效率和代碼質量。