Saturday, 29 April 2017

Installing GitHub for Windows failed - Resolved

Installing github for windows sometimes failed, in this post we are going to see how to resolve this issue and make a successful installation, This installation may fail after 80% or 95%, now we see what kind of error it is.

Application installation did not succeed.  Cannot locate application files on the server.  Contact the application vendor or your administrator for assistance.

Clicking on Details...

PLATFORM VERSION INFO
    Windows             : 6.1.7601.65536 (Win32NT)
    Common Language Runtime     : 4.0.30319.18034
    System.Deployment.dll       : 4.0.30319.17929 built by: FX45RTMREL
    clr.dll             : 4.0.30319.18034 built by: FX45RTMGDR
    dfdll.dll           : 4.0.30319.17929 built by: FX45RTMREL
    dfshim.dll          : 4.0.41209.0 (Main.041209-0000)

SOURCES
    Deployment url          : http://github-windows.s3.amazonaws.com/GitHub.application
    Server                         : AmazonS3
    Application url           : http://github-windows.s3.amazonaws.com/Application%20Files/GitHub_1_0_47_0/GitHub.exe.manifest
     Server                        : AmazonS3

IDENTITIES
    Deployment Identity     : GitHub.application, Version=1.0.47.0, Culture=neutral, PublicKeyToken=317444273a93ac29,
    processorArchitecture = x86
    Application Identity        : GitHub.exe, Version=1.0.47.0, Culture=neutral, PublicKeyToken=317444273a93ac29,
    processorArchitecture = x86, type=win32


Now we see how to resolve this issue,
Download the github from the following url in Internet Explorer, Internet explorer only give a success installation

https://github-windows.s3.amazonaws.com/GitHub.application


From this post you can install the github for windows

create a component in angular 1.5 using Typescript

In this post we are going to see how to create the component in angular 1.5 using Typescript. first we have to understand what is component, component is a isolated directive with some functionalities, most of functionalities are look like same for directive and components, few things will change, we will see the how to write the components using Typescript

First we have to create the interface for bindings parameters, then implement that in a controller , later assign this controller to component, in component we have bindings parameters there also we have to specify the parameters.


export interface  StarBindings {
        ratingValue: any;
        max: number;
        readonly: boolean;
        starSize: number;
        onRatingChanged: (value: any) => any; }


In component

this.bindings = {
                ratingValue: '=',
                max: '=',
                readonly: '@',
                starSize: '=',
                onRatingChanged: '&'
            };



Then write logic inside the controller, later access everything using the $ctrl, which is automatically created alias by component.

module app.components {

    export interface  StarBindings {
        ratingValue: any;
        max: number;
        readonly: boolean;
        starSize: number;
        onRatingChanged: (value: any) => any;
    }

    class  StarController implements  StarBindings {

        public ratingValue: any;
        public max: number;
        public readonly: boolean;
        public starSize: number;
        public onRatingChanged: (value: any) => any;
        public stars: any =[];

        static  $inject = ['$log','$element','$scope'];

        constructor(private $log: ng.ILogService, private $element: ng.IAugmentedJQuery, 
                    private $scope: ng.IScope){

        }

        $postLink = (): void => {
            this.$log.info('post link invoked');
            this.drawStar();
        };

        drawStar = (): void => {
            this.$element.css('font-size',this.starSize+'px');
            this.$scope.ratingValue = 0;
            let t = this;
            this.$scope.$watch('ratingValue', function (oldval, newval) {
                if (newval) {
                    t.updateStars();
                }
            });

            this.$scope.ratingValue = this.ratingValue;

        };



        toggle =  (index: number) => {
            if (this.readonly && this.readonly === true) {
                return;
            }
            this.ratingValue = index + 1;
            this.$scope.ratingValue = this.ratingValue;
            this.onRatingChanged({ rating: index + 1 });

        };




        updateStars = (): void => {
            this.stars = [];
            for (let i:number = 0; i < this.max; i++) {
                this.stars.push({ filled: i < this.ratingValue });
            }
        }
    }

    class StarComponent {

        public bindings: any;
        public controller: any;
        public template: string;

        constructor(){
            this.template = '<ul class="rating">' +
                                '<li ng-repeat="star in $ctrl.stars" ng-class="star"'+
                                   ' ng-click="$ctrl.toggle($index)">' +
                                '\u2605' +
                                '</li>' +
                            '</ul>';
            this.controller = StarController;
            this.bindings = {
                ratingValue: '=',
                max: '=',
                readonly: '@',
                starSize: '=',
                onRatingChanged: '&'
            };
        }

    }

    angular.module('myapp').component('star',new StarComponent());
}

Here you can see that i am using the $postLink method to render the star , $postLink is a predefined method called by component, Assign the template, bindings, controller inside the component, star rendering logic are present inside the controller, i am using the $watch  here to render the star in the when user click.

app.controller.ts


/// <reference path="../node_modules/@types/angular/index.d.ts" />


module mymod{
    class MyController{

        private name: string;
        private sample: string;
        private title: string;
        private rating2: number;

        static $inject = ['$log']

        constructor(private $log: angular.ILogService){
            this.title = "Angular with Typescript";
            this.name = 'rajesh1';
            this.sample = 'raise';
            this.rating2 = 4;
        }

        save = (rating: any): void => {
            console.log('rating changed');
            console.log(rating);
        };


        dosomething = (): void => {
            window.setTimeout(3, () => { this.$log.warn('do something'); });
            
        }

    }
    var myApp= angular.module('myapp',[]);
    myApp.controller('mycontroller',MyController);
}



Html


<!DOCTYPE html>
<html lang="en" ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-controller="mycontroller as vm">
      
        <h2 style="margin:20px">{{vm.title}}</h2>
        <br/>

        <star rating-value="vm.rating2" max="10" star-size="45"
              on-rating-changed="vm.save(rating)"></star>

        <link href="styles.css" rel="stylesheet" />
        <script src="bower_components/angular/angular.min.js"></script>
        <script src="app/app.js"></script>
        <script src="app/star.component.js"></script>

    </body>
</html>


CSS:


.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}

ul.rating {
    display: inline-block;
}

.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.rating .filled {
    color: red;
}


Output:



From this post you can learn how to create components in angular 1.5 using Typescript