AngularJS

REFUND POLICY

I follow a refund policy for my own service.

->I would like to get payment by milestones/weekly/bi-weekly/monthly, there will be no refund for completed time and/or milestones (as agreed by the client).

->If company/Client want to stop contract then we can talk mutually for the current/last payment how we wanna deal that.

Standard
AngularJS, HTML5, JavaScript

HTML5 DragDrop -Part 1 : With HTML5 , JavaScript

In The Current World of Web , Drag and Drop on the Browser has been a required Feature for many People . And YES Its much easy with HTML5 Drap&Drop . In my Example , I used HTML5 DragDrop with the help of jQuery and JavaScript .

My My App has been developed on AngularJS framework.

DragDrop

Here is my HTML Code :::

<body>
        
        <h1 style="color: blueviolet">Drag a number and Drop that to Recycle Bin</h1><br/>

        <div ng-controller="IndexCtrl">
            <ul class="unstyled">
                <li ng-repeat="tile in tiles">
                    <img id="{{$index}}" height="50" width="50" draggable="true" ondragstart="drag(event)" src="{{tile.imgUrl}}" />
                    <br /><br />
                </li>
            </ul>

            <div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin-top: 150px" class="bottom">
                <img height="100" width="105" src="Images/RecycleBin.png" />
            </div>
        </div>
    </body>

This is the Source of my Numbers which lies on my AngularJS Controller’s Scope .

$scope.tiles = [
        { text: '1', imgUrl: setting.imageUrl + 'orderedList1.png' },
        { text: '2', imgUrl: setting.imageUrl + 'orderedList2.png' },
        { text: '3', imgUrl: setting.imageUrl + 'orderedList3.png' },
        { text: '4', imgUrl: setting.imageUrl + 'orderedList4.png' },
        { text: '5', imgUrl: setting.imageUrl + 'orderedList5.png' }
    ];

And The Implementations of the HTML5 DragDrop Events are as follows :::

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var nodeToRemove = $("#" + data)[0];
    ev.target.appendChild(nodeToRemove);
}

After Dragging each Number , We can see in the DOM that every Item is going inside the Recycle Bin Node like below :

DragDOM

But If our Site needs massive this kind of thing , The DOM will become more heavy , so if our Requirements does not need those Dropped Items in the future , We can just remove the Item , by this our DOM will have less weight .

ev.target.removeChild(nodeToRemove);

In Part 2 of this Article, Drag&Drop will be done by AngularJS Directive .

Cheers

Standard
AngularJS, HTML5

AngularJS Routing : Part 2 – make # (Hash) invisible from URL in SPA

Before reading this Article , Please check out AngularJS Routing : Part 1 Create a Single Page Application (SPA) first .

Every AngularJS Dev likes the way that the routing of AngularJS works . It uses # (Hash) in the URL like below –

###

But Its not very readable for Public User , non Tech people , mass people of the world , so its better to make the # invisible from the URL . And Yes, Its real EASY !!!

First Set the Html5Mode to true in LocationProvider . Now the app.js file will be like :::

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

    $locationProvider.html5Mode(true);

    $routeProvider.when("/", { templateUrl: "/partials/home.html" }).
                   when("/profile", { templateUrl: "/partials/profile.html" }).
                   when("/contact", { templateUrl: "/partials/contact.html" }).
                   otherwise({ redirectTo: '/' });

});

And my index.html code will be like below now :::

<tr>
                <td>
                    <a href="/">Home <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="/profile">Profile <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="/contact">Contact <i class="icon-arrow-down"></i></a>
                </td>
            </tr>

My SPA Site is now without that # …

#less

Standard
AngularJS, HTML5

AngularJS Routing : Part 1 – Create a Single Page Application (SPA)

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

And developing SPA has been so easier with AngularJS Route Service .

Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature we can implement deep linking, which lets us utilize the browser’s history (back and forward navigation) and bookmarks.

I am gonna show how to build simple SPA within 1 hour ūüôā

Here is my index.html Code ::: (ASP.Net developers can think this index.html as MasterPage)

