Archive | AngularJS RSS for this section

Comparing passwords using angularJS

While working on a single page application using AngularJs, I did come across a situation where I needed to compare and validate passwords. Using angular documentation site, I found that the answer to my problem was to use directives. With angularJs directive you have all the control about you HTML markup.  Directives are executed during DOM compilation allowing you to transform DOM or add new behaviours.

There are directives that are offered out of box, but that does not mean you can not implement yours.  Some of the points you should have when implementing your directives include:

-Directives have camel cased name e.g ngBind. The directives can then be invoked by translating the camel case name into a snake case with special characters like – or _. Optionally you can prefix the directive with x- or data- to make it HTML validator compliant. This is seen on the custom directive I have worked on here.

e.g


<input bs-password-validator="password" ></span>

-AngularJS have restrictions which are a subset of EACM which provides restriction to specific declarations style. Omitting means that the directive will be allowed on attributes only. They are as follows:

  1. E-Element name <my-directive></my-directive>
  2. A-attribute <div my-directive=”expression”></div>
  3. C-class <div class=”my-directive:expression;”></div>
  4. M-comment <!–directive: my-directive exp –>

Without further ado, lets dive to the main topic of the day.  I started by adding html markup  as shown below

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"><div></span></pre>
<div class="container" style="padding-top:100px">
 <div class="content">
 <div class="wrapper">
 <div class="proper-content">
 <form class="form-horizontal" name="registerForm" data-ng-controller="testCtrl" novalidate>

<div class="control-group">
 <label class="control-label" for="password">Password</label>
 <div class="controls">
 <input type="password" name="password" placeholder="password" id="password" data-ng-model="account.Password" required />
 <span class="text-error" data-ng-show="registerForm.password.$dirty && registerForm.password.$error.required">Password is required</span>

</div>
 </div>

<div class="control-group">
 <label class="control-label" for="repeatPassword">Confirm Password</label>
 <div class="controls">
 <input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" bs-password-validator="password" ng-model="account.ConfirmPassword" required>

<span class="text-error" ng-show="registerForm.repeatPassword.$dirty &amp;&amp; registerForm.repeatPassword.$error.required" style="display: none;">Repeat password</span>
 <span class="text-error" data-ng-show="registerForm.repeatPassword.$dirty && !registerForm.repeatPassword.$error.required && registerForm.repeatPassword.$error.repeat" style="display: none">Fields are not equal!
 </span>
 </div>
 </div>

 <div class="control-group">
 <div class="controls">
 <button class="btn btn-primary" data-ng-click="SaveUser()">Save</button>
 </div>
 </div>
 </form>
 </div></div></div></div></div>

My directive looks like this:

angular.module('test.directives',[]).directive('bsPasswordValidator', function () {</pre>
return {
 require: "ngModel",
 link: function (scope, elem, attrs, ctrl) {
 var otherInput = elem.inheritedData("$formController")[attrs.bsPasswordValidator];

ctrl.$parsers.push(function (value) {
 if (value === otherInput.$viewValue) {
 ctrl.$setValidity("repeat", true);
 return value;
 }
 ctrl.$setValidity("repeat", false);
 });

otherInput.$parsers.push(function (value) {
 ctrl.$setValidity("repeat", value === ctrl.$viewValue);
 return value;
 });
 }
 };
});

<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">

 

In angular a controller is a javascript type that is used to make instances of the Scope, and this excludes root scope (more about scope to come).  There are mainly two uses of controllers:

  1. Set up the initial state of a scope object
  2. Add behavior to the scope object

So here is the my test controller and application set up

angular.module('test',['test.directives']);</pre>
function testCtrl($scope) {
$scope.Password='';
$scope.ConfirmPassword='';
 $scope.SaveUser = function () {

 $scope.registerForm.repeatPassword.$dirty = true;
 $scope.registerForm.password.$dirty = true;

 if ($scope.registerForm.$valid && $scope.registerForm.repeatPassword.$valid) {
<!--call your services after here-->
 }
}
}
<pre>

If you have followed and done everything correctly you should be able to get the following screen if you type mismatched passwords.
password_comparer

And there you go.This code is just for demonstration, and so where I would prefer if you can separate directives into there own directory.

And your comments are highly appreciated, and its the only way to know you were here 😉

Happy coding and welcome back!! 🙂

Sample code can be found here 

What’s angularJS??

This post is the first in the series of learning and understanding the in and outs of angular js, comparison to other javascript frameworks. But for us to learn angular we need to know what is about and what problem it is trying to solve.

AngularJS is an open-source  framework, maintained by Google, that assists with running what are known as SPA . Its goal is to augment browser-based applications with MVC (Model View Controller) capability, in an effort to make both development and testing easier.

The definition from angular website is- Is a structural framework for building dynamic websites. By dynamic website, it means a website where the content is not fixed.  The content that is shown on page is based on the user selection and/or programmatically driven.

With angular,HTML is the templating language and enables you to extend HTML using directives.  Angular supports the following:

  • Data binding as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching code-behind to DOM elements.
  • Grouping of HTML into reusable components

Out of box, angular provides all the functionality required to build simple CRUD application which include templating directives, data binding, form validation, routing and dependency injection.

It also good to mention that angular js is not meant for all applications. Angular was designed with CRUD applications which makes quite a good number of application running today. So lot of consideration has to be made as to when to use angular or other libraries like Jquery.

Just to point some of the feature that are provided by Angular JS,

Databinding: This feature enable an automatic update of the view whenever the model changes and vice versa. This two way data binding its most notable feature and reduces the amount of code written by releaving the server from templating responsibilities. The templates are rendered in plain HTML according to data contained in the scope

Controllers: By using controller you explicitly express yourself in a clean,readable and maintainable way without any boilerplate, registering callback or even watching model changes. Controller are the behavior behind the dom manipulation. This encourages bootstrapping and rapid prototyping of web applications.

Directives: They help extend HTML specific to your application needs. You also use directives to create reusable components that may involve hiding complex DOM structure,CSS and behaviour

Testability: It encourages behaviour view separation, coming with pre-bundled with mocks with lot of dependancy injection involving for managing dependancies.

Dependency Injection: Simply, this is a pattern which is often used in infrastructure components and which ensures that one particular component does not create references directly to other components. Instead of direct instantiation every component will references to required other components  as parameter to there constructor. With this, angular this allows us to do like so:

function userCtrl($scope)
{
  $scope.firstname="testing"
}

In this case we dont really care where the $scope is coming from. In future post we will look at the function of $scope.

AngularJs has some distinct compared to backbone  in terms of data binding,REST and templating which includes:

Whereas AngularJS supports two way binding, backbone relies heavily on boilerplate code to harmonize its models and views

Backbone communicates well with Restful backends, while angularJs’ $http service is more flexible connecting remote server either through a browser XMLHttpRequest object or via JSONP

In terms to templating, AngularJS users a combination of customizable HTML tags and expression while backbone.js uses different templating engines. e.g underscore.js

%d bloggers like this: