Rails, AngularJS (1.5.8), and Webpack — Part 4

Okay. We left off last time actually seeing Angular working with webpack. Things were looking good – in a very basic “Hello World” kind of way. Today, we’re going to create a controller and a component to make an http request to hit up the backend for some data. First, let’s create some data.

Seeding the Database

Heading back to Rails land briefly to create some users and meals. In app/db/seeds.db let’s make a couple of arrays and then use a looping method to create our Users and Meals at the same time.

# app/db/seeds.rb

users = ["Luke", "Han", "Leia", "Obi", "Chewbacca", "C3P0"]
# Our users array from a galaxy from far far away

meals = ["Tattooine Tacos", "Chewie's Chowder", "Princess Pizza", "Darth's Death Stack", "Brain du Jar Jar", "R2's Nuts and Bolts"]
# Our meals array with some interesting looking delicacies

i = 0

6.times do
  UserMeal.create(user_id: User.create(name: users[i]).id, meal_id: 
  Meal.create(title: meals[i]).id)
  i += 1
end

Here we are using our two arrays and a loop to create not only a new User and Meal each go round, but the association between each one too. Now we can run ‘rails db:seed’ in our terminal and our database should be seeded. If we go into our rails console (‘rails c’ in the terminal), and type ‘User.first.meals’, we should see something like this:

=> #<ActiveRecord::Associations::CollectionProxy [#]>

Cool! Our seeding experiment worked and our associations seem to be solid. Let’s take it one step further and get the actual name of our first user’s meal – ‘User.first.meals.first.title’

=> “Tattooine Tacos”

Sweet! We are finished with the backend for now. Let’s get this front end party going!

Creating a Controller

First we’ll create our controller and use Angular’s built in $http service to get data from the backend. We have to use ngInject to inject the $http service into the controller. Then we’ll use $onInit to set up the call to the api. In app/javascript/packs, we’ll create a new file called ‘home.controller.js’. Then we’ll add our controller and export it, so it can be imported wherever we want it.

// app/javascript/packs/home.controller.js

class HomeController {
  constructor($http) {
    'ngInject';
    this.$http = $http;
  }

  $onInit = () => {
    this.$http({
      method: 'GET',
      url: '/users.json'
    })
    .then(res => {
      console.log(res.data)
      this.users = res.data
    })
    .catch(err => {
      console.log(err)
    })
  }
}

export default HomeController;

$onInit is a lifecycle hook that initializes on start up. So our $http call will happen when the HomeController is called upon. The $http call takes one argument, a configuration object consisting of a ‘GET’ method and a url, to make the HTTP request and returns a promise. For a successful promise, we use ‘then’. For an unsuccessful promise, we use ‘catch’. I believe the old standard was ‘success’ and ‘error’ to handle promises.

Now we need to output be able to output our data into a template. Stand alone templates are not used with modules. Instead, we’ll use a simple component.

Creating a Component

Let’s create a new file called ‘home.component.js’ in the same folder as our other Angular files. Then we have to import the HomeController and create the component. Components are very simple, as we’ll see. They basically point to a variable, which we’ll then export. Our component will take three properties: controller, controllerAs, and template. Components could take more properties, but we won’t need anything more for our needs. Our users will be coming to us in an array, so we’ll have to loop over this array to get each user. Angular comes with a very handy ng-repeat, which can be inserted right into the html.

// app/javascript/home.component.js

import HomeController from './home.controller';

const HomeComponent = {
  controller: HomeController,
  controllerAs: '$ctrl',
  template: `<div ng-repeat="user in $ctrl.users">
              <h2>{{user}}</h2>
            </div>`
}

export default HomeComponent;

This should give us what we need. Now we have to import our component to our main app module and we should see something in our browser.

Importing Component into Main App Module

Let’s head over to our meals module and see what we can do. In app/javascript/packs/application.js, we’ll import the home component under our angular and uirouter imports. Then we’ll add our component to the meals module so we can use it in the router.

//app/javascript/application.js

import angular from 'angular';
import uirouter from 'angular-ui-router';
import HomeComponent from './home.component';  // New


const meals = angular.module('meals', [uirouter])
  .component('homeComponent', HomeComponent) // New
  .config(($stateProvider) => {
    $stateProvider
      .state('home', {
        url: '/',
        component: 'homeComponent' // New

      })
  });

