0

我正在开发一个使用html、angularjs、java、Spring 技术的 Web 应用程序。 我的要求是为我的应用程序创建一个搜索页面。请在此处找到演示

我需要输入详细信息并搜索信息。请在From文本字段中输入 Atlanta，在To文本字段中输入Chicago，然后单击SearchLocations按钮查看信息。

我有几个问题：

1）我可以在我的 angularjs 控制器中编写业务逻辑，这些控制器是用 javascript 文件编写的，示例代码如下所示：

angular.module('myApp').controller('searchController', ['$scope', function($scope) {
    $scope.places = ['', ''];
    $scope.searchValue = '';

    $scope.submit = function() {
      $scope.showGrid = $scope.Passport;
      if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
        $scope.searchValue = $scope.places[0] + $scope.places[1];
      }
    };

2）我可以在我的控制器中编写后端逻辑吗？如果是，您能否建议任何链接，以便我可以继续或从他们那里获得知识。我编写的 javascript 代码，我可以说它作为后端代码/业务逻辑。对这类问题感到抱歉，但我认为这是澄清我的问题的绝佳平台..

如果有人要求我为这种搜索功能编写后端代码，有人会如何进行。任何建议都会非常有帮助。我编写的代码如上面的演示 plunker 所示。谢谢。

js代码：

  angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);
  angular.module('myApp').controller('citiesCtrl', function($scope) {
    // $scope. places = undefined;
    $scope.items = ["Atlanta", "Chicago", "NewYork"];
    $scope.selectAction = function() {
      console.log($scope.places1);

    };
  });

  /*Controller for searchLocations button*/
  angular.module('myApp').controller('searchController', ['$scope', function($scope) {
    $scope.places = ['', ''];
    $scope.searchValue = '';

    $scope.submit = function() {
      $scope.showGrid = $scope.Passport;
      if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
        $scope.searchValue = $scope.places[0] + $scope.places[1];
      }
    };

    $scope.users = [{
      'name': 'AtlantaChicago',
      'show': true,
      'details': [{
        "Travel Date": "10/10/2014",
        commute: "Bus"
      }, {
        "Travel Date": "10/11/2014",
        commute: "flight"
      }]
    }, {
      'name': 'NewYorkChicago',
      'show': true,
      'details': [{
        "Travel Date": "3/15/2016",
        commute: "flight"
      }, {
        "Travel Date": "10/12/2016",
        commute: "flight"
      }, ]
    }];
    $scope.gridOptions = {
      enableFiltering: true,
      columnDefs: [{
        name: 'Travel Date',
        width: '5%'
      }, {
        name: 'Departurecommute',
        enableFiltering: false,
        width: '12%'
      }],
      rowHeight: 20,
      enableHorizontalScrollbar: 2

    };
  }]);

html代码：

  <div>
      <label>
        Show one Grid
        <input type="radio" name="Passport" ng-model="Passport" value=1 ng-click="ShowPassport('Y')" />
      </label>
      <label>Show two Grids
        <input type="radio" name="Passport" ng-model="Passport" value=2 ng-click="ShowPassport('N')" />
      </label>
    </div>
    <div class="row">
      <div class="form-group" ng-controller="citiesCtrl">
        <label>From</label>
        <input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
      </div>
      <div class="form-group" ng-controller="citiesCtrl">
        <label>To</label>
        <input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
      </div>
    </div>

    <input type="button" value="SearchLocations" ng-click="submit()">

    <div ng-show="showGrid==='1'||showGrid==='2'">
      <div ng-repeat="user in users | filter: {name: searchValue} : true ">
        <h3>First Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
      </div>
    </div>
    <div ng-show="showGrid==='2'">
      <div ng-repeat="user in users | filter: {name: searchValue} : true ">
        <h3>Second Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
      </div>
    </div>
4

1 回答 1

1

Angular 是 MVW 框架，主要组件是视图和模型。所以基本上它用于将页面渲染与服务器代码分离。现在与客户端请求处理和页面渲染相关的业务逻辑可以写在角度控制器中，但与我们实际数据/数据库相关的逻辑不能写在角度控制器中。所以你最好知道你有什么样的代码 -结束并据此决定。

于 2017-03-31T11:21:32.670 回答