Fatal编程技术网
  • javascript/
  • Javascript 如何组织和减少AngularJS控制器的大小？

Javascript 如何组织和减少AngularJS控制器的大小？

javascript angularjs

Javascript 如何组织和减少AngularJS控制器的大小？,javascript,angularjs,angularjs-directive,angularjs-controller,Javascript,Angularjs,Angularjs Directive,Angularjs Controller,我正在构建我的第一个AngularJS应用程序，并且正在努力找出如何将代码组织到服务/工厂和指令中。我的控制器代码越来越长，我知道我一定是做错了什么 最初我的应用程序有三个控制器：“BuildingTypeController”、“AddressController”和“LayoutController”。我使用ng控制器指令将每个控制器连接到我的每个字段集。但是，我在以下情况下遇到了问题： 我需要将一个控制器的数据传递给另一个控制器，以便能够在$scope.$watch代码中使用 当我需要在G

我正在构建我的第一个AngularJS应用程序，并且正在努力找出如何将代码组织到服务/工厂和指令中。我的控制器代码越来越长，我知道我一定是做错了什么

最初我的应用程序有三个控制器：“BuildingTypeController”、“AddressController”和“LayoutController”。我使用ng控制器指令将每个控制器连接到我的每个字段集。但是，我在以下情况下遇到了问题：

  • 我需要将一个控制器的数据传递给另一个控制器，以便能够在$scope.$watch代码中使用
  • 当我需要在Get中将一个控制器的数据传递给另一个控制器时$get方法（在下面的代码中替换为硬编码的值）
    • 然后我回去把我所有的属性和函数放在一个大的“FormController”中。这给了我想要的功能，但是我知道这不可能是组织所有代码的正确方法

    如果有人能就如何将一个长控制器构造成更小的部分提供任何建议，我将不胜感激。谢谢大家!

    编辑：此代码中的硬编码数据集是为了允许小提琴工作而创建的-它们将被数据库调用替换，并且不应考虑到单个控制器的“长度”

    (function(global){
  app.controller('MainController', function($log){
    this.message = "Hello, world!";
    //Usage of the global variable here.
    this.names = global.data.names;
    this.click = function(){
      global.handlers.onclick(this);
    };
  });
})(this);

    var-app=angular.module（'formBuilder'，[]）；
app.controller（'FormController'，['$http'，'$scope'，函数（$http，$scope）{
//这实际上可以被认为是“BuildingTypeController”
var form=此；
form.state=“”；
form.states=[]；
form.buildingType=“”；
form.buildingTypes=[]；
form.GetStates=函数（buildingType）{
//稍后将替换为$http.get
if（buildingType==null）
{
form.states=[“AZ”、“CT”、“NY”]；
}
如果（buildingType==“单层”）{
form.states=[“AZ”，“CT”]；
}
如果（buildingType==“大厦”）{
form.states=[“CT”]；
}
如果（buildingType==“公寓”）{
form.states=[“CT”，“NY”]；
}
如果（buildingType==“天空刮刀”）{
form.states=[“NY”]；
}
};
form.GetBuildingTypes=函数（状态）{
//稍后将替换为$http.get
if（state==null）
{
form.buildingTypes=[“单层”、“大厦”、“公寓”、“天空刮板”]；
}
如果（状态=“AZ”）{
form.buildingTypes=[“单层”]；
}
如果（状态=“CT”）{
form.buildingTypes=[“单层”、“大厦”、“公寓”]；
}
如果（州=“纽约”）{
form.buildingTypes=[“天空刮板”，“公寓”]；
}
};
//初始化
form.GetStates（）；
form.GetBuildingTypes（）；
//这真的可以被认为是“地址控制器”
form.addressId=“”；
form.addresses=[]；
form.GetAddresses=函数（form）{
//稍后将替换为$http.get
if（form.state==“AZ”&&form.buildingType==“单层”）{
form.addresses=[{
地址：1，
描述：“格罗夫大街123号”
},{
地址:2,，
描述：“2352高等法院”
}];
}
如果（form.state==“CT”&&form.buildingType==“单层”）{
form.addresses=[{
地址:3,，
描述：“云雀大道1515号”
},{
地址：4，
描述：“2前街”
}];
}
如果（form.state==“CT”&&form.buildingType==“大厦”）{
form.addresses=[{
地址:5,，
描述：“6滨水区Dr”
}]
}
如果（form.state==“CT”&&form.buildingType==“公寓”）{
form.addresses=[{
地址：6，
描述：“13中心街”
},{
地址：7，
描述：“5985伊丽莎白法院”
}]
}
if（form.state==“NY”&&form.buildingType==“天空刮板”）{
form.addresses=[{
地址：8，
描述：“第12大道13245号”
},{
地址：9，
描述：“公园大道345号”
}]
}
if（form.state==“NY”&&form.buildingType==“公寓”）{
form.addresses=[{
地址:10,，
描述：“第115街6668号”
},{
地址：11，
描述：“第三大道2839号”
}]
}
};
form.performAction=函数（expr）{
返回函数（）{
if（expr==“GetAddresses”）{
form.GetAddresses（$scope.form）；
}
if（expr==“GetLayouts”）{
GetLayouts（$scope.form）；
}
};
};
$scope.$watch（'form.state'，form.performation（'GetAddresses'）；
$scope.$watch（'form.buildingType'，form.performation（'GetAddresses'）；
//这真的可以被认为是“LayoutController”
form.layout={}；
form.layouts=[]；
form.GetLayouts=函数（表单）{
if（form.addressId==1）
表格布局=[“A”、“B”、“C”、“D”]；
if（form.addressId==2）
表格布局=[“B”、“C”、“D”]；
if（form.addressId==3）
form.layouts=[“A”，“D”]；
if（form.addressId==4）
form.layouts=[“A”，“D”]；
if（form.addressId==5）
form.layouts=[“A”]；
if（form.addressId==6）
form.layouts=[“D”]；
if（form.addressId==7）
form.layouts=[“C”，“D”]；
if（form.addressId==8）
form.layouts=[“A”，“D”]；
如有需要，请填写

    (function(global){
  app.controller('MainController', function($log){
    this.message = "Hello, world!";
    //Usage of the global variable here.
    this.names = global.data.names;
    this.click = function(){
      global.handlers.onclick(this);
    };
  });
})(this);

    

    <!DOCTYPE html>
<html ng-app="TestModule">

  <head>
    <link rel="stylesheet" href="style.css">
    <!-- Reference to Angular on CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
    <!-- Reference to external data sets -->
    <script src="data.js"></script>
    <!-- Reference to external event handlers -->
    <script src="handlers.js"></script>
    <!-- Angular module init -->
    <script src="module.js"></script>
    <!-- Controller init -->
    <script src="maincontroller.js"></script>
  </head>

  <body>
    <div ng-controller="MainController as main">
      <h3>{{ main.message }}</h3>
      <div>
        <h2>Names from the global data.js file:</h2>
        <h3 ng-repeat="n in main.names">{{ n }}</h3>
      </div>
      <div>
        <input type="button" ng-click="main.click()" value="Click me!" />
      </div>
    </div>
  </body>

</html>