Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

waffle enthusiast: Nov 16, 2007

^^ For the next two hours, Manning has all their JS books at 50% off, including AngularJS in Action.

I'm also curious if anyone has read Secrets of the JavaScript Ninja and would recommend it for varying levels of JavaScript ability.

# ¿ Feb 27, 2014 04:12

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 19:26

waffle enthusiast: Nov 16, 2007

I'll third the "Secrets of the JavaScript Ninja" recommendation. I preferred it to Crockford's tome, having read both. Much more approachable and practical overall, I thought.

# ¿ Apr 21, 2015 22:43

waffle enthusiast: Nov 16, 2007

Is there a way to cache certain API requests in Angular? My app provides a list of cities that I want to put in my navbar: `[Denver, Austin, Boston, ...]`. Users can then click on a city and get a list of drop-in hockey venues/dates/times. Ideally, I'd like to populate this navbar and every city's content from the API exclusively. But the navbar data gets refreshed every time the user reloads or changes endpoints (e.g. clicks from Home to Denver). That seems like a lot of calls back to the API just to get a list of cities.

My solution so far has been to hard code the list of cities in the navbar code ($scope.cities = ['Denver', 'Austin', 'Boston',...]), which isn't too bad, but I wonder if there's a better or more idiomatic way. In a perfect world, I'd be able to add a new city (and venues) to the database and have users automatically see it.

I'm at work, so I don't have any code samples at the moment, but I'm hoping someone can put me on the right track.

waffle enthusiast fucked around with this message at 18:54 on May 12, 2015

# ¿ May 12, 2015 18:52

waffle enthusiast: Nov 16, 2007

Oh, I think I understand. So rather than putting logic in my controllers like

code:

# NavbarController

$scope.cities = $http.get(�cities endpoint�) {
  // http logic
}

I should do something like

code:

# NavbarController
$scope.cities = somePromiseService.fetchAListOfCities();

# Some Promise Service 
exports.fetchAListOfCities = function() {
  if (cached) {
    return the cached list
  }
  else {
    $http.get(�cities endpoint�) and also cache it
  }
}

This makes much more sense than what I was thinking about. Thanks.

# ¿ May 12, 2015 20:52

waffle enthusiast: Nov 16, 2007

Yeah, makes sense. I've got some reading to do about promises, but it seems pretty straightforward. Thanks for your help.

# ¿ May 12, 2015 21:18

waffle enthusiast: Nov 16, 2007

I wound up consolidating it like so. Since the $http service has its own caching layer, I didn't have to worry about an if/else. Not sure if this is idiomatic but it seems to work (boilerplate from angular-fullstack:service):

code:

'use strict';

angular.module('dropinApp')
  .service('cityService', function ($http, $q) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    this.getCities = function() {
      var defer = $q.defer();

      $http.get('/api/cities', { cache: true }).
        success(function(data) {
           defer.resolve(data);
        });

      return defer.promise;
    };
  });

# ¿ May 13, 2015 15:36

waffle enthusiast: Nov 16, 2007

Now I'm wholly confused. You guys were just telling me to use promises for this. I see that I'm not resolving in case of an $http error, but now you're telling me not to do the thing you just told me to do :confused:

So�just farm out the $http call to a service that can cache the data�don't use promises?

# ¿ May 13, 2015 17:19

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 19:26

waffle enthusiast: Nov 16, 2007

Alright, I'm going to go on a vision quest to figure this poo poo out.

# ¿ May 13, 2015 17:42

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT