Full Stack Angular, React, Spring Boot Ganpathi: August 2016

Wednesday 31 August 2016

Angular JS hide default and click show div in controller

Angular JS hide default and click show div in controller:
=========================================

<!DOCTYPE html>
<html ng-app="showhide" >
<head>
<meta name="description" content="Simplest Controllers sharing Service" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<meta charset="utf-8">
<title></title>
<script>
var app = angular.module('showhide',[]);
function MyCtrl($scope) {
$scope.myvalue = false;
$scope.showAlert = function(){
$scope.myvalue = true;
};
}
</script>

<body>
<div>
<div ng-controller="MyCtrl">
<div><button id="mybutton" ng-click="showAlert()">Click me to show</button></div>
<div>Value: {{myvalue}}</div>
<div><div ng-show="myvalue" >Here I am</div></div>
</div>
</div>
</body>
</html>

Sublime text 2/3 package control install - for HTML Beatify and other pacakge

Sublime text 2/3 package control install - for HTML Beatify and other pacakge :
--------------------------------------------------------------------------------
Download Sublime text 2 or 3 after that Ctrl+shift+p -> Package Control : if not appear follow the procedure for HTMLbeatifier

According to its webpage:

A full-featured package manager that helps discovering, installing, updating and removing packages for Sublime Text 2. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system.
What's it mean? It's a Sublime Text package that makes it super-easy & convenient to install & manage all your other Sublime Text packages. Because of the ease of use it offers, Package Control really should be the first Sublime Text package you install.

Install the Package Control package
Follow these steps:
FOR windows:
============
Go to http://wbond.net/sublime_packages/package_control/installation & copy the long command there.