export default meals;

I added a ‘New’ comment next to the lines that were added. Notice that we still had to add the component to the module. Then we used the stringified name and added it to our ‘home’ route as a component. Let’s run the servers and see if we have anything.

Remember, we need to run two servers – one for the front end and one for the back. In one tab in your terminal run ‘./bin/webpack-dev-server’ and in another tab, run ‘rails s’. Refresh the browser, click home and….

{"id":1,"name":"Luke","created_at":"2017-10-11T22:21:37.642Z","updated_at":"2017-10-11T22:21:37.642Z","url":"http://localhost:3000/users/1.json"}

{"id":2,"name":"Han","created_at":"2017-10-11T22:21:37.679Z","updated_at":"2017-10-11T22:21:37.679Z","url":"http://localhost:3000/users/2.json"}

{"id":3,"name":"Leia","created_at":"2017-10-11T22:21:37.685Z","updated_at":"2017-10-11T22:21:37.685Z","url":"http://localhost:3000/users/3.json"}

{"id":4,"name":"Obi","created_at":"2017-10-11T22:21:37.692Z","updated_at":"2017-10-11T22:21:37.692Z","url":"http://localhost:3000/users/4.json"}

{"id":5,"name":"Chewbacca","created_at":"2017-10-11T22:21:37.698Z","updated_at":"2017-10-11T22:21:37.698Z","url":"http://localhost:3000/users/5.json"}

{"id":6,"name":"C3P0","created_at":"2017-10-11T22:21:37.705Z","updated_at":"2017-10-11T22:21:37.705Z","url":"http://localhost:3000/users/6.json"}

Nice! We got some JSON! We’re on the right track. Now all we have to do is get the name out of each object. To do that, we’ll have to modify the template in our component ever so slightly.

// app/javascript/home.component.js

import HomeController from './home.controller';

const HomeComponent = {
  controller: HomeController,
  controllerAs: '$ctrl',
  template: `<div ng-repeat="user in $ctrl.users">
              <h2>{{user.name}}</h2>
            </div>`
}

export default HomeComponent;

If you can’t see what was added, no worries. In the

tag we were getting the whole user, which is why we got all that extra JSON. The only thing that was added was a name attribute to the user – {{user.name}}. These things update live, so if we look back to the browser, we should see our Star Wars heroes.

An Aside

This actually took me quite a while to get running. I’m learning as I go and had some trouble understanding how to use $http in the controller. Specifically, how to inject it. Everywhere I looked, people were saying the same thing: outside of the HomeController class, inject the $http service as such – HomeController.$inject = [“$http”];

This did not work. I finally came across a someone’s code with ‘ngInject’ loaded in the constructor. I tried that, and everything worked!

We’ve gone through a lot today and I’m going to leave off here. Next time we’ll separate the $http call into a service, as it should be and see our Chewbacca’s favorite meal. Until then…Cheers:)

Advertisements

Rails, AngularJS (1.5.8), and Webpack — Part 3

Alrighty then. Where were we? I believe we left off in a good place. We installed the webpacker gem, and seemed to have communication between our newly created JS file and our app. Now for the hard part. I’m still learning this stuff myself, so bear with me. We’re going to attempt to use ES6 modules instead of the old way of declaring AngularJS components and such. This style guide is a good starting point to get to know what your components will look like and how they’ll interact with each other.

Setting up the Main Module

The first thing we’ll want to do is setup up our main Angular module in app/javascript/packs/application.js. First we have to import angular into the file so our module knows what it’s attaching itself to. We are also going to export the module, which will allow our webpack to compile it when we run app in the terminal.

// app/javascript/packs/application.js

import angular from 'angular';

const meals = angular.module('meals', [])

export default meals;

Now we have to declare our app in our main html file: app/views/layouts/application.html.erb. So in the body tag, add ng-app=”meals”.

<!DOCTYPE html>
<html>
  <head>
    <title>Meals</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body ng-app="meals">
    <%= yield %>
  </body>
</html>

Now our app knows that it’s an Angular app and it’s looking for a module called ‘meals’. Let’s add a route with a component so we can actually see something working on the Angular side of the world.

