Thursday, June 14, 2018

Angular 2 Vs Angular Js

Angular 1.x was not built with the  mobile support. where Angular 2 is mobile oriented.

Angular 2 is Type Script.


AngularJS 1.x is very easy to set up. All you need to do is to add reference of the library. Where Angular 2 is dependent of other libraries and it requires some efforts to set up it.


Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with “Components” in Angular 2. Angular 2 is component based.Components are the building blocks of angular application.


Structural directives syntax is changed. ng-repeat is replaced with *ngFor.


In Angular 2, local variables should declare using hash(#) .


To filter output in our templates in Angular 1.x, we use the pipe character (|) and one or more filters. Where in Angular 2 they are called pipes. The syntax remains same.


Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClassand ng-model is now ngModel.


D Between AngularJS(v1.x.x) and Angular (v2.x.x or above)


Javascript  to   Type Script

ng-app to BootStrap
Filters pipe to Filter pipes
Controller to Component
Angular 1.x, two-way data binding

<input ng-model="employee.name"></input>


In Angular 2,


<input [(ngModel)]="employee.name"></input>



One of the biggest advantage of Angular Js is Dependency Injection. In Angular 2 Dependency Injection is achieved using Constructor.



In Angular 1.x, we can define a service via 5 different ways.


Factory

Service
Provider
Constant
Values


In Angular 2 we can define using Class


ng-view present in Angular 1.x is replaced with <router-outlet>


In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2, @RouteConfig{(...}) is used. ng-view present in Angular 1.x is replaced with <router-outlet>


Performance wise Angular 2 is more better.


With Angular 2 we can built single application which will work in both desktop and mobile applications. 


Angular 2 Languages:


ECMA Script 5

Type Script
ECMA Script 6

Saturday, June 2, 2018

Angular Js Directive Examples with Filters

Note:
Variables initialized in ng-init are different from the properties defined using ng-model directive. The variables initialized in ng-init are not attached to $scope object whereas ng-model properties are attached to $scope object.

ng-repeat Example


<html>

<head>

    <script src="angular.min.js"></script>



</head>

<body ng-app="" ng-init="students=['a','b','c']">

    <ol>

        <li ng-repeat="name in students">

            {{name}}

        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>


Output:


Angular Js Events:

I want to handle the click Event Now using angular Js


Example :

Javascript Code:

var myapp = angular.module("myapp", [])
            .controller("mycontroller", function ($scope) {
                var employee = [
                     { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad" ,YouHaveClickedMe :0},
                     { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", YouHaveClickedMe: 0 },
                     { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", YouHaveClickedMe: 0 }
                ];
                $scope.employees = employee;
                $scope.ClickedMeEventSelected = function (name)
                {
                    name.YouHaveClickedMe++;
                }

            });


Default

<html>
<head>
    <script src="angular.min.js"></script>
    <script src="MyJavascript.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
    <table>
        <tr ng-repeat="employee in employees">
            <td>{{employee.FirstName}}</td>
            <td>{{employee.LastName}}</td>
            <td>{{employee.Gender}}</td>
            <td>{{employee.Address}}</td>
            <td>{{employee.YouHaveClickedMe}}</td>
            <td>
                <input type="button" value="You Have Clicked Me" ng-click="ClickedMeEventSelected(employee)" />
            </td>
        </tr>
    </table>
</body>
</html>


Output:



AngularJS Filters

Filters are used to format data. Filters can be used with the binding expression or directives


Currency It formats a number to a currency format.

Date It formats a date to a specified format.



Filter It select a subset of items from an array.



Json It formats an object to a Json string.


Limit It is used to limit an array/string, into a specified number of elements/characters.

Lowercase It formats a string to lower case.

Number It formats a number to a string.

Orderby It orders an array by an expression.

Uppercase It formats a string to upper case.


Example : 

Add filters to expressions


We can add filters to expresssion by using pipe character to the expression



Javascript Code:



/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "Kumar"
});




Default Page:

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ firstName | uppercase }}</p>  
</div>    
</body>  
</html>


Output:


Example 2:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "KUMAR"
});

Default Page:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ lastname | lowercase }}</p>  
</div>    
</body>  
</html>


Output:


Add filters to directives


order by filter which is used to sort an Array


Example :

Javascript :



/// <reference path="angular.min.js" />

var myapp = angular.module('myApp', []).controller('mycontroller', function ($scope) {

    $scope.names = [

        { name: 'Z', eno: 1 },

        { name: 'B', eno: 8 },

        { name: 'C', eno: 3},

        { name: 'E', eno: 5 },

        { name: 'Q', eno: 4 },
        { name: 'I', eno: 6 },
        { name: 'P', eno: 7 },
        { name: 'U', eno: 9 },
        { name: 'O', eno: 2 }
    ];
});


Default Page


<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>Looping with objects:</p>  
<ul>  
  <li ng-repeat="x in names | orderBy:'eno'">  
    {{ x.name + ', ' + x.eno }}  
  </li>  
</ul>  
</div>     
</body>  
</html>

Output:


Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
});



Default Page:

<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


output:



Filter Example with display limitNumber of Records


Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
    $scope.rowLimit = 3;

});


Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="number" step="1" min="0" max="5" ng-model="rowLimit" />
        <br/>
        <br />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees |limitTo:rowLimit">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Output:
Example :  

The filter Filter

The filter Filter will be used only on arrays because it selects a subset of an array. It returns an array containing only the matching items.


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});


Default page:

<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
<ul>  
  <li ng-repeat="x in employees | filter : 'o'">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>

</html>

output:


Filter and Sorting an Array based on User Input:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});

Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="findfilter"></p>
<ul>  
  <li ng-repeat="x in employees | filter:findfilter">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>
</html>


output:


To sort in the ascending order we need to set the reverse to false

To sort in the descending order , we need to set the reverse to true.

Default  Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:'+FirstName'">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:

Note: + means ascending order, - means descending order


Reverse to true means descending order

<tr ng-repeat="employee in employees | orderBy:'FirstName': true">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>


Now, let me add a drop down, on the dropdown change the selected column needs to be sorted


Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        OrderBy :<select ng-model="sortColumn">
            <option value="FirstName">FirstName Asc</option>
            <option value="-Gender">Gender Desc</option>
            <option value="LastName">LastName Asc</option>
             <option value="-salary">salary desc</option>
        </select>
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:sortColumn">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
                $scope.sortColumn = "FirstName";
});


Output:

Search based on particular Column


Default Page:


<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});



Output:


Angular Js filters with Multiple Properties.

Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName"  placeholder="LastName Search"/>
         <input type="text" ng-model="filtertext.Address" placeholder="Address Search"/>
        <input type="checkbox" ng-model="ExactMatch" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext:ExactMatch">
                <td>{{ employee.FirstName }}</td>
                <td>{{ employee.LastName }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code :

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:



Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...