AngularJS supports some jQuery methods known as jqLite. Here you can find tutorials how to use those jQuery methods with AngularJS. These articles are basic tutorials...That's why I provided TryItYourSelf editor.



  1. .append(), .prepend()  -   Append or Prepend html to div using AngularJS
  2. .addClass(), .removeClass(), .toggleClass()Add Class, Remove Class or Toggle Class to div using AngularJS
  3. .text(), .html()Set Text or Html to div using AngularJS
  4. .attr()Set Attribute or Remove Attribute using AngularJS
  5. .css()Change CSS of an element using AngularJS
  6. .prop() - Read And Set Property to an element using AngularJS
  7. .empty(), .remove() - Empty or Remove an Element using AngularJS
  8. .val()Read and Set Input Value using AngularJS
  9. .wrap() - Wrap HTML Structure around an Element using AngularJS
  10. .clone()Cloning elements using AngularJS
Read More
AngularJS supports .clone() jQuery functionality. Here in below examples we can see how to clone element .

Steps to clone an element:

  1. Get angular element of html element
  2. Use .clone() method to clone element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.clone();
Read More
AngularJS supports .wrap() jQuery functionality. Here in below examples we can see how to wrap HTML structure around an element.

Steps to wrap div around an element:

  1. Get angular element of html element
  2. Use .wrap() method to wrap element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.wrap('<div></div>');

Steps to wrap element around an element::

  1. Get angular element
  2. Use .wrap(element) method to wrap an element around another element
var myEl = angular.element( document.querySelector( '#divID' ) );
var wEl = angular.element( document.querySelector( '#wrapID' ) );
myEl.wrap(wEl);
Read More
AngularJS supports .val() jQuery functionality. Here in below examples we can see how to read value of an element.

Steps to read input value:

  1. Get angular element of html element
  2. Use .val() method to read input value
var myEl = angular.element( document.querySelector( '#inputID' ) );
myEl.val();

Steps to set input value :

  1. Get angular element
  2. Use .val('value') method to set value
var myEl = angular.element( document.querySelector( '#inputID' ) );
myEl.val('my value');
Read More
AngularJS supports .empty(), .remove() jQuery functionality. Here in below examples we can see how to empty and remove an element.

Steps to Empty an Element :

  1. Get angular element of html element
  2. Use .empty() method to clear all data in that element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.empty();

Steps to Remove  an Element :

  1. Get angular element
  2. Use .remove() method to remove the element from the document
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.remove();
Read More
AngularJS supports .prop() jQuery functionality. Here in below examples we can see how to set and remove property  of an element.

Steps to read attribute value of an element :

  1. Get angular element of html element
  2. Use .prop('property name') method to read the property value
var myEl = angular.element( document.querySelector( '#inputID' ) );
alert(myEl.prop('checked'));

Steps to set attribute value of an element :

  1. Get angular element
  2. Use .prop('property name', 'property value') method to set the property value
var myEl = angular.element( document.querySelector( '#inputID' ) );
myEl.prop('checked',true);
Read More
AngularJS supports .css() jQuery functionality. Here in below examples we can see how to set style to an element.

Steps to set style to an elemnt :

  1. Get angular element of html element
  2. Use .css() set  style to that element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.css('color','red'));
Read More
AngularJS supports .attr(), .removeAttr() jQuery functionality. Here in below examples we can see how to set attribute and remove attribute of an element.

Steps to read attribute value of an elemnt :

  1. Get angular element of html element
  2. Use .attr('attribute name') method to read the attribute value
var myEl = angular.element( document.querySelector( '#divID' ) );
alert(myEl.attr('myattr'));

Steps to set attribute value of an element :

  1. Get angular element
  2. Use .attr('attribute name', 'attribute value') method to set the attribute value
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.attr('myattr',"attr val");

Steps to remove attribute of an element :

  1. Get angular element
  2. Use .attr('attribute name', 'attribute value') method to set the attribute value
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeAttr('myattr');
Read More
AngularJS supports .html(), .text() jQuery functionality. Here in below examples we can see how to set text or html to an element.

Steps to set text to an elemnt :

  1. Get angular element of html element
  2. Use .text() method to set text to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.text('This is text. Here html tags will be displayed like normal tags. Example : <span style="font-weight:bold;"> Styled Text</span>');     

Steps to set html to an element :

  1. Get angular element
  2. Use .html() method to set html to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.html('This is html. Here html tags will be mixed with page. Example : <span style="font-weight:bold;"> Styled Text</span>');     
Read More
AngularJS supports addClass, removeClass jQuery functionality. Here in below examples we can see how to add a class to an element.

Steps to add class to an elemnt :

  1. Get angular element of html element
  2. Use .addClass() method to add class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.addClass('red');     

Steps to remove class from an element :

  1. Get angular element
  2. Use .removeClass() method to remove class from that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeClass('red');     
Try It Your Self

Steps to toggle class to an element :

  1. Get angular element
  2. Use .toggleClass() method to toggle class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.toggleClass('red');     

Find whether element has particular Class 

  1. Get angular element
  2. Use .hasClass() method to find whether element has class or not

var myEl = angular.element( document.querySelector( '#divID' ) );
if(myEl.hasClass('red')) {
  alert('has class red');
}    
Read More
AngularJS supports append, prepend jQuery functionality. AngularJS append or prepend works exactly like as jQuery.

Steps to append html :

  1. Get angular element of div
  2. Use .append() method to append html to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append('Hi<br/>');     

Steps to prepend html :

  1. Get angular element of div
  2. Use .prepend() method to prepend html to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('Hi<br/>');     
Read More
I am inspired from w3schools try it yourself editor. It is better to give an option to users to try themselves.
This below Try It Your Self editor was built upon HTML, JavaScript and Java. You can find the below diagram for program flow.

<textarea class="code_input" id="textareaCode" wrap="logical" rows="30" cols="50">
...
</textarea>

Form to Submit the code to Server :

Here the "target" attribute was specified as "view" so the output of this form will be displayed in "view" named iframe. 
<form style="margin:0px;display:none;" action="/TryItYourSelf" method="post" target="view" id="tryitform" name="tryitform" onsubmit="validateForm();">
        <input type="hidden" name="code" id="code" />
        <input type="hidden" id="bt" name="bt" />
</form>

iframe for displaying result :

<iframe id="iframeResult" class="result_output" frameborder="0" name="view" src="/angular-jquery/expressions_a.html"></iframe>

JavaScript for validating form :

function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>8000)
    {
    document.getElementById("code").value="<h1>Error</h1>";
    }
}

JavaScript for submitting form  to server :

function submitTryit()
{
 var t=document.getElementById("textareaCode").value;
 t=encodeURI(t);
 document.getElementById("bt").value="1";
 document.getElementById("code").value=t;
 document.getElementById("tryitform").action="/TryItYourSelf?x=" + Math.random();
 validateForm();
 document.getElementById("tryitform").submit();
}

Java Servlet to read and write the code :

Here we have to set "X-XSS-Protection" and "Content-Security-Policy" as 0 unless it will throw security exceptions and script wont run.
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TryItYourSelf extends HttpServlet {
       
    public TryItYourSelf() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String code = request.getParameter("code");
        response.setHeader("X-XSS-Protection", "0");
        response.setHeader("Content-Security-Policy", "0");
        PrintWriter pw = response.getWriter();
        pw.print(java.net.URLDecoder.decode(code, "UTF-8"));
        pw.flush();
    }

}
Read More
You might feel that this is funny article. I have given home-work for my sun-in-law of creating 99th table. He completed and gave that to me to verify then it became my problem to create 99th table and verify. Then I got this idea of creating this program.

Program Flow :

  1. Get inputs ( which table, what limit ) from User
  2. Format the table and display it

Markup :

<label>Which Math Table ?</label> <br/>
<input id="MathTable" value="99" name="MathTable" type="number" min="0" step="1" pattern="\d"/><br/>
<label>What is the limit</label><br/>
<input id="MathLimit" value="9" name="MathLimit" type="number" min="0" step="1" pattern="\d"/><br/>
<button id="MathButton" name="MathButton">Generate the table</button>
<div id="MathResult">
</div>

jQuery Code :

$(function(){
 $("#MathButton").click(function(){
     var mtb = $("#MathTable").val();
     var mtl = $("#MathLimit").val();
     var myhml = '';
     for(var i=1; i <= mtl; i++) {
         myhml = myhml + mtb +' X '+i+' = '+ (i*mtb) + '<br/>'; 
     }
     $("#MathResult").html(myhml);
 });
 $("#MathButton").click();
});

Read More

Search This Blog

Loading...

Blogroll

Srinivas Dasari
find me on facebook
follow me on twitter

Follow this blog by Email

Popular Posts