Routing With angular-ui-router

If you’ve built anything with Angular in the past, you’ve most definitely used angular-ui-router. We’re going to install it with yarn. If you don’t have yarn installed, check out the installation instructions here. To install, or ‘add’ as it’s called in yarnish, head over to your terminal and type: ‘yarn add angular-ui-router’. If you check your dependencies in your package.json file, you should see ‘angular-ui-router’ listed.

So let’s see if we can get a route working. In our angular_home.html file, let’s add a ui-view directive.

<-- app/views/application/angular_home.html -->

<ui-view></ui-view>

This will give us an entry point into AngularLand and let us declare routes with $stateProvider in a config function. Back in our application.js file, let’s add a config function and a route. First we’ll have to import the ui-router so we can use all of its goodness. Check it…

// app/javascript/packs/application.js

import angular from 'angular';
import uirouter from 'angular-ui-router';

const meals = angular.module('meals', [uirouter])
  .config(($stateProvider) => {
    $stateProvider
      .state('home', {
        url: '/',
        template: `<h1>Hola Mundo!</h1>`
      })
  })

export default meals;

Ok so here we’re importing the angular-ui-router and chaining a config function onto our module. Angular-ui-router gives us access to $stateProvider, $urlRouterProvider, $state, and $stateParams. In the config function above, we’re using the Arrow function syntax now available in ES6, and setting the state. With a url and a simple template, we should be getting somewhere. Let’s quickly make a link back in angular_home.html so we can see our route is working.

<-- app/views/application/angular_home.html -->

<a ui-sref="home">Home</a>
<ui-view></ui-view>

Run the Webpack and Rails Server Simultaneously?

Now to run webpack, we can’t just run the rails server. We actually have to run the rails and the webpack servers. Back in the terminal, create a new tab in the same directory, then run ‘./bin/webpack-dev-server’. This will compile your included javascript files through webpack. If you’re like me, then you probably got a lot of red errors followed by this line: webpack: Failed to compile.

So something is not letting us load our module. If we scroll up in the terminal, we’ll see that most of the errors say that angular doesn’t exist. But I thought we installed Angular already!! Well, I’m pretty sure that when we installed it with the webpacker command, it installed Angular 4. We need version 1.5.8, which we can easily install add with yarn. Exit out of the webpack server in your terminal. Then type ‘yarn add angular@1.5.8’.

Check out your package.json file and you should see angular with the correct version listed under the dependencies. Now if we try to run the server again – ‘./bin/webpack-dev-server’ – everything should compile (there might be a few warnings, but let’s not worry about those). In your other tab run the rails server command and in your browser go to ‘localhost:3000’. You should see a link that says ‘Home’. Click it, and you should be routed to the home route that we set up earlier. If you followed along, you should see ‘Hola Mundo!’ on the webpage!

To Sum it Up

We are in the Angular business now! In this episode, we’ve connected the front end to our meals app with webpack, added angular-ui-router and AngularJS, created our main module with a route and template, learned how to run the webpack server, and saw our template working in the browser. Next time, we’ll get some functionality going with some http requests to the backend and do something a little more exciting than Hello World Hola Mundo. As always, thanks for reading. I hope this helps someone out there! Until next time…CHEERS:)

Rails, AngularJS (1.5.8), and Webpack — Part 2

Welcome back! We left off last time in a good place. We set up the back end by generating three models – User, Meal, and UserMeal (our joins table) – with associations. We used scaffolding to generate our models. In most cases, we would normally not generate models using scaffolding, because it creates a lot of things we won’t need. This causes bloat in our app, and if we want our app to scale nicely and be fast, this will be a problem. For our case (and our little app), it’s nice and easy to use scaffolding – so we did. Then we installed a great gem called Active Model Serializer, which formats our model data into reusable JSON, which our front end will consume. In this edition we’ll be installing AngularJS and Webpack. Let’s dive in.

Webpacker

A few blog posts ago, I wrote about Rails and the Webpacker gem. The team at Rails is definitely catching on to the current and future trends of the web – front end frameworks using JavaScript. The Webpacker gem makes it easier to use these frameworks with Rails. Enough talk though – let’s install it! Note – if you’re using Rails 5.1, you can run ‘rails new myapp –webpack=angular’ when initiating your app. Otherwise…

