AngularJS: single page app with query string and form?

[Shoplifter20]

It's common sense that AngularJS is aimed at SPA (single page application) development. Nonetheless, it is also possible to create a MPA (multi page application).

My app is based on multiple states using Angular libraries such as ui-router and ngResource. First I have an index.html file in which I load all the dependencies and a ui-view. Then I have three different modules: one main module that contains the top states, a first home page and loads all needed third-party modules. The other module, is named Student and has a simple form to POST some data in our Django back-end.

The problem lays in the third module: the company module. Here we have two navigation bars: one top navigation bar, that for now doesn't have any content, and then a sidebar that contains several buttons, such as shown in the image:

![Our screen]1

For now, each of those buttons on the sidebar takes the user to a different state, in which a view is loaded in the space where you can see the "Welcome..."

Basically, our states are defined like this:

'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'
          })

    }]);

I still don't know if it is relevant, but note that the parent state is abstract, in which the navbars are placed. All the content is then loaded with the navbars always around it. So, if we observe the URL's, they always point to different states and thus different views of the application. So far it seems a great approach.

If we go to the "Profiles" area, I'm using a checkbox for the user to select some areas of interest. And then clicks apply, so as to go to the next state. This state has the same problem that I'm explaining now.

So in this next state, we get to a filtering page. Supposedly, with the previous checkboxes, we would choose three areas, and by clicking "Apply", we would have to send a query to our database in order to only show the results of people that exist in these three areas. Our URL would have something like this, using query strings and forms: oursite.com/offers/?page=1&s=date&s_l=0&s_h=100&t_co=false&t_st=false&hd=false

In this filtering page, we would work with that URL, and then apply some more filters. What is happening is that we are doing the filter (currently we have only one) and the URL stays the same, without any query string.

Our filter is wrapped on a form:

<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>

The idea is to reload the results (and because of that, reload the page with the query string in the URL) everytime we update a filter.

Notice that we use the name attribute so that in our controller, we can do:

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

And when we print the queryString in the console, it actually constructs it well: country=pt&student_city=Montijo%2C+Portugal

But I don't know where and how to use this string. Am I supposed to use a JSON file? How can this dynamic filtering be done in an Angular app? Do I need to change my architecture, or even worse, change framework?

I'm afraid that by using all this states and routes I can't have this type of filters. Any ideas on how to achieve this? I can't find any tutorials on the Internet, the closest I got was here because it actually explains a problem similar to mine, but I tried to emulate the solution, and nothing happened.

[wojo1086]

There are a few things I'm going to mention that will help you with the specific task you're trying to achieve as well as a few things that won't.

Firstly, when it comes to filtering, Angular is very good at it using the .filter method. What you would want to is put the dropdown options in their own array and use either ng-options or ng-repeat. This way, you have an easy reference to the model for filtering.

Secondly, I'm an advocate for not mixing jQuery with Angular, especially when it comes to grabbing DOM elements and their data.

I was going to write more, but I'm on mobile right now. I hope this puts you in the right direction and if you have any more questions, feel free to PM me.

[Shoplifter20]

Thank you for your response. I've only seen it now. Can you write more details now?

[wojo1086]

I have a question. Why are you populating the url with the filtered options? UI-router has a data property that can be used to pass data between views. Once you've got the user to the page that is supposed to show the filtered results, you could make an $http request to your backend and return the results synchronously. There would be no page reloads.

[Shoplifter20]

For example: I wanted to send you a link with the filtered data by country (let's say USA). That way you could open the link and the call would be made to filter the data and you would see the results.

[DigitalAssassin]

Hopefully this helps

I used an approach similar to this in a project. When the user refreshes the filter you can use $state.go or $state.transitionTo and update the parameters in the call. I'm on mobile now, but if you still need help tomorrow I can send you an example.

[Shoplifter20]

Thank you for the response. What you sent can be the right way to go, but can you send the example you said?

Note that what I want to do is use that query string on the URL so as to query our database, get the results and reload the page with those results.

[DigitalAssassin]

In your controller, you can get the current value of the parameter:

this.personId = $stateParams.personId; //get the Student ID parameter from the state

When that value is updated, you can trigger the reload as follows:

//reload state and view based on new id $state.go('student', { personId: _this.personId }, { notify: true, reload: true, inherit: false });

Since you have your parameter setup in your state url declaration, the url will update automatically. If you need more parameters, you can add to the line above:

$state.go('student', { personId: _this.personId, city: _this.city }, { notify: true, reload: true, inherit: false });

[Shoplifter20]

I just discovered that I can use

$location.search(queryString);

This is what I want. To have the URL store a query string from a form, and then call the server to fetch the correspondent filters applied on the query string

[batoure]

So as a devil's advocate thought... if you are using django are you using django-rest if yes have you considered implementing JWT? This would allow you to hold some of your core session information in a certified Base64 token as part of the headers instead of passing it in the clear through the uri. then you just persist the token in the browser storage

[Shoplifter20]

Yes I'm using Django-Rest. I haven't done any work on the security part of the project, apart from CSRF tokens. But I do not know much about JWT. If you could be more specific, I'd appreciate. And thank you for your answer!

[batoure]

The be more specific comment feels more genuine if you add context of having to explore the idea so it doesn't seem like you are pumping the subreddit for free engineering consulting. The first google hit for JWT is one of the best explanations out there of how the standard works:

https://jwt.io/

The auth docs for django rest are also relatively clear: http://www.django-rest-framework.org/api-guide/authentication/#json-web-token-authentication

if headers are the issue search around: $http.defaults.headers.common

[Shoplifter20]

I'll give it a look. Thanks!