thormayer's Blog

Thursday, May 29, 2014

CODE: Simple 'Hello World' app in Angular.js

[caption id="" align="aligncenter" width="523"] angular

Hottest topic nowadays, Angular.js[/caption] Angular.js (i.e. "Angular") is one of the most hottest topics in programming nowadays (which is justified.. the MV* framework is taking off quiete rapidly..), Google's work on Angular's framework is awesome. and I really recommend to take some time to observe some of the new features that can come handy..

ng-'Hello World' Simple App

Today I will review the simple (and mandatory!) 'Hello World' first app, so you can take it from there.. First of all, all you need to do, is go to angular.js.org website and download Angular script from there, you can also download it directly from here from github after setting up your project, take a look at this code in front of you:

	<!DOCTYPE html>
	<html lang="en" ng-app>
	<head>
	<title></title>
	</head>
	<body>
	<h2>Index</h2>

	<div ng-controller="HelloCtrl">

	{{hello}}
	</div>


	<script>

	function HelloCtrl($scope) {

	$scope.hello = "hi there!";

	}

	</script>
	<script src="~/Scripts/angular.js"></script>

	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

Angular link: it is a good practice to place it in the bottom of the page, since you want it to run after all of your code is already rendered..
ng-app: in the <html> tag, place the ng-app attribute to tell the page to use Angular.js as its framework.
ng-controller: since Angular.js is MVC (and frankly, as I learn it more deeply, I think thats the core and the strength of angular ...), we should define what element in the DOM is our controller, and then pass the function in the script (which I will explain in the next bulletin ).
<script>: in this script, there is one function who is triggered once the HelloCtrl ng-controller is run.
$scope: this is our model .
{{}} : the curly brackets, is where you should place your properties within your functions

Wednesday, May 21, 2014

How to use Fancybox (and why you should!)

If you are a web developer, you came across the requirement by your boss or client:

"Hey man, could you throw me a gallery, and then , when you click the thumbnail, pop the larger image in a new cool window.."

If you will try to do it yourself, you will have lots of "cross browser" trouble, that will take your good years away from you..

Indroducing, fancybox!

fancybox is a javascript plugin, that will basically popup a (fancy) window, present your content in a cool fashion, and its all in very easy way. (a lil' bit JQuery, and throw some links into your project..)

you need to download this folder first ,

https://github.com/fancyapps/fancyBox/zipball/v2.1.5

and follow this simple example :

javascript:

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<link href="fancybox/jquery.fancybox.css" rel="stylesheet" />
	<script src="fancybox/jquery.fancybox.pack.js"></script>

	<script>
	$(document).ready(function () {

	fancy();
	});

	function fancy() {
	$('.linkItem').fancybox();
	}
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

HTML:

	<a class="linkItem" href="myFullSizedImage.jpg">
	<img src="mySmallThumbnail.jpg" alt="thmbnail" />
	</a>

view raw gistfile1.html hosted with ❤ by GitHub

Monday, May 19, 2014

a new journey

Often in life we tend to lose ourselves in a quest to self exploration, we want more then we have and never settle down on what we DO have.

In this blog I will try to write my insights about fields I found appealing to me. I will write about

philosophy
code
motivation
and entrepreneurship.

Enjoy!
~Gilad