# In your gemfile.rb file, add 

gem 'webpacker'

# Back in your terminal

bundle 
bundle exec rails webpacker:install

# if you get an error that looks like this: 'Webpacker requires Yarn >= 0.25.2 
# and you are using 0.24.6
# Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/'
# do this:

npm install -g yarn

# if everything is honky dory

bundle exec rails webpacker:install:angular

Now we’re in the webpack business. Using webpack basically creates another asset pipeline for our JavaScript assets. Instead of putting all of our JavaScript files in /app/assets, we’ll put them in app/javascript/packs. To include this folder, all we have to do is include them in our main html files ‘head’ section.

# app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application' %>

Now our files will be included and we can get coding. Let’s create the entry point to the angular app. Create a new folder and file in our views folder:
app/views/application/angular_home.html. Now we need a route. Let’s add it to our routes.rb file.


root to: 'application#angular_home'

Let’s add something to our angular_home file.

# app/views/application/angular_home.html

Goodbye World

# LOL?

Now run ‘rails s’ in your terminal and head on over to ‘locahost:3000’ in your browser. We should see ‘Goodbye World’ on the webpage. Now look in the console (Apple Control ‘J’) and you should see ‘Hello World from Webpacker’. We’re in business.

I think this is a good place to leave off. Our backend is set up. Webpack is setup. We have an entry point to Angular. Things are looking good. Next week we’ll dive head first into Angular. Working with modules and all the goodness that comes with ES6! Until then…cheeeeeers:)

Rails, AngularJS (1.5.8), and Webpack — Part 1

In my last post, I wrote about using Webpack with Rails and AngularJS, and how it differed from using Bower. There is definitely a bigger learning curve using Webpack, but I believe it will all be worth it when the dust settles. Besides, it seems that Bower has been deprecated. I’m going to try my hand at a tutorial using these three technologies and share my confusion as we go. ES6 syntax will be used in Angular also, which changes how we write our components. Let’s dig in.

The Setup

I’ll assume that you have Rails installed already. We’re going to build a simple CRUD app using Rails as an API on the back end, and AngularJS on the front end and Webpack to bridge the two. We’re going to build a Meals app, with a users table and a meals table. It’s simple but what we want out of this is to be able to use these technologies together – then we can start adding complexities.

‘cd’ into you directory of choice and start a new rails app:

rails new meals --skip-turbolinks

We’re skipping turbolinks because it can cause trouble with Angular. Now that the basic Rails skeleton is created, ‘cd’ into ‘meals’ and open Atom (or your text editor of choice). The version of Rails I’m using is 5.0.6. I’m using the built-in database – sqlite3 – because using Postgres would be adding another complexity to this that we don’t need. Let’s make our first commit to github. I’ll assume you know how to start a repo.

git add .
git ci -m 'initial commit'
git remote add origin https://github.com/SiamKing/meals.git
git push -u origin master

Now let’s create our models. I usually don’t use ‘scaffold’ to generate my models because it adds so much bloat to Rails, but I’m going to use it because it’s so easy – that’s what we’re going for.

rails g scaffold user name:string
rails g scaffold meal title:string
rails g model user_meal user_id:integer meal_id:integer
rails db:migrate

Like I said – super basic. Now that the databases are created, let’s enter the rails console in the terminal and create our first user and meal.

rails c

User.create(name: 'Allison')
Meal.create(title: 'Pizza')

As long as we migrated our database, these commands should work, which means we’ll have our first user and meal. Now we have to think about the association between these two tables. Well, users have many meals and meals have many users. So, it’s a has many to has many relationship. Let’s go into our models and add the associations.

class User < ApplicationRecord
  has_many :user_meals
  has_many :meals, through: :user_meals
end

class Meal < ApplicationRecord
  has_many :user_meals
  has_many :users, through: :user_meals
end

class UserMeal < ApplicationRecord
  belongs_to :user
  belongs_to :meal
end

Let’s try to add a meal to our first user…

rails c

UserMeal.create(user_id: 1, meal_id: 1)
# created an association in our joins table for the first user and first meal

