my test code:
var Hello = React.createClass({
  getInitialState: function() {
    return {name: 'test'};
  handleClick: function(event) {
    this.setState({name: 'abc'});
    render: function() {
        return <p onClick={this.handleClick}>
        Your name {} . Click to change.
React.renderComponent(<Hello name="World" />, document.body);

Categories: JavaSript | MVC

I am working on CI for my team,  new projects are using .net framework 4.5, our server 2008 also has framework4.5 installed, but My TFS2012 still got Error like this:
The application pool that you are trying to use has the 'managedRuntimeVersion' property set to 'v4.0'. This application requires 'v4.5'

There are two solutions I tried can fix this issue.
both need use a textpad edit the project file:
Add one of below before <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>:



Categories: Agile | | Visual studio 10/up

1. Function Review: Satisfy requirement
2. Security Review: SQL injection prevention and valid user input
3. Test Review: Accept Test and Unit Test coverage
4. Code quality Review:
a. Readable:  Name Convention, length of function
b. Solid principle
1) Single Responsibility, DRY (don't repeat yourself), make code reusable
2) Dependence,  check New instance code, check if interface defined. (testable)
3) Open Close, check "switch case", "if else" "Enum" code

c. other code refactor check
1) "out" "ref"
2) null check
d. Good performance check
e. Exception handle
f. Logging
g. Try best to remove the project build warning.

some useful ref:

Categories: Agile | C# | Interview Question

1.      AngularJS Routing  //trans app to single page app

a.      ngView and template

template can be a html file generate in fly.

b.     $routerProvider

var eventsApp = angular.module('eventsApp', ['ngResource'])

    .config(function ($routeProvider, $locationProvider) {




                controller: 'EditEventController'


$routeProvider.otherwise({redirectTo: '/events'});//default

//In the bar

<a href=”#/newEvent”>Create Event</a>

c.      Template only load once and save to cache

d.     $routeParams


    function EventController($scope, eventData,routeParams) {

        $scope.sortorder = 'name';

        $scope.event = eventData.getEvent($routeParams.eventId);


    1. $route service

//use $ to get querysting ?foo=bar


    function EventController($scope, $route) {

               $scope.sortorder = 'name';

        $scope.event = $route.current.locals.event;






                templateUrl: '/templates/EventDetails.html',

                controller: 'EventController',

                resolve: { //for slow loading page

                    event: function($q, $route, eventData) {

                        var deferred = $q.defer();

                        eventData.getEvent($route.current.pathParams.eventId) //pathparams not has querysting

                            .then(function(event) { deferred.resolve(event); });

                        return deferred.promise;





f.     $route.reload()  reload the page without refresh.


g.      HTML5 routing

Add         $locationProvider.html5Mode(true);  in .config(), will not need # in html, may nee server change to redirect it to your index.html



h.      $location service


    function MainMenuController($scope, $location) {

        console.log('absUrl: ', $location.absUrl());

        console.log('protocol: ', $location.protocol());

        console.log('port: ', $location.port());

        console.log('host: ', $;

        console.log('path: ', $location.path());

        console.log('search ', $;

        console.log('hash: ', $location.hash());

        console.log('url: ', $location.url());


        $scope.createEvent = function() {






$location.url(‘newUrl’) to navigate to a new view

$ to access to the querystring parameters



2.      Custom directives : custom elements, custom events, observe and react to Changes

a.      Create directive


return {


    var markup= “<input type=’text’ ng-model=’sampleData’ /> {{sampleData}}<br>”;





b.      Html

//html  mySample will transfer to my-sample by angular

<div my-sample></div>


<div class=’my-sample’></div>

//E,A,C and M  ‘E’:element, A:attributes C: for class


c.      Use template in directive

//use template replace first  example



                              restrict: ‘E’

                              Template:”<input type=’text’ ng-model=’sampleData’/>{{sampleData}}” 



d.      Isolate scope

eventsApp.directive('eventThumbnail', function() {

    return {

        restrict: 'E',

        templateUrl: '/templates/directives/eventThumbnail.html',

        replace: true,

        scope: {

            event: "=" //you also can use &prefix for parent scope





<li ng-repeat="event in events|orderBy:sortorder" class="span5">

            <event-thumbnail event="event" />



e.      Handle events

   eventsApp.directive('gravatar', function(gravatarUrlBuilder) {

   return {

       restrict: 'E',

       template: '<img />',

       replace: true,

       link: function(scope, element, attrs, controller) {


           attrs.$observe('email', function(newValue, oldValue) {

               if (newValue !== oldValue) {

                   attrs.$set('src', gravatarUrlBuilder.buildGravatarUrl(newValue));







//  <gravatar email="{{user.emailAddress}}"/>


f.     Use controller in directive


    .directive('greeting', function() {

        return {

            restrict: 'E',

            replace: true,

            transclude: true,

            template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>",

            controller: function($scope) {

                var greetings = ['hello'];

                $scope.sayHello = function() {



                this.addGreeting = function(greeting) {







Controller can be defined in anyway, just need controller: ‘controllerName’


Controller name can passed in directive attributes.

<greeting ctrl=’controllername’ />


..//in directive

controller: @,



g.    Sharing directive controllers via Require

<greeting finish  hindi/>

.directive('finnish', function() {

        return {

            restrict: 'A',

            require: 'greeting',

            link: function(scope, element, attrs, controller) {





    .directive('hindi', function() {

        return {

            restrict: 'A',

            require: 'greeting',

            link: function(scope, element, attrs, controller) {







h.    Directive priority and user Terminal

Priority:1 –priority can be nagitive



i.      Using require with Nested directives

<greeting ng-transclued>

               <div hindi></div>



require: '^greeting',  //lookup the directive



j.      Transclusion


k.     Using compile to Transform the dom

eventsApp.directive('repeatX', function() {

    return {

        compile: function(element, attributes) {

            for (var i=0; i < Number(attributes.repeatX)-1; i++) {

                element.after(element.clone().attr('repeat-x', 0));


            return function(scope, element, attributes, controller) {

                attributes.$observe('text', function(newValue) {

                    if (newValue === 'Hello World') {

                        element.css('color', 'red');








Text to repeat: <input type="text" ng-model="text"/>

             <div repeat-x="5" text='{{text}}'>{{text}}</div>


l.      Use jQuery in directives

Include the jqueryUI, and put something like datepicker in a directive. But it is not nessary, you can use jqueryUI directly.

Categories: JavaSript

    1. Reusable, Single Responsibility. Dependency Injection ,Testable    (SOLID)
    2. Just local not network service
    3. Registered with Angular so that Angular can inject it
    4. Ex.

                                                    i.     Create service, factory call register it to Angular as name “eventData”.


     return{ event:{name:’abc’,date:’1/1/2014’}



                                                   ii.     Inject the service in controller


    function EventController($scope, eventData) {

                   $scope.sortorder = 'name';

        $scope.event = eventData.getEvent();


                                                  iii.     Ajax call in service


     return{ getEvent:function(successed){

       $http({method:’GET’,url:’/data/event/1’}) // it is a valid http url will return json













//in controller

eventData.getEvent(function(event){ $scope.event=event;});


                                                  iv.     Promise library $q


     return{ getEvent:function(){

                     var deferred=$q.defer();


       $http({method:’GET’,url:’/data/event/1’}) // it is a valid http url will return json









return deferred.promise;



//in controller

$scope.event = eventData.getEvent()  //promise will be auto bind, access event by $scope.event is not best practice, use it pass back from view.


$scope.event.then(function(event){ console.log(event);},function(status) { console.log(status);});


                                                   v.     $resource service, build for access REST service, need include ngResouse module

Var eventApp = angular.module(‘eventsApp’, [‘ngResource’])

//simple resource immediately return

return $resource(‘/data/event/:id’,{id:’@id’}).get({id:1});


 eventsApp.factory('eventData', function ($resource, $q) {

    var resource = $resource('/data/event/:id', {id: '@id'});

    return {

        getEvent: function () {

            var deferred = $q.defer();

            resource.get({id: 1},

                function (event) {



                function (response) {




            return deferred.promise;


        save: function(event) {

            var deferred = $q.defer();

   = 999;


                function(response) { deferred.resolve(response);},

                function(response) { deferred.reject(response);}


            return deferred.promise;






    1. $anchorScroll service, can work with html routing

$scope.scrollToSession= function(){ $anchorScroll(); }

    1. $cacheFactory service

var eventsApp = angular.module('eventsApp', ['ngResource', 'ngCookies'])

    .factory('myCache', function($cacheFactory) {

        return $cacheFactory('myCache', {capacity:3});





    function CacheSampleController($scope, myCache) {

        $scope.addToCache = function(key, value) {

            myCache.put(key, value);



        $scope.readFromCache = function(key) {

            return myCache.get(key);



        $scope.getCacheStats = function() {






g.       $compile service, It was used whenerver a page is loaded, process directive.  

You also can use it in your code, it can add a directive dynamically.

  $scope.appendDivToElement = function(markup) {

            return $compile(markup)($scope).appendTo(angular.element("#appendHere"));



<div class="container">

    <div ng-controller="CompileSampleController" style="padding:20px;">


        <div id="appendHere"></div>


        name:<input type="text" ng-model="name"/><br/>

        markup: <input type="text" ng-model="markup"/><br/> //markup = ‘<h3>{{name}}</h3>’

        <button class="btn" ng-click="appendDivToElement(markup)">Append</button>





    1. $parse service, is used to evaluate an expression and turn that expression to function.

var fn= $parse(‘1+2’);



var getter=$parse(‘’);

var setter=getter.assign;

var context={event:{name:’xxxx’}};


setter(context, ‘bbbbb’);


i.       $locale Service, angular-local_es.js for different language.



j.       $timeout service same like window.setTimeout, but is Angular registered. 


k.      $exceptionHandler service

eventsApp.factory('$exceptionHandler', function() {  //this service with $

    return function (exception) {

        console.log("exception handled: " + exception.message);



l.       $filter service


m.    $cookieStore Service  (Note,it not have function for expire date)


    function CookieStoreSampleController($scope, $cookieStore) {

        $scope.event = {id: 1, name:"My Event"};

        $scope.saveEventToCookie = function(event) {

            $cookieStore.put('event', event);


        $scope.getEventFromCookie = function() {



        $scope.removeEventCookie = function() {






n.      Other services: $interpolate $log $rootScope $window $document $rootElement

$rootScope is one per App, Prototypal Inheritance(all child $scope able to access it) , Injectable

Use too much Dom Services is not best practice.

$interpalateProvider can change {{}}expression delimeters.

Categories: JavaSript

There is full lists :link

First we take look the Tools related with Visual Studio:

MSTest, the unit test framework in Visual Studio

Coded UI Test

Microsoft Fakes,

Microfoft Test Manager

Visual Studio Memory Profiler

Visual Studio Performance profiler

Visual Studio Load Test, part of VS Ultimate(Testing Performance and Stress Using Visual Studio Web Performance and Load Tests)

TestDriven.Net, unit test running for Visual Studio

Other Test tools I have used:


JetBrains ReSharper UnitTest , 



Categories: Agile | UnitTest | Visual studio 10/up

February 27, 2014
@ 09:33 AM
  1. Keys point of AngularJS:
    1. MVC
    2. Two way binding
    3. Dirty Checking
    4. Dependency Injection
    5. Support TDD
  2. MVC Structure:
    1. Controller: Central components
    2. View: Directives
    3. Services: Complex business logic
    4. Model: Data object
  3. Simple example

<!doctype html>
<html lang="en" ng-app>
    <meta charset="utf-8">
    <title>Hello World</title>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
        function HelloWorldCtrl($scope) {
            $scope.helloMessage = "Hello World";


  1. Angular Seed: is a zip file for you use as start point application
  2. Controller & Scope

Controller => Scope  <==> View

Controller create scope, scope contains model, View can bind to function the scope.

  1. Data Express
    1. Model can be any type of javascript objects
    2.  {{session.upVoteCount}}
    3. Bind image:  <img ng-src="{{event.imageUrl}}" alt="{{}}" />
  2. Built-in Directives
    1. Tag : <ng-form />(Not supported by IE)
    2. Attribute:  <div ng-form>
    3. Class: <div class=”ng-form“>
    4. In Html comments: <!—ng-form -->
  3. Event Directives
    1. ngClick, ngDblClick, (note: there no rightClick event)
    2. ngMusedown, ngMouseenter, ngMouseleave, ngMousemove,ngMouseover,ngMouseup
    3. ngChange:  

<input type=”checkbox”  ng-change=”handelChange()” ng-model=”property” />

    1. ngApp, ngBind,ngBindTemplate,ngBindHtml,ngBindHtmlUnsafe

ngBind don’t support multiple bindings, ngBindTemplate support multiple bindings

    1. ngHide, ngShow, ngCloak (ngCloak avoid flashes on slower client computer)

<body ng-cloak> //to avoid a flash of unbouned html

    1. ngStyle, ngClass.

ngClass directive has two companion directives: ngClassEven & ngClassOdd                           

    1. IE not support : ngDisabled, ngChecked, ngMultiple, ngReadonly, ngSelected .
    2. ngForm, ngSubmit, ngHref, ngSrc

ngForm let nest form. ngSrc delay fetching a image until after binding.

    1. ngNonBindable (tell angular not bind)

<div> {{1+2}} </div> //display 3

<div ng-non-bindable> {{1+2}} </div> //display {{1+2}}

9. Filters
    1.  {{expression | filter}} 
    2.  Ex.  {{“abc” | uppercase}}  {{3.14169 | number:2}}  {{34 | currency}}

 {{ | date:’mediumDate’}}

    1. Building filters: uppercase, lowercase ,number, currency, date ,json
    2. ngRepeat filter:   orderBy, limitTo, filter (there is a filter name  ‘filter’)
    3. custom filter: 


               return function( input /*,parameters */){ return output;}


10. Two Way Binding
    1. ngModel : bind to input, select, textarea

               <input type=’text’ ng-model=”” /> //the value changed, the updated

    1. ngClick to bind save or cancel action
    2. Two way binding will update on every key stroke.
    3. Property will be created automatically. (week script language ;) )

    11. Validation

    1. Requied

<input id=’name’ type=’text’ required ng-model=’’ />

    1.  ngParrten

<input id=’date’ type=’text’ required ng-pattern=”/\d\d/\d\d/\d\d\d\d/” ng-model=’’ />


    1.  Form properties, CSS
    2. Fire Validation
    3. <form name=”newEventForm”>

<button type=”submit” ng-disabled=”newEventForm.$invalid” ng-click=”saveEvent(event,newEventForm)” />

Categories: JavaSript

February 27, 2014
@ 09:21 AM
It's the tie to go along with jQuery's tux, and Backbone.js's suspenders

Don't need write your own utility.js...use underscore.js.

Underscore is more suited to data manipulation and brings many Ruby methods to JavaScript. There is some crossover, but not enough to make them mutually exclusive.

Categories: JQuery