Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

AngularJS Custom Directives

Introduction

In last post I explained in detail with example AjngularJS Directives and its use, in this post I Will explain how to create your own custom directive and use it.

AjngularJS built-in directives cover many different scenarios and inbuilt directives made your work easy.

Example

ng-repeat directives repeats html elements for each item in a collection, you can use this directive like classic programming  for loop logic on data collection.

Like this AjngularJS provided number of built-in directives those covers different scenarios, still it is possible to implement your own directives too.

How to create directive?

1. New Custom directives are created by using the .directive function.
2. Custom directive replaces for which element it is activated.
3. The type of a directive determines how the directive is activated.

Example:

In following example custom directive is created to display employee manger details, template and restrict properties are used in following custom directive.  

<body ng-app="myApp">
    <h2>AngularJS Sample Example</h2>
    <div ng-app="myApp" ng-controller="MyTestController">
        First Name: <input type="text" ng-model="FirstName"><br><br>
        Last Name: <input type="text" ng-model="LastName"><br>
        <br>
  
        Full Name:{{FirstName+" " + LastName}}
 
       <!--Manger Details custom directive activated using element-->
        <managerdetails></managerdetails>
    </div>
 
        <script>
            var app = angular.module('myApp', []);
 
            app.controller('MyTestController', function ($scope) {
                $scope.FirstName = "Shourya";
                $scope.LastName = "Kendre";
                $scope.Manager = {
                    Name: "Nagnath",
                    Location: "Pune"
                };
     
            });
 
            app.directive("managerdetails", function () {
                return {
                    restrict: 'EA',//E = element, A = attribute, C = class, M = comment
                    template: "Manager Name: {{Manager.Name}}<br /> Location: {{Manager.Location}}"
                };
            });
        </script>
</body>

Custom Directive properties

In following table all directive properties are explained in short

Property

Description

restrict

Decides where a directive can be used (as an element, attribute, CSS class, or comment).

scope

Used to create a new child scope or an isolate scope.

template

Defines the content that should be result of directive.

This include html elements, another directive, and data binding expressions.

templateUrl

Provides the path to the template that should be used by the directive.

controller

Used to define the controller that will be associated with the directive template.

link

Function used for DOM manipulation tasks.

 

Custom directives Types and its use  

You can implement the following types of directives:

=> Element directives
=> Attribute directives
=> CSS class directives
=> Comment directives

1. An element directive is activated when AngularJS finds a matching HTML element in the HTML template.

Example:

   <!--Manger Details custom directive activated using element-->
   <managerdetails></managerdetails>

2. An attribute directive is activated when AngularJS finds a matching HTML element attribute.

Example:

  <!--Manger Details custom directive activated using div attribute-->
    <div managerdetails></div>

 3. A CSS class directive is activated when AngularJS finds a matching CSS Class.

Example:

Note: This code with above example only works after removing existing restriction on custom directive.

<!--Manger Details custom directive activated using div css class-->
    <div class="managerdetails"></div>

4. A comment directive is activated when AngularJS finds a matching HTML comment.

custom detective Activated using comment 

        <!-- directive:managerdetails -->

Restrictions:

You can restrict custom directives to only be accessed and used by some of the methods.

The restrict field is used to set if the directive should be activated by a matching HTML element, or an element attribute.
E” restrict field value (Element)
By setting restrict to E you specify that only HTML elements named div should activate the directive.
“A” restrict field value (Attribute)
By setting restrict to A you specify that only HTML attributes named div should activate the directive.
“C” restrict field value (Class)
By setting restrict to C you specify that only HTML css Class named div should activate the directive.
 “M” restrict field value (Comment)
By setting restrict to M you specify that only HTML comment should activate the directive.

Example:

You can also use a value of AC which will match both HTML element names and css class names.

<script>
   var app =angular.module('myApp', []);
   app.directive("managerdetails", function () {
   return {
                    restrict: 'AC',//E = element, A = attribute, C = class, M = comment
                    template: "Manager Name: {{Manager.Name}}<br /> Location: {{Manager.Location}}"
        };
       });
</script>

 

By default the value is EA, meaning that both Element names and attribute names can access and use the directive.

AngularJS controllers

What is Angular JS controller?

Controllers are Central part in AngularJS, as name suggests controllers are in-charge of AngularJS application Data.

In short AngularJS application and application data is fully controlled by controller.

For Example for CRUD Application insert, update, delete all data actions performed by controller, controller also handle server communication.

Controller basics

1. An AngularJS controller is a JavaScript object containing attributes/properties and functions.
2. After using ng-app directive the ng-controller directive defines the application controller.
3. Controller will be a function that angular invokes.
4. Controller takes $scope parameter.
5. Attach model to &scope.

Syntax:

   <div ng-app>
        <!--application area-->
        <div ng-controller="MyTestController">
            <!--controller aria-->
      </div>
    </div>


Avoid Controllers to perform following actions (Suggestions from angularjs.org website)

Manipulate DOM: writing business logic in controller area is good practice, writing presentation logic may affect testability
Format input: use angular inbuilt form controls instead.
Data Filter: Use angular inbuilt filters to filter data.
Share code or state across controllers: Use angular services instead.

Manage the life: cycle of other components (for example, to create service instances).

Controllers are used to manipulate scope

Angular controller takes $scope as a parameter which Refers application module that is controlled and managed by controller.

Controller basic example with $scope parameter:

Following code subtracts user entered two numbers and displays result.

<html>
 
<head>
    <title>Angular JS Controller Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
 
<body>
    <h2>AngularJS Sample Example</h2>
 
    <div ng-app="myCalApp" ng-controller="MyCalController">
         first Number: <input type="text" ng-model="FirstNumber"><br><br>
         Second Number: <input type="text" ng-model="SecondNumber"><br>
        <br>
 
      
Subtraction of two numbers: {{FirstNumber-SecondNumber}}
    </div>
    <script>
        var app = angular.module('myCalApp', []);
        app.controller('MyCalController', function ($scope) {
            $scope.FirstNumber = 20;
            $scope.SecondNumber = 10;
    });
    </script>
 
</body>
</html>


Controller Example with External File and Method return:

Following code add entered two numbers and displays result.

<html>
<head>
    <title>Angular JS Controller</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="Scripts/TestController.js"></script>
</head>
 
<body>
    <h2>AngularJS Sample Example</h2>
 
    <div ng-app="myCalApp" ng-controller="MyCalController">
         first Number: <input type="text" ng-model="CalData.FirstNumber"><br><br>
         Second Number: <input type="text" ng-model="CalData.SecondNumber"><br>
        <br>
 
       Addition of two numbers: {{CalData.Addition()}}
    </div>
 
</body>
</html>

 

External “TestController.js” file code

var mainApp = angular.module("myCalApp", []);
mainApp.controller('MyCalController', function ($scope) {
    $scope.CalData = {
        FirstNumber: 10,
        SecondNumber: 20,
        Addition: function () {
            var CalculatorObject;
            CalculatorObject = $scope.CalData;
            return CalculatorObject.FirstNumber + CalculatorObject.SecondNumber;
        }
    };
});

 

धन्यवाद मित्रानो ... 

Agile Testing

Agile Software Testing

In this article I will explain in detail what is agile testing and advantages using agile testing.

Definition (Reference Wikipedia)

Agile testing is a software testing practice that follows the principles of agile software development. Agile testing involves all members of a cross-functional agile team, with special expertise contributed by testers, to ensure delivering the business value desired by the customer at frequent intervals, working at a sustainable pace.

https://en.wikipedia.org/wiki/Agile_testing

Introduction:

Agile, as its name suggests, simply proposes to be a faster, more priority & risk focused, and more flexible, adaptable, and efficient way of conducting the complicated business of software production.  And, of course, it is not without its critics.


In the agile approach:

      => Testing and coding are done incrementally and interactively

      =>  Developers and testers should always meet and compare notes daily

      =>  Building up each feature until it provides enough value to release to production

      =>  Requires a depth of continuous collaboration between stakeholders- mangers, developers, testers and customers throughout the production process  

      =>  Reducing the need for robust testing teams

      =>  All types of testing covers

Advantages of Agile Testing: 

1.  Agile Testing Saves Time and Money.

2.  Less Documentation.

3.  Regular feedback from the end user.     

4.  Daily meetings can help to determine the issues well in advance.


In the usual waterfall model the sequential phases are: 

As you can see in the diagram above, in a waterfall process the “design” and “implementation” stages exist prior to, and distinct from, the “verification” and “maintenance” stages.  This split between software developers and software testers, positioning them as separate entities at different points along a production cycle, is one of the fundamental problems that Agile seeks to resolve.

 

Agile Scrum Process:

In the Scrum method of agile software development, work is confined to a regular, repeatable work cycle, known as a sprint or iteration. Scrumsprints used to be 30 days long, but today many teams prefer shortersprints, such as one-week or two-week sprints.
The sprint backlog is a list of tasks identified by the Scrum team to be completed during the Scrum sprint. During the sprint planning meeting, the team selects some number of product backlog items, usually in the form of user stories, and identifies the tasks necessary to complete each user story.
The Scrum Master is to constantly refine the schedule and direction and keep the team
on track.

Advantages over classic waterfall model:

1.  Scrum relies on more frequent touch points between developers and testers,

Testers and BAs, and BAs and Developers to make sure any changes are

Properly communicated.

2.  Daily standup calls keeps activities aligned, remove obstacles if any team member facing.

3.  Knowledge sharing is better in this process.

4. Strong project management keeps team on track and active.

Agile is constantly evolving. Today there are emerging methodologies like BDD, TDD, ATDD, Kanban and many more.