RSS

Tag Archives: angularjs

Angular datepick(er) template

It is just wrapper for this datepicker. It is a good example of a custom directive and an easy way to have all your datepickers initialization in one point.
One note: the “Angular directives for Bootstrap” requires Angular 1.2.x, but I successfully -with a fix- decided to use 1.3.x for my needs.

Prepare the template

I created a jade file, named datepick.jade.
You can use plain HTML, if preferred.

p.input-group
  input.form-control(type="text", is-open="opened", datepicker-popup="{{format}}", ng-model="dt", show-button-bar="false")
  span.input-group-btn
    button.btn.btn-default(type="button", ng-click="open($event)")
      i.glyphicon.glyphicon-calendar

Inject the directive in Angular

The interesting part here is the (isolated) scope and the controller directive.
The scope renames the given “value” into a “dt” scope variable, mainly for readability.
The controller does all the initialization for the component.

angular.module("myapp").directive("datepick", function() {
  return {
    restrict: 'E'
    , templateUrl: 'datepick.jade'
    , replace: true
    , scope: {
      dt: '=?value'
      , format: '@'
    }
    , controller: function($scope, $filter) {
      $scope.format = ($scope.format || 'dd-MMMM-yyyy');
      $scope.dt = $filter('date')($scope.dt, $scope.format); // this fix is needed by angular >= 1.3.0
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = !$scope.opened;
      };
    }
  }
});

Use it!

Again it is jade syntax:

datepick(value="user.birthDate")
 
1 Comment

Posted by on 2015/03/10 in dev

 

Tags: ,

Express.js and jsonp

Express.js has a very good jsonp handler, the key is to use it in the right way =)

The first step is to ensure the callback name. The default value is “callback” so on a res.jsonp(..) the server will look for req.query[“callback”] to build the response.
This value can be overridden with an app.set(‘jsonp callback name’,..).

app.js:

app.get('/', function(req, res) {
  var jsonp_callback = app.get('jsonp callback name');
  var jsonp = (req.query[jsonp_callback]);
  var result = [{},{},.....];
  if (jsonp) res.jsonp(result);
  else res.json(result);
});

jQuery

When asking for jsonp stuff, jQuery will handle the whole request/response stuff.
We just need to say the dataType and the callback key.

Here’s an example of the client side call:

$.ajax({
  url: "http://localhost:3000/",
  jsonp: "callback",
  dataType: "jsonp",
  success: function( response ) {
    console.log( response );
  },
  error: function(XHR, textStatus, errorThrown) {
    console.log(XHR);
    console.log(textStatus);
    console.log(errorThrown);
  }
});

AngularJS

Angular will expect the callback will be named “JSON_CALLBACK” so we have to use it this way:

$http.jsonp('http://localhost:3000?callback=JSON_CALLBACK')
  .success(function(data, status, headers, config) {
    console.log( data );
  })
  .error(function(data, status, headers, config) {
    console.log(data);
    console.log(status);
  });
 
Leave a comment

Posted by on 2015/02/04 in dev

 

Tags: , , , ,

AngularJS and CTRL+F5

When the user forces a refresh of a SPA he is requesting to the server only the partial html actually loaded. This is undesirable because the partial doesn’t include all the scripts and this means no AngularJS engine at all!).
The result will be a broken page with no css, no script and all the {{}} expressions not rendered.

As a solution you can redirect to a safe link when angular is undefined.
This is the Jade template that makes the magic:

script if (typeof(angular) === "undefined") window.location.replace("/");
 
Leave a comment

Posted by on 2015/01/09 in dev

 

Tags: