AngularJS - Next gen web applications

Ishank Gupta

Angular is a JavaScript framework that extends the functionality of HTML and helps ease out the development of enterprise single page web applications. The framework is maintained by Google and helps in designing and testing phases of such applications working on the model-view-controller architecture while maintaining code quality.

Most frameworks implement MVC by asking you to break down your application into components, then write the code to combine them up together again. Angular implements MVC by asking you to split your app into MVC components and Angular does the rest. It manages your components and also serves as a platform to connect them.

AngularJS works by first reading the original HTML page designed using the standard tags and elements. It then interprets those attributes as directives to bind parts of the page to a model that is represented by standard JavaScript variables. AngularJS is built around the notion that declarative programming should be used for building...

Read more

Upload image without submitting form, works on all browsers

Ishank Gupta
If you will have a look at my old post on Uploading files/image with Ajax & Jquery, without submitting a form, you will find that this implementation does not works with Internet Explorer (IE). IE does not supports FormData, so either we can flash or the hidden iframe solution. Now flash is not the best solution as it is not installed in many browsers (and many of the mobile devices does not supports flash). So, the hidden iframe solution is best in our case. Here is how we can implement it :
 <!-- Change the target of the form to the hidden iframe -->
<form id="avatar_form" action="/welcome/upload" method="post" enctype="multipart/form-data" target="uploader_iframe">
<input id="avatar" type="file" name="avatar" size="30" />

<!-- Hidden iframe which will interact with the server, do not forget to give both name and id values same -->
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

Read more

Uploading files/image with Ajax & Jquery, without submitting a form

Ishank Gupta
Here is the code for uploading an image or file without submitting a form with Ajax. For this we will create object of FormData class and will append the properties of the file field in a attribute of FormData object, finally we will set the FormData object with the data key of ajax method of JQuery.
 <input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
 $(document).on("click", "#upload", function() { var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field var form_data = new FormData(); // Creating object of FormData class form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data form_data.append("user_id", 123) // Adding extra parameters to form_data $.ajax({ url: "/upload_avatar", dataType: 'script', cache: false, contentType: false, processData: false, data: form_data, // Setting the data attribute of ajax with file_data type: 'post' }) })...
Read more