User.first.meals
# Now we can see the first users meals
=> #<ActiveRecord::Associations::CollectionProxy [#<Meal id: 1, title: "Pizza", created_at: "2017-09-17 22:51:13", updated_at: "2017-09-17 22:51:13">]>

Alright! Our models are working as they should, so the next step is to serialize our models into an API so they can be consumed by our front end. We’ll use the wonderful Active Model Serializers for this. Of course there’s a gem! Add this line to your gem file:

gem 'active_model_serializers', '~> 0.10.0'
bundle install

Now let’s create our serializers.

rails g serializer user
rails g serializer meal
rails g serializer user_meal

This generated serializers for our three models. Let’s add our associations.

class UserSerializer < ActiveModel::Serializer
  attributes :id, :name
  has_many :user_meals
  has_many :meals, through: :user_meals
end

class MealSerializer < ActiveModel::Serializer
  attributes :id, :title
  has_many :user_meals
  has_many :users, through: :user_meals
end

class UserMealSerializer < ActiveModel::Serializer
  attributes :id
  belongs_to :user
  belongs_to :meal
end

Now we have our associations set up. Let’s run our local server and see what we have. Run ‘rails s’ in your terminal and go to ‘http://localhost:3000/users/1.json&#8217; in your browser. This should give us our first users information in JSON format. It should look something like this:

{
id: 1,
name: "Allison",
created_at: "2017-09-17T22:50:16.012Z",
updated_at: "2017-09-17T22:50:16.012Z",
url: "http://localhost:3000/users/1.json"
}

Ok that’s cool, we have some JSON! The only thing is we can’t see our user’s meals. Let’s fix that! Open up your users controller and add this to you show method:

if @user
  render json: @user, include: { meals: [:title] }
end

Now refresh your browser and voila!

{
  id: 1,
  name: "Allison",
  meals: [
 {
    id: 1,
    title: "Pizza"
  }
  ]
}

Sweet! We can see our associations! Our back end is fully functional and is set up as an API. This JSON formatted information can now be consumed by our front end. This concludes the first part of this series. I’ll be back next week for part 2. We’ll get our hands really dirty setting up Webpack and Angular. Until then…Cheers:)

Rails, AngularJS and Webpack – First Impressions

I recently started learning React because it seems like it’s the new ‘it’ technology in town. My previous front end framework knowledge was limited to AngularJS. It took me some time to like it, but eventually I did. I might have an interview soon and the technologies the company uses are mainly Rails and AngularJS(v1.5). This has made me go back to Angular and start building again. It’s amazing how fast information leaks out of ones head.

The first thing I noticed when starting a project was that Bower has been deprecated. I knew that Bower was on its way out when I learned AngularJS, but that was only a few months ago. Things certainly change fast in the world of technology.

Note to self: don’t get too comfortable with any technologies you use.

So what to do? How should I handle my front end dependencies? There are many ways, some of which are already on the outs too – like Gulp. After doing some research it seems like the wave of now and the near future is Webpack. Even Rails is getting in on the action by including it with Rails 5.1. Rails is still in heavy use in the industry, however has seen some decline from the glory years. Most of the decline in usage has to do with all of the front end technologies that have sprouted up in the last five years. Rails was not keeping up with the trends and Rails’ dependency on the Asset Pipeline – once the best thing since sliced bread – was now hindering development.

Well, guess what? The team behind Rails has finally caught on and the inclusion of the Webpacker gem is a huge step in the right direction. I could see a big boost in Rails usage as a result. That’s great and all, but what does Webpack actually do? From the Webpack github page:

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

When using Rails, it basically creates another asset pipeline for JavaScript files. Whenever learning something new, there will be a learning curve and some frustration involved. In my case, using Rails 5.0.1 and AngularJS(1.5.8), there has definitely been a bit of both. Especially since there’s not much documentation or tutorials for the versions I’m using. I’m finally making some headway and actually have a basic app running in my browser. There’s much more importing of files and such going on, which I became familiar with through React. This week I’m going to become much more familiar with the inner workings.

My next blog post will be a tutorial on getting Rails(5.0.1), AngularJS(1.5.8) and Webpack to all play nice together. Have you built anything with these technologies? Please comment below, I’d love to hear about it! Until next time…Cheers:)