<!DOCTYPE html>
<html ng-app="SpaApp">
<head>
    <meta charset="utf-8" />
    <title>My SPA Site</title>
    <script src="lib/angular.min.js" type="text/javascript"></script>    
    <script src="app/app.js" type="text/javascript"></script>
    <link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <a href="/">
            <h1>My SPA Site</h1>
        </a>
        <br />
        <table>
            <tr>
                <td>
                    <a href="/">Home <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="#/profile">Profile <i class="icon-arrow-down"></i></a>
                </td>
                <td>
                    <a href="#/contact">Contact <i class="icon-arrow-down"></i></a>
                </td>
            </tr>
        </table>
        <br />
         <div ng-view></div>
    </div>
</body>
</html>

The $route service is usually used in conjunction with the ngView directive. The role of the ngView directive is to include the view template for the current route into the layout template, which makes it a perfect fit for our index.html template.

(This ngView directive can be compared as Main ContentPlaceHolder of ASP.Net , just saying for .Net Devs )

My app.js code is like below :::

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

spaApp.config(function ($routeProvider) {

    $routeProvider.when("/", { templateUrl: "/partials/home.html" }).
                   when("/profile", { templateUrl: "/partials/profile.html" }).
                   when("/contact", { templateUrl: "/partials/contact.html" }).
                   otherwise({ redirectTo: '/' });

});

In this RouteProvider we can define URL and HTML Template .

And For this App , I have 3 Partial Views . The codes of these views are like below :::

home.html
———-

<div>
    <h2>This is Home Page</h2>
</div>

profile.html
————-

<div>
    <h2>This is Profile Page</h2>
</div>

contact.html
————-

<div>
    <h2>This is Contact Page</h2>
</div>

So Here , you are done with the simple SPA Site ūüôā

The Site will look like – >

#

To Read Part 2 -> Please Click AngularJS Routing : Part 2 ‚Äď make # (Hash) invisible from URL in SPA

Standard

My Index.html looks like :::

<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <title>Dom Magic</title>   
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script type="text/javascript" src="dom.js"></script>
    <link rel="stylesheet" href="styles/dom.css">
</head>
<body>
<my-widget>
    <div id="one" class="RedBox"></div>
    <div id="two" class="GreenBox"></div>
</my-widget>
</body>
</html>

After running this WebApp , We will see the UI like this Image …

Blog

My dom.css has this style :::

.RedBox
{
    position: relative;
    background-color: RED;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer
}

.GreenBox
{
    position: relative;
    background-color: GREEN;
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
    cursor: pointer
}

My dom.js has the directive (Custom HTML Tag) which is used at index.html page .

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

myModule.directive('myWidget', function () {
    linkFn = function (scope, element, attrs) {

        var boxOne = element.children()[0];
        var boxTwo = element.children()[1];

        var animateRight = function () {
            $(this).animate({
                left: '+=50'
            })
        }

        var animateDown = function () {
            $(this).animate({
                top: '+=50'
            })
        }

        $(boxOne).click(animateDown);
        $(boxTwo).click(animateRight);
    };

    return {
        restrict: 'E',
        link: linkFn
    }
});

AngularJS

AngularJS – DOM Manipulation With Custom Directive and jQuery Animation

Image
AngularJS

Custom HTML Tag !!! Shocked ? Easy with AngularJS – Directive

Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to ‚Äúdecorate‚ÄĚ elements with behavior and manipulate DOM attributes in interesting ways.

First We need to Add AngularJS Library , and add reference on our Index.html Page . Index.html page code looks like below :::

<!DOCTYPE html>
<html ng-app="HelloWorldApp">
<head>
    <title>My Custom HTML Tag Directive</title>
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script src="app/MyDirective.js" type="text/javascript"></script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>

Here We can see is not an HTML tag , but we can create a custom HTML tag easily by using AngularJS Directive.

Here is my AngularJS code of MyDirective.js :::

angular.module('HelloWorldApp', [])
    .directive('helloWorld', function () {
        return {
            restrict: 'E',
            template: '<div style="background-color:#D8D8D8;">Hello World By Shahjada</div>'
        }
    });

Standard