AngularJS：具有查詢字符串和表單的單頁面應用程序？

Question

AngularJS的目標是SPA（單頁面應用程序）開發。 盡管如此，也可以創建MPA（多頁面應用程序）。

我的應用程序基於使用Angular庫的多個狀態，例如ui-router和ngResource 。 首先，我有一個index.html文件，我在其中加載所有依賴項和一個ui-view 。 然后我有三個不同的模塊：一個包含頂級狀態的主模塊，第一個主頁並加載所有需要的第三方模塊。 其他模塊，名為學生，有一個簡單的形式POST在我們的Django的后端的一些數據。

問題出在第三個模塊：公司模塊。 這里我們有兩個導航欄：一個頂部導航欄，現在沒有任何內容，然后是一個包含幾個按鈕的側邊欄，如圖所示：

現在，側邊欄上的每個按鈕都將用戶帶到一個不同的狀態，在該狀態中，視圖被加載到您可以看到“歡迎...”的空間中。

基本上，我們的州定義如下：

'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，它們總是指向不同的狀態，從而指向應用程序的不同視圖。 到目前為止它似乎是一個很好的方法

如果我們轉到“個人資料”區域，我會使用一個復選框供用戶選擇一些感興趣的區域。 然后點擊應用，以便進入下一個狀態。 這個狀態與我現在解釋的問題相同。

因此，在下一個狀態中，我們將進入過濾頁面。 據說，使用前面的復選框，我們將選擇三個區域，通過單擊“應用”，我們必須向我們的數據庫發送查詢，以便僅顯示這三個區域中存在的人的結果。 我們的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屬性，以便在我們的控制器中，我們可以：

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

當我們在控制台中打印queryString時，它實際上構造得很好： country=pt&student_city=Montijo%2C+Portugal

但我不知道在哪里以及如何使用這個字符串。 我應該使用JSON文件嗎？ 如何在Angular應用程序中完成此動態過濾？ 我是否需要更改架構，甚至更改框架？

我擔心通過使用所有這些狀態和路線我不能有這種類型的過濾器。 關於如何實現這一點的任何想法？ 我找不到任何教程在互聯網上，我得到的最接近的是在這里 ，因為它實際上解釋了與我相似的問題，但我試圖效仿的解決方案，什么都沒有發生。

Answer 1

如果我很好地理解您的問題，那么您希望將數據從一個狀態發送到另一個狀態。 在ui-router中有$stateParams服務來解決這種情況。 你可以在這里找到文檔https://github.com/angular-ui/ui-router/wiki/URL-Routing about it。

所以你有一個州A ，你選擇一些過濾器。 要使用綁定，很容易從用戶收集信息。 所以你會有一些像這樣的對象：

{
    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中，您將擁有一些控制器，您將使用$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
  }
}

在這種情況下，您的網址會更新。 因此用戶可以為頁面添加書簽。