Angular 2 with REST-Backend

I’ve recently started a project based on Angular 2 for the front-end, and with a full-REST/Webservices backend.

While doing some devs for the front, as many of us, I used the famous “ng serve” to get a fresh compiled-over-the-time GUI. However, to serve the backend, I faced a very classic “CORS” issue (you know, this cross-over reference blockout form your browser, even with localhost as your server).

So, in that case, 2 ways:
– Allow CORS (whatever the way)
– Use the “ng serve” as a proxy for your backend.

The 2nd option is very simple to setup:
1) Create a proxy.conf.json file at the root of your angular2 app with the following content

{
  "/api": {  /** the root-path for your backend **/
     "target": "http://localhost:8080",   /** your REST-backend access **/
     "secure": false
  }
}

2) Serve through “ng serve” with the following command-line

ng serve --proxy proxy.conf.json

And that’s all….

Javascript: Generate a GUID

How to create a GUID in Javascript

Two years ago, I needed to generate GUID for an ExtJS project (purpose was to create on-the-fly a unique id for tchat messages user was sending). Hereafter the function I used (source should by StackOverFlow and other forums, I dont’ remember exactly), still working.

generateGUID : function() {
  return ((typeof(window.crypto) != 'undefined' 
      && typeof(window.crypto.getRandomValues) != 'undefined') 
    ? function() { // If we have a cryptographically secure PRNG
        var buf = new Uint16Array(8);
        window.crypto.getRandomValues(buf);
        var S4 = function(num) {
          var ret = num.toString(16);
          while(ret.length < 4){ ret = "0"+ret; }
          return ret;
        };
        return (S4(buf[0])+S4(buf[1])+"-"
            +S4(buf[2])+"-"+S4(buf[3])+"-"
            +S4(buf[4])+"-"+S4(buf[5])+S4(buf[6])+S4(buf[7]));
      }
    : function() { // Otherwise, just use Math.random
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
                .replace(
                        /[xy]/g, 
                        function(c) {
                          var r = Math.random()*16|0,
                              v = c == 'x' ? r : (r&0x3|0x8);
                          return v.toString(16);
                        }
                ); // replace
      }
   )(); 
}// generateGUID

Couple of references:

• Collisions when generating uuids
• Create Guid in JS with Math.Random

ExtJS5 : FireEvent from View to Controller

Sometimes, I need to fire up an event from a component/a view to the main controller.

1st, my view, here a compnonent based on a grid panel from which I want to fire a specific event when an object is selected:

Ext.define('NameSpace.ux.SitesGrid',{
     extend: 'Ext.grid.Panel',
[...]
// fired when the line/object is selected
,onObjectSelect:function(grid, obj, index, eOpts) {
    this.fireEvent('MySpecificEvent', this, obj));
} // eo function onObjectSelect

So, when an object is selected, “MySpecificEvent” is fired up

Usually, “main MVC” is splitted in 3 files: the View, the Controller, and the Model.

In the main view, defined your listener for your specific event

Ext.define('NameSpace.view.main.Main', {
    extend: 'Ext.container.Container'
[...]
,listeners: {
    MySpecificEvent: function(src, obj) {
        console.info('MySpecificEvent event occurs', src, obj);}
    }

and that’s all !!!

Typically, I used this kind of stuff to notify route change to the main controller quite easily.

You can also fire event to the Application level, but it is not really recommended. in that case, to fire the event:

NameSpace.getApplication().fireEvent('MySpecificEvent', this, obj));