javascript - AngularJS:带有查询字符串和表单的单页应用程序？

Question

众所周知，AngularJS 是针对 SPA(单页应用)开发的。尽管如此，也可以创建 MPA(多页应用程序)。

我的应用基于多个状态，使用 Angular 库，例如 ui-router 和 ngResource。首先，我有一个 index.html 文件，我在其中加载了所有依赖项和一个 ui-view。然后我有三个不同的模块:一个包含顶部状态的主模块，一个第一个主页并加载所有需要的第三方模块。另一个模块名为 Student，它有一个简单的形式，可以在我们的 Django 后端中 POST 一些数据。

问题出在第三个模块:公司模块。这里我们有两个导航栏:一个顶部导航栏，目前没有任何内容，然后是一个包含多个按钮的侧边栏，如图所示:

现在，侧边栏上的每个按钮都会将用户带到不同的状态，在该状态下， View 会加载到您可以看到“欢迎...”的空间中

基本上，我们的状态是这样定义的:

'use strict';

talentforce_company
    .config(['$stateProvider', '$urlRouterProvider', 'eehNavigationProvider',
     function($stateProvider, $urlRouterProvider, eehNavigationProvider) {



        // Company area states

        $stateProvider.state('companyState', {
              url: '/company',
              abstract: true,
              //redirectTo: 'homeState',
              template: '<company-area-directive></company-area-directive>'
        });

        $stateProvider.state('homeState', {
              url: '/home',
              parent: 'companyState', 
              controller: ['$scope', '$rootScope', function($scope, $rootScope) {
                    $rootScope.name_filter = "";
                    $rootScope.city_filter = "";
                }
              ],
              template: '<h3>Welcome to TalentForce company area home</h3>'
        });

        $stateProvider.state('select_study_areas', {
            url: '/select_areas',
            parent: 'companyState',
            template: '<study-areas-directive></study-areas-directive>'
          });

        $stateProvider.state('TalentForceState_seeProfile', {
            url: '/profile_list',
            parent: 'companyState',
            // controller: 'People_Controller',
            template: '<people-directive></people-directive>',
          });

          $stateProvider.state('student', { 
            url: '/profile/{personId}',
            parent: 'companyState',
            //templateUrl: 'public/templates/person_template.html',
            controller: 'Person_Controller',
            template: '<profile-directive></profile-directive>',
            resolve: {
              student: function(student_service, $stateParams) {
                  return student_service.getStudents().find(function(student) { 
                    return (student.student_id == $stateParams.personId);
                  });
                }
              }
          });


        eehNavigationProvider
          .menuItem('TF_menu_top.users', {
            text: 'USERNAME',
            iconClass: 'glyphicon-user',
            href: '#'
          });


        eehNavigationProvider
          .menuItem('TF_sidebar.home', {
            text: 'Home',
            state: 'homeState',
            iconClass: 'fa fa-home fa-fw',
          })
          .menuItem('TF_sidebar.profile', {
            text: 'Company Profile',
            href: '#',
            iconClass: 'fa fa-building fa-fw'
          })
          .menuItem('TF_sidebar.students', {
            text: 'Profiles',
            state: 'select_study_areas',
            //href: '/select_areas',
            iconClass: 'fa fa-users fa-fw'
          })
          .menuItem('TF_sidebar.posts', {
            text: 'Job Posts',
            href: '#',
            iconClass: 'fa fa-list-alt fa-fw'
          })
          .menuItem('TF_sidebar.stats', {
            text: 'Statistics',
            href: '#',
            iconClass:'fa fa-bar-chart fa-fw'
          })
          .menuItem('TF_sidebar.universities', {
            text: 'Universities',
            href: '#',
            iconClass:'fa fa-university fa-fw'
          })
          .menuItem('TF_sidebar.tips', {
            text: 'Tips',
            href: '#',
            iconClass: 'fa fa-check-square-o fa-fw'
          })
          .menuItem('TF_sidebar.events', {
            text: 'Events',
            href: '#',
            iconClass: 'fa fa-calendar fa-fw'
          })
          .menuItem('TF_sidebar.help', {
            text: 'Help',
            href: '#',
            iconClass: 'fa fa-question fa-fw'
          })

    }]);

我仍然不知道它是否相关，但请注意父状态是抽象的，其中放置了导航栏。然后加载所有内容，导航栏始终围绕着它。因此，如果我们观察 URL，它们总是指向不同的状态，因此指向应用程序的不同 View 。到目前为止，这似乎是一个很好的方法。

