Showing posts with label angularjs. Show all posts
Showing posts with label angularjs. Show all posts

Monday 16 September 2019

Angularjs listing example with JSON

Angularjs listing example with JSON



[script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"][/script]
[script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"][/script]
[style]
    .secdsubmenu{position:absolute; right:22px; top:2px; border:1px solid #eee; background:#fff; z-index:99}
    .secdsubmenu ul {padding:10px; margin:0}
    .secdsubmenu ul li{list-style:none; font-size:13px; color:#333; padding:0; margin:0; white-space:nowrap; border-bottom:1px solid #eee; height:30px; line-height:30px; }
    .secdsubmenu ul li a{color:#333; text-decoration:none}
[/style]
<div ng-app="myAppName" ng-controller="myCtrl">
<div class="inputfield">
<input ng-model="$ctrl.query" placeholder="Search" type="text" />
    </div>
<table border="1" cellpadding="2" cellspacing="0" style="width: 500pxpx;">
        <tbody>
<tr>
            <th>Title <button ng-click="sortBy('Title')">&gt;</button></th>
            <th>Date &amp; Time</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
<tr ng-repeat="x in names| filter:$ctrl.query |  orderBy:Title:reverse">
            <td>{{x.Title}}</td>
            <td>{{x.DateTime}}</td>
            <td>{{x.Status}}</td>

            <td><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#" ng-click="mySubmenu = !mySubmenu">...</a>
                <br />
<div class="secdsubmenu" ng-show="mySubmenu">
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Edit</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Delete</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">View URL</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Embeded Code</a></li>
</ul>
</div>
</td>
        </tr>
</tbody></table>
</div>
[script]
    var myApp = angular.module('myAppName', ['ngAnimate']);
    myApp.controller('myCtrl', function($scope, $http) {
        $http.get("load_data.php")
                .then(function(response) {
                    $scope.names = response.data.records;
                });
        $scope.mySubmenu = false;

        $scope.Title = 'title';
        $scope.reverse = true;

        $scope.sortBy = function(title) {
            $scope.reverse = ($scope.title === title) ? !$scope.reverse : false;
            $scope.title = title;
        };
    });
[/script]
JSON Data load_data.php
    
{ "records":[ 
{"Title":"Title 1","DateTime":"Jul 29 2016, 01:00 AM","Status":"Completed"}, 
{"Title":"Title 2","DateTime":"Jul 28 2016, 02:00 PM","Status":"Completed"}, 
{"Title":"Title 3","DateTime":"Jul 27 2016, 03:00 AM","Status":"Completed"}, 
{"Title":"Title 4","DateTime":"Jul 26 2016, 04:00 AM","Status":"Completed"}, 
{"Title":"Title 5","DateTime":"Jul 25 2016, 05:00 AM","Status":"Completed"}, 
{"Title":"Title 6","DateTime":"Jul 24 2016, 06:00 AM","Status":"Completed"}, 
{"Title":"Title 7","DateTime":"Jul 23 2016, 09:00 AM","Status":"Completed"},
]}

Saturday 10 February 2018

Difference Between Reactjs and Angularjs

Difference Between Reactjs and Angularjs

Technology React JS Angular JS Angular 2
Author Facebook Community Google Google
Type Open Source JS library Fully-featured MVC framework Fully-featured MVC framework
Tool Chain High Low High
Language JSX JavaScript, HTML TypeScript
Learning Curve Low High Medium
Packaging Strong Weak Medium
Rendering Server Side Client Side Server Side
App Architecture None, combined with Flux MVC Component-Based
Data Binding Uni-Directional Bi-Directional Bi-Directional
DOM Virtual DOM Regular DOM Regular DOM
Latest Version 16.2.0 (November 28, 2017) 1.6.8(December 18, 2017) 5.2.3 (31 January 2018)



Question: What are the Advantages of angularjs?
  1. It is a full-fledged framework that can run in any browser or platform.
  2. Two-way data bind which means data sync in view and model.



Question: What are the Advantages of Reactjs?
  1. JSX(JavaScript syntax Extension) is a javascript syntax that enables HTML quotes and usage of HTML tag syntax for subcomponents rendering.
  2. Prompt rendering is features of React that gives a significant edge over Angular.
  3. ReactJS is working on javascript whereas Angular is working on HTML. JavaScript is far more robust, than HTML, that makes React far more simple.