Creating Components with Angular.js

One of the great things about Angular.js is the ability to create reusable components. Components are created using directives which are only available in Angular. Directives let you invent new HTML syntax, specific to your application. In this tutorial, I’ll walk you through the steps of creating a <contactform> component. The first thing we’ll do is to create the component.

Components.js

angular.module('components', []).
  directive('contactform', function() {
  	return {
         restrict: 'E',
         transclude: true,
         templateUrl: './Partials/contact.html',
         controller: function ($scope) {
      		$scope.master= {};
      		
      		$scope.update = function(user) {
      		   //send email here
    		   $scope.master= angular.copy(user);
  		};
  			
  		$scope.reset = function() {
    		   $scope.user = angular.copy($scope.master);
  		};
 
  		$scope.reset();
      }
    };
  })

The directive module is used to define the new HTML component. Our new component will be called contactform. restrict specifies the HTML format of the component. In this case we are specifying that our component will be an element type. Possible restrict values:

  • E – Element
  • A – Attribute
  • C – Class
  • M – Comment

transclude tells Angular.js that when replacing the new HTML element it should include the original content somewhere specified by a ng-transclude directive. You’ll see this when we create our partial view. You can set the HTML content for your component by supplying either a template or a templateUrl. We’ll use the templateUrl so we can place our HTML content within a partial view. This keeps your code clean. Next we’ll create the partial view that will contain the HTML content for our new component.

contact.html

<form novalidate class="css-form">
	<div ng-transclude></div>
	<table width="450px">
		<tr>
		   <td valign="top">
		      <label for="first_name2">First Name *</label>
		   </td>
		   <td valign="top">
		      <input  type="text" name="first_name2" maxlength="50" size="30" ng-model="user.fname" required >
		   </td>
		</tr>
		<tr>
		   <td valign="top">
		      <label for="last_name2">Last Name *</label>
		   </td>
		   <td valign="top">
		      <input  type="text" name="last_name2" maxlength="50" size="30" ng-model="user.lname" required >
		   </td>
		</tr>
		<tr>
		   <td valign="top">
		      <label for="email2">Email Address *</label>
		   </td>
		   <td valign="top">
		      <input  type="email" name="email2" maxlength="50" size="30" ng-model="user.email" required >
		   </td>
		</tr>
		<tr>
		   <td valign="top">
		      <label for="comments2">Comments</label>
		   </td>
		   <td valign="top">
		      <textarea  name="comments2" maxlength="1000" cols="25" rows="6" ng-model="user.comment"></textarea>
		   </td>
		</tr>
		<tr>
		   <td colspan="2" style="text-align:center">
		      <button ng-click="reset()">RESET</button> 
		      <button ng-click="update(user)">SEND</button>
		   </td>
		</tr>
	</table>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>

You’ll notice <div ng-transclude></div> at the top of the form. When creating our component, we specified transclude: true which tells Angular.js to place the original content somewhere specified by the ng-transclude directive. You’ll also notice some data binding with the ng-model attributes and a required attribute for form validation. Angular.js lets you declare the validation rules of the form without having to write JavaScript code. For those of you familiar with ASP.NET MVC, this would be similar to adding a required data annotation in your model. The buttons use the ng-click attributes to call the functions specified in the controller of our component. Lets take a look at the main page for our application.

index.html

<html ng-app="components">
<script src="./JS/angular.min.js"></script>
<script src="./JS/Components.js"></script>
<style type="text/css">
      .css-form input.ng-invalid.ng-dirty {
        background-color: #FA787E;
      }
    
      .css-form input.ng-valid.ng-dirty {
        background-color: #78FA89;
      }
</style>
<body>
	<contactform><span style="color:#ff0000">My Super Cool Component</span></contactform>
</body>
</html>

As you can see, we’ve created a new HTML element with <contactform>. The code within the <contactform> tag will be included where we set ng-transclude. The CSS adds some color to our form elements to show how Angular.js does form validation. The CSS classes ng-invalid and ng-valid are added dynamically during validation.

Demo: http://demos.ijasoneverett.com/Components_AngularJS.php
Source Code: https://github.com/ijason/AngularJS-Components

One thought on “Creating Components with Angular.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      
 

*