如果我们转到“配置文件”区域，我会使用一个复选框让用户选择一些感兴趣的区域。然后点击应用，进入下一个状态。这个状态和我现在解释的问题是一样的。

所以在下一个状态下，我们进入了一个过滤页面。假设使用前面的复选框，我们会选择三个区域，然后单击“应用”，我们必须向我们的数据库发送查询，以便仅显示这三个区域中存在的人员的结果。我们的 URL 应该是这样的，使用查询字符串和形式:oursite.com/offers/?page=1&s=date&s_l=0&s_h=100&t_co=false&t_st=false&hd=false

在此过滤页面中，我们将使用该 URL，然后应用更多过滤器。发生的事情是我们正在执行过滤器(目前我们只有一个)并且 URL 保持不变，没有任何查询字符串。

我们的过滤器包裹在一个表单中:

<form class="filters" id="myFormId" role="form">

            <div class="col-sm-2" id="filter-column">
                <div class="controls">
                    <select id="country" name="country">
                        <option value="all">All</option>
                        <option value="au">Australia</option>
                        <option value="br">Brazil</option>
                        <option value="ca">Canada</option>
                        <option value="fr">France</option>
                        <option value="de">Germany</option>
                        <option value="mx">Mexico</option>
                        <option value="nz">New Zealand</option>
                        <option value="it">Italy</option>
                        <option value="za">South Africa</option>
                        <option value="es">Spain</option>
                        <option value="pt" selected>Portugal</option>
                        <option value="us">U.S.A.</option>
                        <option value="uk">United Kingdom</option>
                    </select>
                </div>
            </div>


            <div class="col-sm-2" id="filter-column">
                <div id="locationField">
                  <input class="search" id="form-input" name="student_city" placeholder="Enter a city" type="text" />
                </div>
            </div>

我们的想法是在每次更新过滤器时重新加载结果(因此，使用 URL 中的查询字符串重新加载页面)。

请注意，我们使用了 name 属性，这样在我们的 Controller 中，我们可以:

var queryString = $('#myFormId').serialize();

当我们在控制台中打印 queryString 时，它实际上构造得很好:country=pt&student_city=Montijo%2C+Portugal

但我不知道在哪里以及如何使用这个字符串。我应该使用 JSON 文件吗？如何在 Angular 应用程序中完成这种动态过滤？我是否需要更改我的架构，或者更糟的是，更改框架？

我担心通过使用所有这些状态和路由我无法拥有这种类型的过滤器。关于如何实现这一目标的任何想法？我在 Internet 上找不到任何教程，最接近的是 here因为它实际上解释了一个类似于我的问题，但我试图模拟解决方案，但没有任何反应。

Answer 1

如果我很清楚你的问题，那么你想将数据从一个状态发送到另一个状态。 ui-router 中有 $stateParams 服务解决了这个问题。您可以在此处找到文档 https://github.com/angular-ui/ui-router/wiki/URL-Routing关于它。

因此您在状态 A 中选择了一些过滤器。使用绑定(bind)很容易从用户那里收集信息。所以你会有一些像这样的对象:

{
    color: red,
    sort: ascending,
    sortBy: name
}

您通过 $http 创建一个 AJAX 请求，您可以像这样从服务器获取数据:

$http.get("http(s)://serverurl.com/api/endpoint?color=red&sort=ascending&sortBy=name").then(function(resp){
      //handle response as you want
      //you can go to next state via $state.go("stateB", {params: resp.data}) and render view according to the new data
});

在状态 B 中，您将拥有一些 Controller ，您将使用 $stateParams 获取您在状态 A 上请求的新数据。

我提供了另一个示例，我认为它演示了它是如何工作的:

状态定义:

{ 
  name: 'people', 
  url: '/people',
  resolve: {
    people: function(PeopleService) {
      return PeopleService.getAllPeople();
    }
  }
},

{ 
  name: 'people.person', 
  url: '?isActive&eyeColor',
  resolve: {
    filteredPeople: function(people, $stateParams) {
      var res = [];
      people.find(function(person) { 
        if(shouldWeAddToFiltered($stateParams))
        {
          res.push(person);
        }

      });
      return res;
    }
  },
  controller: function(filteredPeople){
      //do something with filteredPeople array
  }
}

在这种情况下，您的网址已更新。因此用户可以将页面添加为书签。