GS500 The Coder: 10/01/2016

10/27/16

What Is Rebase Command Of Git For?

It is long time i working with git and i must admit i didnt figured out the meaning of Rebase command. Fortunately i hope i figured it now. It appears now that key point here is the git history.
It is important to keep each of commits to be as clear as possible - what is this commit about.

Sample

Let start with example repo where we have two issues open:
1. upgrade protractor library (technically to change version num in "package.json" file)
2. move some file from ES5 to the typescript
The common flow is that each bug/feature developed in its own branch and merged to the main "master" branch afterwards. Lets say the issues where split between two team members - mr X:

and mrs Y.

Mr X created branch named upgrade-protractor wile miss Y created view2-to-typescript at the same time.
Since mr X's task was much easier - he finished before miss Y, and committed his work. According the flow, mr X should do pool request, after that his changes where merged into master.
Now , after miss Y will finish her work and commit - she will face problem to merge her changes into master since it had changed meanwhile.

Good Old Merge

The simple way to handle the problem is to do


git merge master

which will create special "merged" commit because of merge action:

Now the view2-to-typescript has the protractor version change inside it and can be merged into master.
The disadvantage of this way is that commits log has a commit with changes which have nothing to do with the typescript task

Thats Where Rebase Came To Play

The nicer way to handle the merger-to-master problem is to do:


git rebase master

That way the history will be "rewritten" and only one commit with the relevant changes will appear in the commit log:

10/22/16

What is bindToController using for in angularjs?

If you start a new plunker by going to new -> angularjs -> 1.5.x you will get a starter template that attaches "name" property to the controller :


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

and displays it in the template :


  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
  </body>

controllerAs

Actually the more recommended way (look at john papa style guide) to attach some properties and methods to the controller - is by using controllerAs syntax:


app.controller('MainCtrl', function() {
  var ctrl = this;
  ctrl.name = 'World';
});

and the template should now be:


  <body ng-controller="MainCtrl as ctrl">
    <p>Hello {{ctrl.name}}!</p>
  </body>

(ctrl is recommended name to use in the controllerAs syntax by angular guys)

The problem with directives

When writing directives which has their own controllers we may use the controllerAs syntax as well:


app.directive('doSomething', doSomething);
function doSomething() {
  return {
    restrict: 'E',
    replace:true,
    scope:{}, //<--isolated scope
    template:'<button ng-click="ctrl.clickBtn()">click here</button>',
    controllerAs:'ctrl',
    controller: function() {
      var ctrl = this;
      ctrl.name = 'koko';
      ctrl.clickBtn = function() { 
        alert(ctrl.name);  //<--will alert 'koko'
      }
    }
  };
}

But what happens when we need the 'name' property to be passed from the outer scope, like below?


  ...
  scope:{name:'='}
  ...

How we make the controller to know about its new property?
Thats what the bindToController setting in the directive configuration are responsible for - to bind the outer scope members to the controller of directive:


 app.directive('doSomething', doSomething);
 function doSomething() {
  return {
    restrict: 'E',
    replace:true,
    scope: {
      name: '='
    },
    template:'<button ng-click="ctrl.clickBtn()">click here</button>',
    controllerAs:'ctrl',
    bindToController: true, //<-- HERE
    controller: function() {
      var ctrl = this;
      ctrl.clickBtn = function() { 
        alert(ctrl.name);   //<--will alert 'World'
      }
    }
  };
}

full code at this plunkr

Components

Since angular 1.5 introduced the Component method - we can take advantage of using the components to achieve the similar behavior:


app.component('somethingNewer', {
  bindings: {
    name: '='
  },
  template:'<button ng-click="ctrl.clickBtn()">click here</button>',
  controllerAs:'ctrl',
  controller: function() {
      var ctrl = this;
      ctrl.clickBtn = function() { 
        alert(ctrl.name); 
      }
  }
});

This code doing the same thing, but it shorter and its more like angular2
P.S.
controllerAs property if not specified - defined by default as $ctrl.
Hope you have fun reading...

10/10/16

Making Angular1 Seed Project To Work With Typescript

challenge

Since typescript became more and more popular those days i decided to try and take the following challenge: To convert this angular1. seed-project from old fashioned ES5 to Typescript.
I have very little experience with typescript, and that why it is interesting. This project consist only from two basic views so it seems to be not so hard...

Typings

First we need to add typings to our project. What are those typings?
Typings are dependencies as angular or angular-routes libraries which translated to typescript
First step we need to add typescript & typings dependencies to package.json file


"typescript": "^1.8.10",
"typings": "^0.8.1",

Lets also add typings.json file which has list of Definitions of libraries we use in project


{
  "ambientDependencies": {
    "angular": "registry:dt/angular#1.5.0+20160412133217",
    "angular-route": "registry:dt/angular-route#1.3.0+20160317120654",
    "jquery": "registry:dt/jquery#1.10.0+20160417213236"
  }
}

After adding those files lets update again the package.json file so it will install typings after installing all dependencies:


...
  "scripts": {
    "postinstall": "bower install && typings install",
    ...
   }
...

Lets check - after runing npm i command the "typings" directory should appear:

Compiling

The compile command of typescript you need to call for convert your ts files into js is "tsc -p ./".
tsc takes other options of how to compile typescript from tsconfig.json file:


{
  "compileOnSave": false,
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5"
  },
  "exclude": [
    "bower_components",
    "node_modules",
    "typings"
  ]
}

It is convenient to configure package.json "scripts" zone so you can run the tsc with npm:
npm run build


..
  "scripts": {
   "build": "tsc -p ./",
    ...
   }
...

Change the code to typescript

Now you can start to convert the project to typescipt:
First - lets start with view1.js file , by rename it to view1.ts


/// <reference path="../../typings/main/ambient/jquery/index.d.ts" />
/// <reference path="../../typings/main/ambient/angular/index.d.ts" />
/// <reference path="../../typings/main/ambient/angular-route/index.d.ts" />
angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', ($routeProvider: angular.route.IRouteProvider) => {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', [() => {

}]);

See that after running "npm run build" the view1.js file generates!

see full code here: repo
Thanks for reading