Angularjs Tricks

While creating an angular form, we come upon a situation where we required to generate the sequence of years in the select HTML tag. There is some way to perform this task, but each has its limitation. Let's look the way to generate the years : Hard code an array having years in your controller and assign it to some $scope variable. Use for loop to generate the years and then assign to $scope variable. Send $http request to generate the array of year and assign the response data to $scope variable. Define a filter that will be used to generate the sequence of years. As the first and second method makes our controller dirty and the third method causes HTTP request that will overhead server, so we are going to see the fourth method to generate the years as it has several advantages over other three methods. So let's jump into the code: HTML Code: <form name="myform"> <select ng-options="year for year in [] | range: '2000':'20...

Here we will see how to convert the HTML text to its equivalent entity. Sometime we come across a situation where we wish to show the content of inner HTML of some specified element for viewing or debugging purpose. I tried to write a code for the conversion. Here is code and its usage: function convertToHTMLEntity(html){ var textNode = document.createTextNode(html); var divElement = document.createElement('div'); divElement.appendChild(textNode); return divElement.innerHTML; } console.log(convertToHTMLEntity('<p> Hello! </p>')); Output: See the Pen Converting HTML special characters to its equivalent HTML Entity by MI ANSARI ( @miansari ) on CodePen .

ngIf and ngShow directives are used very frequently in Angular apps. Here will the difference between these two through an example. Firstly, let's see the main difference between these two as in angular docs: ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather then changing its visibility via display css property. The main points are as follows: ngShow directive uses css display property to show and hide the element in DOM. It does't remove the element from the DOM. It just set class="ng-hide" to hide the element and removes the ng-hide class to show the element. ngIf directive remove and reinsert the element based on the expression provided in ng-if directive. The inserted element has the state which was initialized at the time of compilation. If we change any css property of the element or set any class, that css property and class will be lost if the ng-if expression becomes false and...

In the previous post , we have seen how the datatype mismatch cause an error in HTML5 Angularjs Form. We have see the remedy to remove those errors. Each time when we send and $http request to insert and item to MySQL database we have to convert the data according to the data format accepted by the database. If in our form has less number of input fields then we can change the data format of form data submit to server by converting each value. It is tedious to convert the data format for each input field if we have many input to handle. In that situation, we will make our code dirty and less maintainable and readable. To overcome all these type of difficulties, we have created an angular service to tackle it. Let's see the code for our angular service named $convertor: $convertor Service: var app = angular.module('myApp',[]); app.factory('$convertor',['dateFilter',function(dateFilter){ return{ convertForSQL : convertForSQL, convertForHTML5 : c...

Angularjs provide an directive for the Date and Number input elements. We may be in a problem while handling the form having these as input from the user. There is always a type miss match between the value provided or accepted by these input and and the value accepted by the MySQL database. In Angular, we send and receive data in a JSON format to prevent the page reload. JSON are provided into a string form, we need to process the JSON string at client side. Date , Integer and Float values are provided into string format so, we need to process the these values. To show how to tackle this type mismatch, I have created an simple app that take one text, one float, one integer and one date value from the user and send it to server for storing into the database and return the inserted data item back to the user into JSON format. Before going into the app, it should be noted that. HTML5 date input takes and provide Date object HTML5 number input takes number ...

Angular $http service is used to send asynchronous http request to the server. To learn how to use $http service with php, we will create a simple app using form directive. This app will take two numbers and send the these number to php server for their sum. Here we will use php code to process the data and return the sum. Let's jump into the app. Here is front end HTML code for our app. We are using twitter bootstrap to for awesome look of our app: Way 1: HTML Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Find Sum</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body ng-app="myApp"> <div class="container" ng-controller="myAppCtrl"> <div class="row"...

Prismjs is developed by Lea Verou. It is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.Today, we will see how to use the prismjs on blogger to highlight our codes. It very easy and step by step process to follow: Goto to this link and get the personalized links for prismjs or simply copy the links given below: <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-coy.min.css" rel="stylesheet"></link> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script> Goto Theme > Edit HTML and paste the links before the closing </head> section as shown below: Default prism.min.js file contain the functionality to highlight the code for only HTML, CSS and JS code. If you wish to use other language to highlight, you have to paste the link for that langu...