This code snippet introduces 10 basic AngularJS  concepts for beginners by building a very simple application. The application enables users to maintain a to do list with basic add, edit, and remove features. Additional features include sorting, ability to mark each item as complete etc. In this application, following concepts are introduced:

  1. angular.module, ng-app, and ng-controller: setting up the bare-bone structure of an AngularJS application
  2. ng-model: two-way data binding
  3. {{  }}: data binding expression
  4. ng-disabled: enabling/disabling widgets
  5. ng-show: controlling the visibility of widgets
  6. ng-class: controlling the appearance of widgets
  7. ng-click and ng-keypress: handling click and key press events
  8. JSON: woking with JSON objects and collections
  9. ng-repeat: rendering collections
  10. ui-sortable: enabling sorting by dragging

Here is the final result of the application followed by the source code. You can play with the code and create your own version of the app @ jsfiddle.net.

Continue reading

In a recent project we had to implement a mail-merge type feature where multiple html formatted documents (letters) were concatenated together for printing with a single print command. The challenge was to introduce page break before each document to avoid mixing-up of the individual letters. A quick and simple solution to this problem was using CSS page-break property after each letter content as highlighted in the code below:

 

<html>
	<head>
		<title>Letters</title>
	</head>
	<body>
		<div class="letter">
			<h1>Letter 1</h1>
			<div>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum vestibulum dui. Integer semper risus. Pellentesque eu neque. Sed luctus ante non ante. Sed sed ante eget purus rhoncus laoreet. Donec justo mauris, eleifend at, hendrerit id, dictum sed, dolor. Sed quis dui. Vestibulum id ligula. Morbi massa. Donec sit amet ipsum non risus sollicitudin accumsan. 
			</div>
		</div>
		<div style="page-break-after:always"></div>
		
		
		<div class="letter">
			<h1>Letter 2</h1>
			<div>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum vestibulum dui. Integer semper risus. Pellentesque eu neque. Sed luctus ante non ante. Sed sed ante eget purus rhoncus laoreet. Donec justo mauris, eleifend at, hendrerit id, dictum sed, dolor. Sed quis dui. Vestibulum id ligula. Morbi massa. Donec sit amet ipsum non risus sollicitudin accumsan. 
			</div>
		</div>
		<div style="page-break-after:always"></div>


		<div class="letter">
			<h1>Letter 3</h1>
			<div>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum vestibulum dui. Integer semper risus. Pellentesque eu neque. Sed luctus ante non ante. Sed sed ante eget purus rhoncus laoreet. Donec justo mauris, eleifend at, hendrerit id, dictum sed, dolor. Sed quis dui. Vestibulum id ligula. Morbi massa. Donec sit amet ipsum non risus sollicitudin accumsan. 
			</div>
		</div>
		<div style="page-break-after:always"></div>

	</body>

</html>