I’ve Got 99 Problems – but Deploying My Rails/Angular App to Heroku is No Longer One of Them:) PART 2

So where was I? Oh yeah, I left off at changing my problem js file extensions to ‘.es6’ so there would be no problem with new JS6 syntax. This definitely helped, but in it’s place sprung another problem. Only the images that were not hooked up to the database on my site were showing . So I used my noggin and realized that I never migrated my database to Heroku! DOH!

When I tried to run ‘heroku run rake db:migrate’, the migration kept aborting with this message:

PG::UndefinedTable: ERROR:  relation "users" does not exist

I definitely had a table called “users” so that didn’t make much sense. I did a little digging and found out that postgres (the database Heroku uses) does not like tables relating to other tables that have not been created yet. The table being created was referencing a table that was created on a later migration. I know it’s not a good idea to mess with the names of migration files, but I did anyway. Rails timestamps migration files, so I just had to change my “users” file timestamp to a date before the file in question.

So I tried the migrate command again and got the same error. Strange. My migration files had quite a few additions which later became subtractions. I decided that I only really needed three migrations for three tables. Since I had a good seed file which could recreate everything I needed, I decided to recreate only the migrations I needed. This would allow me to reset the database and start from scratch. I deleted the schema and development.sqlite3 files so there would be no references to the old migrations. Now I could recreate my database and schema file.

$ rails db:drop db:create db:migrate db:seed
// This will delete the entire database, losing all data
// recreate a new database and runs the migrations
// db:seed will seed the database from seeds.rb

I had a brand spanking new schema and database, ran my local server and everything was running smoothly. So I ran the heroku migration command again and got THE SAME ERROR!! WTF?!? After googling for a bit, it hit me. I didn’t push the new changes to heroku! Often times it is the simple tasks that one might forget to do that causes errors. Note to self: if you are banging your head against the wall, stop for a minute and think of the steps you would normally take. Save yourself some time and energy. The first change to the “users” migration file name probably would have worked if I just slowed down a little.

After trying to migrate to Heroku again, it worked! Now my site is up and running, and I’m feeling good! Hopefully this helps fellow programmers out there that get stuck – and have sore heads! As always, thanks for reading!

AngularJS: Filter – Behind the Scenes

AngularJS comes with a ton of built in features to help us out – meaning we don’t have to reinvent the wheel every time we want to do something. This makes it extremely easy to do things such as searching or filtering. However, sometimes it’s a good idea to check what’s going on under the hood, which can only help us in the end. These helpers are great, but if you’re knew to programming, they could stunt your growth as a developer. So let’s dive in.

I built an app called Medidate. It’s a simple (a lot of hours goes into simple!) single page app that keeps track of meditation sessions: the date, which kind of meditation, and the duration. It uses Rails as an API on the back-end and AngularJS on the front-end. I’m going to go over a sorting feature that could easily be implemented with Angular’s built in Filter helper. Here’s a Plunker with the easy way.

The Easy Way

Here’s some of the code…

    <div ng-controller="UsersController as vm">
      <div class="container">
        <div class="col-md-3 col-md-offset-9 dropdown-meditation">
          <div class="button-group">
            <select class="btn btn-default btn-md dropdown-toggle dropdown-text"
              ng-model="vm.option">
              <option value="" disabled selected>Sort Events By</option>
              <option value="date">By Date (Asc)</option>
              <option value="-date">By Date (Desc)</option>
              <option value="meditation.name">By Meditation</option>
              <option value="minutes">By Minutes</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events | orderBy: vm.option">
          <p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes &mdash;
        {{event.meditation.name}}</p>
        </div>
      </div>
    </div>

To give a bit of background, the information that’s being sorted here is an array of user events. The user has many events, which have the date, minutes, and a nested association of meditation, with id and name. This was all produced from an $http call to the back-end which was serialized into JSON by active model serializer – a very helpful gem for Rails.

Notice the dropdown and how we’re listing the options. The values of the options are bound to vm.options. All we have to do is declare vm.option = ” in the controller and when the dropdown is selected, vm.option will now be bound to the selected option. This will in turn set the filter in the ng-repeat. Notice the orderBy : vm.option that is declared in the repeat. This is the aforementioned built in magic of Angular. Whichever option is selected in the dropdown will change the orderBy option and effect how the list is ordered.

