AngularJS: Custom directives

Hello everyone!

Directives play an important role in AngularJS applications allowing developers to interact and hence simplify DOM manipulation. One of the most important features of a web application is reusability. AngularJS helps us to build custom directives that can in turn modify or even create a totally new behavior in HTML. To call a directive from HTML, we can simple apply the directive in the DOM. At present, there are four different types of directives namely,

1. Element directives

An element directive is activated when AngularJS finds a matching HTML element in the HTML template. Angular normalizes an element’s tag and attribute name to determine which elements match which directives.

2. Attribute directives

In HTML, we mention attributes for a particular tag. This tag holds the code snippet. Attribute directives help to write specific code that such tags can simply include.

3. CSS class directives

4. Comment directives

Note: AngularJS recommends that you try to use element and attribute directives, and leave the CSS class and comment directives (unless absolutely necessary).

Through this tutorial, we will learn how to use the element directive in AngularJS.

Pre-requisites: Eclipse IDE (for Java EE developers), Apache Tomcat 7.0

Step 1: Launch Eclipse IDE and create a new Dynamic Web Project called AngularCustomDirectives with module version 3.0. Create the following index.html page in the WebContent folder.

index.html

<!DOCTYPE html>
<html ng-app="demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
	
	<div ng-controller="ListController">
		<customerinfo></customerinfo>
	</div>

	<script type="text/javascript">	
		var app = angular.module("demo",[]);
		app.directive('customerinfo', function() {
			
			var directive = {};
		    directive.restrict = 'E'; /* restrict this directive to elements */
			directive.templateUrl = "html-templates/customerinfo-template.html";
			
			return directive;
			
		});
		
		app.controller("ListController", function($scope){
		    $scope.customers = [
				{ name: 'Hari', city: 'Mumbai', email:'hari@gmail.com',age:'16'},
				{ name: 'Alexander', city: 'Paris', email:'alex@gmail.com',age:'18'}
			];
		});
		
	</script>
	
  </body>
</html>

The restrict field is used to set if the directive should be activated by a matching HTML element, or an element attribute. By setting restrict to E one can specify that only HTML elements named customerinfo should activate the directive.

Step 2: Create a new folder called html-templates under the WebContent folder and create the customerinfo-template.html file as follows.

customerinfo-template.html

	<h2>List of customers</h2>
	<ul>
		<li ng-repeat="customer in customers">
		    Name: {{ customer.name |uppercase}} 
		    Age: {{ customer.age }} 
		    Email: {{ customer.email |lowercase }} 
		    City: {{ customer.city | uppercase}}
		</li>
	</ul>

Save all changes. Make sure no errors are present. Run the project on the Tomcat server to launch the corresponding web page in a browser and you should see the following output!

output

Reference: AngularJS directives

Getting started with AngularJS!

The web is constantly evolving. Earlier, when a browser sent a request to the web server, the server would respond with the corresponding webpage & assets required to load the page. However, when a user clicked a link on the page, the browser would download the same files again. AngularJS is an open source web application framework designed to overcome such limitations. It is maintained by Google and the community at large.

AngularJS is by far one of the most popular technologies for developing MVC based web applications. It supports rapid front end development including features such as two way data binding, dependency injection, custom directives etc with the goal of improving testability and performance. Through this post, we will learn how to get started with AngularJS.

Pre-requisites: Windows 7, Notepad or any text editor, JavaScript

Modules

Modules are used to define applications. A module acts as a container for the different parts of an app, including directives, controllers, services etc. All application controllers should belong to a module. For example,

<div ng-app="demo">
 {{ Hello, Angular!}}
</div>

A reference has been made to the demo module using the ng-app directive.

Directives

AngularJS directives are basically extended HTML attributes with the prefix ng-. As mentioned on the developer’s page, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Controllers

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. A Controller is attached to the DOM via the ng-controller directive.

Now, it’s time to implement the above concepts using an example. Let’s create an HTML page called test.html and write the following code.

test.html

<!DOCTYPE html>
<html ng-app="demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
	<div>
      <input type="text" ng-model="userName" placeholder="Enter a name here">
        Hello, {{ userName}}!
    </div>
	
	<h2>List of students</h2>
	<div ng-controller="ListController">
		<ul>
		   <li ng-repeat="student in students">{{ student.studentName | uppercase}}</li>	   
		</ul>
	</div>

	<script type="text/javascript">
		
		var app = angular.module("demo",[]);
		app.controller('ListController', function($scope) {
			$scope.students = [
				{ studentName: 'Hari', city: 'Mumbai'},
				{ studentName: 'Alexander', city: 'Paris'},
				{ studentName: 'Zen', city: 'Tokyo'},
				{ studentName: 'Benjamin', city: 'New York'}
			];
		});   
	</script>
	
  </body>
</html>

The above example demonstrates the use of the ng-app and the ng-controller directive. It also explains data binding using AngularJS. If you open the page in a web browser you should see the following output.

output

In the upcoming tutorials we will learn how to use some more features of Angular JS. Till then happy coding! 🙂

Reference: Angular JS Developer Guide

Tutorial #77: Getting started with Google Dart!

Dart is an open source web programming language developed by Google. Like any web programming language, Dart too relies mainly on its cross-compilation to JavaScript feature in order to run on current browsers. It is a class based, object oriented language used to create client side web applications. The Dart project was founded by Lars Bak and Kasper Lund. Some of the key features of the Dart programming language include:

1. Classes – Dart’s classes and interfaces give developers what they need to effectively understand how to define APIs, and the constructs allow the encapsulation and reuse of data and methods.

2. Libraries – The libraries used by Dart will not change during run-time. Pieces of Dart code that are independently developed are thus able to rely upon those shared libraries.

In this tutorial, we will learn how to get started with Dart on Windows!

Pre-requisites: Windows OS (64 bit)

Step 1: Download Dart editor

Google released Dart Editor, an open-source editor based on Eclipse components for Windows, Mac OSX and Linux-based operating systems. You can download the bundle containing both the Dart SDK and the editor from over here.

Step 2: Write a Hello World program

Once you have downloaded Dart editor, launch it and create a New Application called HelloWorld as follows!

dart_1

First, you need to modify the HelloWorld.html file to include a button above the already existing script tags.

<button id="myButton">Click Me!</button>
<div id="myResult"></div>

Next, open the HellowWorld.dart file and add the following code!

import 'dart:html';

void main() {
  var button = query("#myButton");
  button.onClick.listen(addResult);
}
 
void addResult(Event e) {
  var resultDiv = query("#myResult");
  resultDiv.text = "You clicked the button";
}

Finally, save all changes and run the application. A new instance of the chromium browser should launch displaying the HTML content. Click on the button to view the result!

dart_2

That’s it for this tutorial. Stay tuned for more! 🙂

Source: What Google Dart means for web developers