Monday 6 June 2016

A Deep dive into Angular 2 basics and difference between the versions


In this post we are going to see the new features present in the Angular 2, and the differences between the version 1.x and 2.0

First of all, i don't knew who is the person recommends the Angular 2 with, this kind of major changes, now currently angular 1.x versions are have a good popularity among the developers which is very easy to develop a single page applications. angular 1.x versions have many major advantages which makes that popular among the industry.

Features:
1. Two way binding
2. Routing
3. Change Detection
4. Directives
5. Services.
6. Controllers and the Scope concept.

Mainly the Two way binding makes the good feedback among the developers to develop the UI far better than any other framework. But recently google decide to soon release the angular 2 which have some major break changes in the framework.  Google and Microsoft are jointly working in the angular 2 framework,  angular 2 uses Typescript. 

Changes or features present in Angular 2

1 .No more Two way binding
      The major change is there is no more two way binding present in angular , all are uni directional, actually the thing which makes the angular popular among the industry in Two way binding ng-model, i.e is no more present in the up coming release. Angular team clearly indicates that unidirectional flow of data will be present in the angular 2., Here after there is no more $digest loop every time when ever a two way binding occurs.

2. New Router:
      The new release consists of a new router concepts.

3. No $scope
       Hereafter there is no concept called $scope , for a newbie to learn the concept of $scope is difficult, so to avoid the difficulties in learning they removed that concept

4. No Controller
       Angular 2 remove the concepts of controller , rather they uses the concept called web components where every component consists of View, component and class implementation.


@Component({
  selector: 'emp-view',
  componentServices: [
    emplist
  ]
})
@Template({
  url: './templates/emp-view.html',
  directives: [Foreach]
})
class EmpView{
  constructor() {
    this.employees = emplist.get();
  }
  addEmp(newemp) {
    this.employees.push(newemp);
  }

}

5. Fast change detection:
     Angular team changed the change detection mechanism for the newer version, new version refers many libraries implementation about change detection so angular team decided to give a optimized change detection.

6.Written in Typescript
   Angular 2 is written in Typescript , Typescript is statically typed language, so we can get the type errors in compile time itself , typescript is a superscript of ES6, ES6 is a superset of ES5. which are being transpiled to javascript

7 Virtual Dom concept 

8. Improved Dependency Injection

9. supporting mobile

But angular 2 doesnt have a backward compatibility support, so  many applications which are developed in version 1.x can use that if there is no performance issue, because if they want to change or migrate to version 2.0 then it is a huge cost for them, it is better to have a library which have more features than compact small performance increase.

from my concern google destroying the growth of  angular by giving a major change especially in removing of two way binding.

From this post you can see some of the changes takes place in the angular 2 version.


Creating a Star Control in HTML using Angular Js


In this article we are going to see how to create a Star Rating control in the HTML as Element or as Attribute using the Angular js. To do this we are going to take create the Directive in Angular js, First Let we see what kind of element or Attribute we are going to create and what kind of output it will give ?

Below Code Snippet is we trying to do





Output:




From the Code we can render a Star Control, using the some of the properties it will have some  behavior change.

custom-rating is the act as element or attribute for render a star control, it have few options
readonly : set true for this attribute if you want the star control as readonly
max : set the number of star you want to render
star-size : size of the star control
rating-value : specify the rating value of a control
on event is there to trigger for the change in the star value when user clicked, then use the 
on-rating-changed with a function passing parameter in the name of rating , which consists the value, now you can trigger the value to the server.

Now we start to build the directive.

Add the following jquery in the HTML.


    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="js/angular.min.js"></script>

Then start writing coding in Angular.

Create a Module and controller

First step is create a module in separate js file and include in the HTML.

        var myApp = angular.module('myApp', []);

        myApp.controller('BlogController'function ($scope, $window) {
            $scope.sample = 'Blog Testing';

            $scope.rating = 5;
            $scope.rating2 = 1;

            $scope.saveRating = function (rating) {
                console.log('Rating selected ' + rating);
            };

            $scope.Sample = function (rating) {
                console.log('sample ' + rating);
            };

        });


Create a Directive

        myApp.directive('customRating'function () {
            return {
                restrict: 'AE',
                template: '<ul class="rating">' +
                         '<li ng-repeat="star in stars"  ng-class="star" ng-                                                click="toggle($index)">\u2605</li>' +
                         '</ul>',
                scope:
                {
                    ratingValue: '=',
                    max: '=',
                    readonly: '@',
                    starSize: '=',
                    onRatingChanged: '&'
                },
                link: function (scope, element, attrs) {

                   
                    var updateStars = function () {
                        scope.stars = [];
                        for (var i = 0; i < scope.max; i++) {
                            scope.stars.push({ filled: i < scope.ratingValue });
                        }
                    };

                    element.css('font-size', scope.starSize);

                   
                    scope.toggle = function (index) {
                        if (scope.readonly && scope.readonly === 'true') {
                            return;
                        }
                        scope.ratingValue = index + 1;

                        scope.onRatingChanged({ rating: index + 1 });
                    };

                   
                    scope.$watch('ratingValue'function (oldval, newval) {
                        if (newval) {
                            updateStars();
                        }
                    })

                }

            }
        });




So now when include the custom js in the Html, we can able to render the Star control .Now when ever user change the value in one star it affects others because of binding, at the same time we are trigger the changes to the server.