But what happens when you’re asked how it works. You know, like if someone asked you the what happens when you press the gas pedal in your car?  I don’t know, it just goes!

This is when it gets interesting. Getting your hands dirty.  Instead of using filter in the ng-repeat as above, we’re going to leave ng-repeat alone, with no orderBy filter! The hard work is going to be done in the controller. Check it.

The Hard Way

Here’s the  dropdown and ng-repeat…

    <div ng-controller="UsersController as vm">
      <div class="container">
        <div class="col-md-3 col-md-offset-9 dropdown-meditation">
          <div class="button-group">
            <select class="btn btn-default btn-lg dropdown-toggle dropdown-text"
                    type="button" 
                    ng-model="vm.selectedOption"
                    ng-change="vm.sortBy()" 
                    ng-options="option for option in vm.options">
              <option value="" disabled="" selected="">Sort Events By</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events">
          <p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes &mdash;
        {{event.meditation.name}}</p>
        </div>
      </div>
    </div>

In the dropdown above, ng-model is set to vm.selectedOption. Now whenever the user selects an option from the dropdown, the model is now bound to the option from ng-options. The options are declared in the controller which we’ll be taking a look at soon. The straw that stirs the drink is ng-change, which fires the vm.sortBy function in the controller. Let’s take a looksie.

.controller('UsersController', [function() {
      
      var vm = this;
      vm.sortBy = sortBy;
      vm.sortDate = sortDate;
      vm.sortMeditation = sortMeditation;
      vm.sortMinutes = sortMinutes;
      
      vm.options = ["Date (Asc)", "Date (Desc)", "Meditation", "Minutes (Asc)", "Minutes (Desc)"]

      function sortBy() {
        if (vm.selectedOption === vm.options[0]) {
          vm.sortDate();
        } else if (vm.selectedOption === vm.options[1]) {
          vm.sortDate();
          vm.user.events.reverse();
        } else if (vm.selectedOption === vm.options[2]) {
          vm.sortMeditation();
        } else if (vm.selectedOption === vm.options[3]) {
          vm.sortMinutes();
        } else if (vm.selectedOption === vm.options[4]) {
          vm.sortMinutes();
          vm.user.events.reverse();
        }
      };
 
// more code below

I like to bind my functions up top so I can see exactly what’s going on in the controller. This way I don’t have to search through hundreds of lines of code. Also, now we can just go ahead and write the functions as declarations, not expressions, which will save us from any hoisting headaches.

Like I said before, when the option is selected from the dropdown, that option is now assigned to vm.selectedOption and the vm.sortBy function fires. In the sortBy function, we’ll check to see which option was assigned to selectedOption and then fire a corresponding function to sort the user.events array. Here are the missing sort functions…

      function sortMinutes() {
        vm.user.events.sort((a, b) => parseInt(a.minutes) - parseInt(b.minutes))
      }

      function sortDate() {
        vm.user.events.sort((a, b) => (new Date(a.date)) - (new Date(b.date)));
      }

      function sortMeditation() {
        vm.user.events.sort((a, b) => {
          if (a.meditation.name < b.meditation.name) {
            return -1;
          } else if (a.meditation.name > b.meditation.name) {
            return 1;
          } else {
            let dateA = new Date(a.date);
            let dateB = new Date(b.date);

            if (dateA > dateB) {
              return 1;
            } else if (dateA < dateB) {
              return -1;
            } else {
              return 0;
            }
          }
// end of UsersController

Each function handles the data based on what the value is. Because the data in the user.events array are strings, we’ll have to convert them before sorting. The sortMinutes function is dealing with numbers which forces us to parseInt() the strings to integers. Same thing goes for the sortDate function, which we have to convert to a date before it can be sorted. Last is the sortMeditation function which takes the nested association – meditation – and sorts by name. Here we’re returning a negative 1 if the a is less, positive 1 if the b is less, and then instead of a zero if the names are the same, we’re using a sub-sort, which sorts by date.

Here’s a working plunker of the non-magic Angular filter. I think it’s cool to look under the hood sometimes and see what all the magic is about. You never know if you’re going to learn something new – I know I did! Leave a comment below if you have any questions. Thanks for reading!