Open the Sublime Text 2 console by pressing Ctrl+`.
Paste the command you copied into the Sublime Text console.
import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
sublime text2 :
==============

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None;
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Press Enter.
After Package Control installs, restart Sublime Text.

If you have licence kindly add the valid one.

sublime text3:
==============

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Press Enter.
After Package Control installs, restart Sublime Text.

NOW:
==== Package control -> type HTMLBeatify enter - > SHORTCUT -> WINODWS7 -> CRTL+ALt+shit+F for html

MMMMAAAACCC users
-----------------

Usage
Follow these steps:

Press Command-Shift-P (Mac OS X) or Ctrl-Shift-P (Windows) to open the Command Palette.
Start typing Package Control until you see the appropriate commands.
Some of the possible commands are:

Disable Package
Temporarily turn off a package (if you think it's causing problems, for instance)
Discover Packages
List all available packages in your web browser
Enable Package
If you disabled a package & now want to re-enable it
Install Package
List all available packages, allowing you to narrow down results by typing; clicking on the package will install it
List Packages
Show all installed packages, even those manually installed
Remove Package
Upgrade Package
Upgrade a specific package
Upgrade/Overwrite All Packages
Run this periodically to upgrade all your installed packages
Package Control Settings – Default
Package Control Settings – User
On other pages, I'll talk about some of the other packages you should install.

Ref:https://www.granneman.com/webdev/editors/sublime-text/packages/how-to-install-and-use-package-control/

AngularJS- How can I pass variables between controllers

AngularJS- How can I pass variables between controllers

<!DOCTYPE html>
<html ng-app="toDo" >
<head>
<meta name="description" content="Simplest Controllers sharing Service" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
angular.module('toDo',[])

.service('dataService', function() {
// private variable
var _dataObj = {};

this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
dataService.dataObj.end = "Yahoo";
dataService.dataObj.begin = "customer";
$scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
$scope.data = dataService.dataObj;
})

;
</script>
</head>
<body>
REF: http://jsbin.com/tigebaguto/edit?html,js,output
<div ng-controller="One">
<div>Type and see your text in the other box:</div>
<input ng-model="data.string">
<input ng-model="data.string2">{{data.end}}
</div>

<hr>

<div ng-controller="Two">
<div>And now type here: </div>
<input ng-model="data.string">
<input ng-model="data.string2">{{data.end}}
</div>

</body>
</html>

output:
---------

Monday 29 August 2016

Angular Bootstrap dropdown list item selection from Controller

Angular Bootstrap dropdown list item selection from Controller
==============================================================

MyApp.controller('SubjectDropDownController', function ($scope) {

$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
});

We can bind the subjects array to create a dropdown as shown in the listing below:

<div ng-controller="SubjectDropDownController">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="a in subjects"><a href="#">{{a}}</a></li>
</ul>
</div>

----------***********----------

REf: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx

Default Checkbox checked and Component Visible ased on selection:

Default Checkbox checked and Component Visible ased on selection:
------------------------------------------------------------------

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>

<input type="checkbox" ng-model="checkBoxValue" ng-init="checkBoxValue=true" id="myonoffswitch7"/>


<div ng-show="checkBoxValue">
<span class="teamsize">
<label>Team Size</label><input type="text" />
</span>
</div>


</body>

</html>

Morris.js - chart Angular js Morris.js chart - donut option select level

Morris.js - chart Angular js Morris.js chart - donut option select level

include js:
----------

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-morris-chart/1.2.0/angular-morris-chart.min.js"></script>

<div ng-controller="donutchart">
<div id="health" donut-chart donut-data='health' ng-click="healthepopup()"></div>
</div>

Inject dependency
------------------

Make sure you injected angular.morris into your angular project

angular.module('my.app', [
'angular.morris'
]).controller(controller="donutchart")({

// data from controle

$scope.health = [
{label: "total", value: 40},
{label: "Impacted",value: 38}
];

// or Option first option (25 :75) is selected by default

var health= Morris.Donut({
element: 'health',
data: [
{label: "Impacted", value: 25},
{label: "Remaining", value: 75}
],
colors: ["#FF5252","#64B5F6","#455A64"],
select :0
});
health.select(0);

});

Friday 5 August 2016

HTML, XHTML, DHTML, HTML5 ?

What is the difference between HTML, XHTML, DHTML, HTML5?

HTML:a. HTML is a markup language that is used to build static (non interactive and nonanimated) webpages.

b. HTML is Case-Insensitive. So, we can write in both uppercase and lowercase or combination of cases, this is allowed in HTML

c. No need of close tags for every opened tags in HTML

XHTML:

a. XHTML is a stricter and cleaner version of HTML.

b. HTML is Case-sensitive.

c. Each and every opened tags must be closed in XHTML

Example #1: XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

This text is bold and italic

In XHTML, all elements must be properly nested within each other, like this:

This text is bold and italic

Example #2: Empty Elements Must Also Be Closed
Empty elements must also be closed.
This is wrong:

A break: < br >
A horizontal rule:< hr >
An image: < img src="happy.gif" alt="Happy face" >

This is correct:

A break: < br />
A horizontal rule: < hr />
An image: < img src="happy.gif" alt="Happy face" / >

More XHTML Syntax Rules

Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The XHTML DTD defines mandatory elements

DHTML:

a. DHTML is NOT a language. DHTML is a term describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS.

b. DHTML is Case-Insensitive like HTML. So, we can write in both uppercase and lowercase or combination of cases, this is allowed in DHTML

c. No need of close tags for every opened tags in DHTML

HTML 5:

New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications

Wednesday 3 August 2016

Boostrap - .col-xm, .col-sm, .col-md, .col-lg, .col-xl Property and screen resultion

.col-xs extreme small size - mobile size <=544px
.col-sm Small size - Smartphone sise >=768px
.col-md Medium size- Avg Desktop size >=992px
.col-lg Large size - Bigger Desktop screen resolution >=1200px
.col-xl Extra Large size - Largest (TV) Screen >=1280px

<class=".col-xm-12" > is usual screen width implementation.

Extra small <544px	Small ≥544px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	576px	720px	940px	1140px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	1.875rem / 30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes