Wednesday, 23 March 2016

Creating Custom Directives in AngularJS



Introduction


AngularJS is more popular JavaScript client-side frameworks in now a days. Angular js have many great features like two way binding, Unit Testing, Dependency injection but one of the grate feature of AngularJS is the ability to create directives.

What is Directives 

Generally directives are mostly used for DOM manipulation. We can create templates using directive which can contain HTML and javascript. Directives are nothing more than markers placed on DOM elements that use JavaScript to manipulate that DOM element and its content.
Very simple example of directives is Customize menu for your application, using custome directives you can write once and you can use in many applications.

AngularJS provides many directives that can be used to manipulate the DOM, route events to event handler functions, perform data binding, associate controllers/scope with a view, plus much more. Directives such as ng-click, ng-show/ng-hide, ng-repeat,and many others found in the AngularJS core script make it easy to get started using the framework.

Advantages Of Directives 

·         Reusablity of code in your project..... You can reuse your code at any Pages and anywhere in your projects.
·         You can Solve the complex operations in this easily.
·         Reduce the amount of your code.Call it anywhere.
·         Handle your Dom easily.

Simple Example

JavaScript Code
.directive("foo", function() {
  return {
    template: "<div>the template</div>"
  };
})


Directive Properties

A short explanation of each of the properties is shown next:


Property
Description
Restrict( A,E,C,M)
Determines 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 output from the directive. Can include HTML, data binding expressions, and even other directives.
templateUrl
Provides the path to the template that should be used by the directive. It can optionally contain a DOM element id when templates are defined in <script> tags.
controller
Used to define the controller that will be associated with the directive template.
link
Function used for DOM manipulation tasks.

Example :

// create directive module (or retrieve existing module)
var m = angular.module("myApp");
 
// create the "my-dir" directive 
myApp.directive("myDir", function() {
  return {
    restrict: "E",        // directive is an Element (not Attribute)
    scope: {              // set up directive's isolated scope
      name: "@",          // name var passed by value (string, one-way)
      amount: "=",        // amount var passed by reference (two-way)
      save: "&"           // save action
    },
    template:             // replacement HTML (can use our scope vars here)
      "<div>" +
      "  {{name}}: <input ng-model='amount' />" +
      "  <button ng-click='save()'>Save</button>" +
      "</div>",
    replace: true,        // replace original markup with template
    transclude: false,    // do not copy original HTML content
    controller: [ "$scope", function ($scope) { …  }],
    link: function (scope, element, attrs, controller) {…}
  }
});  


Restrict :
E: Directive defined as an element. <star-Rating rating=”rating”></star-Rating>
A: Directive applied as an attribute on existing element. <div star-rating rating=”rating”></div>
C: Directive applied as a css class to existing element <div class="star-rating" rating="rating "></div>
M: Directive applied as comment.

Scope

=
Sets bidirectional binding between a local scope property and the parent scope property.
@
Binds a local scope property to the string value of the DOM attribute. This value is also uni-directional and is passed from the parent to the isolated scope.
&
Provides a way to execute an expression in the context of the parent scope. The value passed to this attribute in the DOM is always expected to be a function or an expression.



Happy programming!!

Don’t forget to leave your feedback and comments below!

Friday, 4 March 2016

Visual Studio Application Insights in Windows Azure



Application Insights is an extensible analytics service that monitors your live application. It helps you detect and diagnose performance issues, and understand what users actually do with your app. It's designed for developers, to help you continuously improve the performance and usability of your app.










Application Insights is aimed at the development team. With it, you can:
  • Analyze usage patterns to understand your users better and continuously improve your app.
    • Page view counts, new and returning users, geolocation, platforms, and other core usage statistics
    • Trace usage paths to assess the success of each feature.
  • Detect, triage and diagnose performance issues and fix them before most of your users are aware.
    • Alerts on performance changes or crashes.
    • Metrics to help diagnose performance issues, such as response times, CPU usage, dependency tracking.
    • Availability tests for web apps.
    • Exception reports and alerts.
    • Powerful diagnostic log search (including log traces from your favorite logging frameworks).
 

Happy programming!!

Don’t forget to leave your feedback and comments below!