From this article you can learn how to render a star control tag in Html using Angular Js.




UI-Sortable directive not works for the drag while sorting between the elements on the first drag or first click using jquery 2.0.0 and Angular js - Resolved


In this article we are going to see a bug, which is present in the jquery,because of that it affects the Angular ui-sortable directive.now let we see about the sorting between the elements by dragging using angular js, To do this we need following references.


<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/jquery-ui.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<script type="application/javascript" src="js/angular.min.js"></script>
<script type="application/javascript" src="js/angular-ui.min.js"></script>

  
In this sample we take two different kind of sorting elements, one with static element, another with dynamic elements i.e adding elements at runtime using angular js

Code:

       <div style="float: left; margin: 20px">
            <h3>
                static element</h3>
            <ul ui-sortable="sortoptions" class="well" style="width: 400px">
                <li style="" class="well li">LG</li>
                <li style="" class="well li">Samsung</li>
                <li style="" class="well li">Videocon</li>
                <li style="" class="well li">Onida</li>
            </ul>
        </div>

        <div style="float: left; width: 400px; margin: 20px">
            <h3>
                dynamic element</h3>
            <ul id="sortid" ui-sortable="sortoptions" class="well">
                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>
            </ul>
        </div>




Output:

Above dynamic element tag not able to drag and sort on first attempt, because of jquery 2.0.0



From the elements, both can be sort using dragging but there is a one issue with the second element, the second rendered elements can't able to drag on the first attempt, but it can drag and sort in second attempt, this issue only occurs in Jquery 2.0.0 when elements are rendered dynamically using ng-repeat. But it works correctly when using Jquery less than or above 2.0.0, This is working correctly for static declared elements Now we are going to see how to fix this issue, to drag the dynamically rendered elements in the first attempt for jquery 2.0.0 version


Why this issue occurs in dynamically rendered elements ?
           When adding the directive ui-sortable to the root tag, that particular element is rendered first,before the rendering of the child elements, because of this behavior drag is fails on the first attempt, it cant able to recognize the event. on the second attempt it success for the dynamic added elements.

How to fix this issue ?

For dynamic rendered elements,  adding a new directive along with ui-sortable directive, add the directive init-sort which i mention before , it will take care remaining things,now your elements are drag and sortable on the first attempt itself.

Directive: 
        samApp.directive('initSort'function ($compile) {
            return {
                restrict: 'A',
                scope: {
                    initSort: '='
                },
                transclude: false,
                link: function (scope, element, attrs) {
                    var firsttime = 0;
                    element.on('mouseover'function () {
                        if (firsttime == 0) {
                            element.sortable("refresh");
                            firsttime = 1;
                            console.log('Triggered');
                        }
                    });
                }
            };
        });



HTML
        <div style="float: left; width: 400px; margin: 20px">
            <h3>
                dynamic element</h3>
            <ul id="sortid" ui-sortable="sortoptions" init-sort class="well">
                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>
            </ul>
        </div>



Output:



Full Code:
HTML 


<body ng-app="samApp">
    <div ng-controller="sampleController">

        <div style="float: left; margin: 20px">
            <h3>
                static element</h3>
            <ul ui-sortable="sortoptions" class="well" style="width: 400px">
                <li style="" class="well li">LG</li>
                <li style="" class="well li">Samsung</li>
                <li style="" class="well li">Videocon</li>
                <li style="" class="well li">Onida</li>
            </ul>
        </div>

        <div style="float: left; width: 400px; margin: 20px">
            <h3>
                dynamic element</h3>
            <ul id="sortid" ui-sortable="sortoptions" init-sort class="well">
                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>
            </ul>
        </div>

    </div>
    <script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
    <script type="application/javascript" src="js/jquery-ui.min.js"></script>
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
    <script type="application/javascript" src="js/angular.min.js"></script>
    <script type="application/javascript" src="js/angular-ui.min.js"></script>
    <script type="application/javascript" src="ang/samApp.js"></script>


</body>


Angular JS

        /**
        * Created by Rajesh on 20-08-2014.
        */

        var samApp = angular.module('samApp', ['ui']);

        samApp.controller('sampleController'function ($scope) {

        $scope.Items = [
                   { name: 'Rajesh' },
                   { name: 'Suresh' },
                   { name: 'Aneesh' },
                   { name: 'Gokul' }
             ];

            
        $scope.sortoptions = {
                update: function (event) {

                },
                stop: function (e, ui) {
                    console.log('stop item', ui.item.scope());
                    console.log('stop item', ui.item.sortable);
                    var item = ui.item.sortable.moved;
                    var fromIndex = ui.item.sortable.index;
                    var toIndex = ui.item.sortable.dropindex;
                    console.log(item, fromIndex, toIndex, $scope.dropTarget);
                },
                start: function (e, ui) {
                    console.log('start item', ui.item.scope());
                }
            };



        });

        samApp.directive('initSort'function ($compile) {
            return {
                restrict: 'A',
                scope: {
                    initSort: '='
                },
                transclude: false,
                link: function (scope, element, attrs) {
                    var firsttime = 0;
                    element.on('mouseover'function () {
                        if (firsttime == 0) {
                            element.sortable("refresh");
                            firsttime = 1;
                            console.log('Triggered');
                        }
                    });
                }
            };
        });




From this post you can see how to drag the elements in the first attempt when JQuery is 2.0.0.