AngularJS 1.3: a new release approaches

Heads up! A new Angular release is on its way. Since we plan to discontinues support for old browsers, we wanted to give you plenty of notice. As a secondary goal, this release will cover features to improve performance, and small API fixes that require small breaking changes and removal of apis that were previously deprecated. We're also making a change to how we number stable/unstable releases.

AngularJS 1.3 discontinues support for Internet Explorer 8

Why we're doing this:

• Modern browsers have evolved. Although our stats tell us that only a small percentage of users are on Internet Explorer 8, maintaining compatibility requires code that slows the rest of AngularJS down.
• In April 2014, Microsoft will be ending support for Windows XP, which means the end of support for the operating system most of Internet Explorer 8 users use.

Dropping support for Internet Explorer 8  will enable us to add more exciting features to Angular faster, decrease Angular's support burden, and cut our build time in half, while affecting only a very small proportion of users.

But what if your users still rely heavily on Internet Explorer 8? If your app needs to keep supporting older browsers, you have a few options:

• Keep using Angular 1.2.x.
• Use 1.3 and test (or if you're feeling lucky, hope for the best). The changes in version 1.3 won't be actively removing the hacks in Angular that make Internet Explorer 8 work. Most things that work now will probably keep working. But we're going to stop testing against Internet Explorer 8 in our CI server configuration. And we won't be fixing issues that are solely related to support for Internet Explorer 8 users.
• Look for commercial support outside the core project - the Angular ecosystem is now big enough that it wouldn't be shocking to us if a company started offering commercial support for Angular apps on IE8. (entrepreneurs: hint hint!)

Removal of deprecated apis

We are aiming at the promise unwrapping in Angular templates that we deprecated before v1.2.

New naming conventions for release versions

Since our long term goal is to move to semantic versioning (semver) for Angular 2.0, starting with AngularJS 1.3 we are replacing odd/even versioning we used previously with semver's pre-release notation.

What does that mean?

• The first stable release under the 1.3.x release train will be 1.3.0.
• Unstable releases toward 1.3.0 will use semver's pre-release notation (#.#.#-text.#) So, for example, 1.3.0-beta.1 and 1.3.0-beta.2 would be unstable releases.

New features for 1.3? Tell us what you care about.

We have a handful of things that we want to add, but we also want to hear from you! Since there is no good way to create a poll on GitHub, we are going to abuse GitHub a bit — if you care about a particular Issue or PR please post a comment with text "+1" on it. When the poll closes Mary Poppins will count the votes casted during the duration of the poll, *de-dupe* them and count them. (She'll then delete the vote comments and replace them with a summary comment.) The poll will close on January 2 and we'll use the results when deciding what to add to the 1.3 release.

OK. But when is Angular 1.3 actually coming?

We still have a few things lined up for the 1.2.x release train, and we want time to consider your votes. In spite of that you should see the first beta builds of 1.3.0 starting to roll out in January with the usual 1-2 week frequency.

Read More

On launching AngularJS 1.2: what we learned, what we're changing

You might have noticed something new since we launched 1.2... Now that we're caught up, we've begun pushing a new release every week or two to stay on top of things and keep the PR queue responsive. Unless there's something big or noteworthy, we're also no longer blogging about every release.

We learned a lot from launching 1.2. Here are our own notes on the 1.2 launch process, and what we'll be improving, in case you're curious too.

1.2 took way too long!

• The community uptake and increase in github activity alongside 1.2 caught us by surprise. We got swamped, and it took some time to get on top of the new volume of contributions. We're back in the flow now, with a few new folks on the core team, and we're taking steps to keep from getting overwhelmed.
• To handle this new volume, we needed better infrastructure in place. We were depending too much on manual processes; managing them took time that couldn't be spent on development. We've since improved the CI server, and added more automation to our launch processes and tests. We're also looking for more ways of automating and streamlining the release process.
• Some of our 1.2 goals turned out to be much more challenging than we anticipated. Animations, for example -- we realized that we needed to do something different, to make it really easy to use by thoroughly anticipating use cases, instead of putting the burden on the developer to implement. Getting it right took longer.
• Our release schedule wasn't all that well organized. Because the core team was overwhelmed, we often sat on fixes and features for too long, delaying the feedback loop with contributors. We're generating pre-release builds from the CI server and working on providing them via bower (either nightly or even after each commit) so that we can get feedback faster.

Underscore issues and the revert in 1.2.1

Shortly after 1.2, we issued 1.2.1, reverting a late change around hiding "private" properties prefixed with an underscore. We tested the change on hundreds of apps at Google, and with a few minor exceptions, nobody was affected, so we assumed it was safe to proceed. But we missed the real impact on apps elsewhere.  We reverted the change within a week, but we'd like to avoid making the same mistake again.

What steps are we taking?

• We're committing to release more frequently, reducing the feature pressure on any one release.  With a consistent release schedule, we'll have more time to fully consider the implications of the features that we add and the changes we make.  
• New pre-release builds from the CI server provide greater visibility into what we're working on. No surprises.
• Even if the impact seems small, no more breaking changes in the last release before a final major version. We learned this lesson and we really mean it.

Read More

Farewell, Disqus

tl;dr: We are removing Disqus comments from the AngularJS docs.

Problems with Disqus

Besides making it difficult to moderate off-topic or inflammatory comments, many comments are specific to past versions of Angular. We think the documentation should be versioned alongside the code so there's never a question of whether information is out of date.

Disqus has been great for allowing us to get feedback and allow developers to share tips about AngularJS, but we think there are better ways to do this now. You'll always be able to see the Disqus comments in past versions of Angular (<=1.2.2), but going forward, here's where we think the things previously posted in comments should belong:

Questions

Post questions to StackOverflow or the mailing list. They tend to get answered more quickly and stay up-to-date because of the active community there.

Bug Reports (Issues)

Bug reports should go on Github. It's useful to be able to see everyone's issues, workarounds, and the progress towards fixing them all in the same place. See the relevant section of the contributing guide for more.

Improvements to the Documentation

We think the best way to improve the docs is by directly improving the text. You can do this via the "improve this doc" button at the top of each page.

Read More

Htaccess File Tutorial and Tips.

After posting Understanding of Regular Expression article most of my readers are expecting .htaccess basics, and I did not find any useful article on Google first page results. Specially I love to write .htaccess file, using this you can easily configure and redirect Apache Web Server file system. This post will explain you how to create friendly URLs, sub domain directory re-directions and many more.

Read more »

Read More

AngularJS 1.2.1 - underscore-empathy available now

Our first stable release in the brave new post-1.2 world is available now.

AngularJS 1.2.1 underscore-empathy reverts hiding "private" properties, improves $compile for transcluded directives by making it possible for the child elements of a transcluded directive to access the transcluded directive's controller, and fixes a few minor bugs.

We introduced "private" properties (for properties prefaced with an underscore) in 1.2 thinking that this would be a fairly uncontroversial change. Oops! Apologies (and thank you) to the folks who filed bugs alerting us to the larger consequences in your code of making this breaking change. We've reverted this feature.

For full details in this release, see the changelog.

Thanks to the 33 superheroic individuals who contributed PRs!

Aaditya Talwai, andre, Andrei Korzhevskii, Ari, Ben Wiklund, Brian Ford, Caitlin Potter, Chirayu Krishnappa, Derek Peterson, Eddie Monge Jr, gdi2290, Igor Minar, James deBoer, Jeff Cross, Julien Sanchez, Martin Field, Mathis Hofer, Mauro Carrero, Miško Hevery, mkolodny, PatrickJS, Pete Bacon Darwin, Peter Kosa, Phillip Alexander, rsnapp, Sebastien Roul, smarigowda, Stéphane Reynaud, Tatham Oddie, Tobias Bosch, victorbjelkholm, Vojta Jina, xdhmoore.

Read More

PHP Email Verification Script.

I received lots tutorial requests from my readers in that most of them asked to me, how to implement email verification system using PHP. This is very basic tutorial explained how to create database and proper activation code. Implemented with mysqli_() fuctions, because mysql_() functions are depreciated.

Read more »

Read More

AngularJS 1.2.0: timely-delivery

Our much-anticipated release of AngularJS 1.2.0 has landed. Pinch yourself; you're not dreaming.

AngularJS 1.2.0 timely-delivery fixes many issues found in 1.2.0-rc3, and introduces several new features since the previous stable release.

Since our last stable release, the most notable changes are:

• Animations and Transitions
• Better error messages (including error minification)
• Strict Contextual Escaping
• Track By function to prevent duplicates in ng-repeat
• Controller As syntax to access controller instances in templates
• Promise A+ Compliance
• Separation of ngRoute into its own module

The team has spent a lot of time consolidating, simplifying, improving content, and improving the user experience of our documentation. This is a work in progress, so stay tuned for more improvements.

For full details in this release see the changelog.

See the full migration guide on our guides.

Thanks to the 294 superheroic individuals who contributed PRs toward 1.2.0!

@supercobra, Adam, Adam Bowen, Adam Kent, Adam Shannon, Adam de Baugh, Alan Klement, Alex Olshansky, Alex Young, Alexander Kaidalov, Alexander Shtuchkin, Anders Hessellund Jensen, Andreas Marek, Andreas Sander, Andrew Jackson, Andrew O\'Brien, Andrew Peterson, Andrew Stuart, Andy Gurden, Andy Hitchman, Andy Joslin, Angel Balcarcel, Anthony Tran, Artemy Tregubenko, Arun Israel, Ash, Balázs Suhajda, Ben Holley, Ben Lesh, Ben McCann, Ben Ripkens, Ben Tesser, Boris Serdyuk, Brad Green, Braden Shepherdson, BrainCrumbz, Brenton, Brian Fitzpatrick, Brian Ford, Bruno Coelho, Butch Peters, Buu Nguyen, Caio Cunha, Caitlin Potter, Calvin Fernandez, Carl Danley, Chirayu Krishnappa, Christopher Hiller, CloudDueling.com, Colin Casey, Colin Frei, Dag-Inge Aas, DanS, Dang Nguyen Anh Khoa, Daniel Herman, Daniel Lamb, Daniel Luz, Daniel Tse, Dave Peticolas, David, David Barker, David Bennett, David Gonzalez, David Mosher, David Sanders, Dean Peterson, Dean Sofer, Derek Hammer, Dmitry Kichenko, Dmitry Shirokov, Domenic Denicola, Dusan Bartos, Eddie Monge, Eduardo Garcia, Ehsan Ghandhari, El Juli, Emmanuel, Eric Hagman, Eric Large, Eric Subach, Felix, Francesco Pontillo, Fred Sauer, Freek Wielstra, G Lormeau, G.H. Naylor, Gabor Csizmadia, George Bonner, Gias Kay Lee, Gowtam Lal, Greg Thornton, Grzegorz Lachowski, Hack Reactor Students, Henning Teek, Henry Hazan, Hubert SABLONNIÈRE, Igor Minar, Ilia Choly, Itamar Rogel, ItsLeeOwen, J Bruni, J. Tangelder, Jad Naous, James, James Daily, James Davies, James Dunn, James Roper, James Talmage, James deBoer, Jamie Mason, Jamund Ferguson, Jan Kuča, Jan Laußmann, Jared Forsyth, Jarrett Harris, JasonM23, Jeff Cross, Jeffrey Palmer, Jen Bourey, Jens Rantil, Jesse Palmer, Joao Sa, Joe Grund, Joe Hanink, JoeLeCodeur, Joey Organisak, John Bohn, Jordan Klassen, Josh McAdams, Josh Schumacher, Josh Taylor, Julie, Julien Bouquillon, Jussi Kosunen, Jérémy, Ken Chen, Ken Sheedlo, Lane Goldberg, Leandro Ostera, Lefteris Paraskevas, Leif Halvard Silli, Luc Morin, Lucas Galfasó, Maarten Stolte, Manuel Kiessling, Marc Tamlyn, Marcel Morgan, Marcin Wosinek, Marco Vito Moscaritolo, Mark Campbell, Mark J. Titorenko, Mark Striemer, Marko Bonaci, Martin Cortez, Martin Probst, Matias Niemelä, Matias Niemelä, Matthew Kleiman, Matthew Windwer, Merrick Christensen, Michael Kueller, Michael Stewart, Michal Bendowski, Michał Gołębiowski, Michiel Staessen, Mikk Kirstein, Misha Moroshko, Misko Hevery, Mr.Raindrop, Nelson Blaha, Nepoxx, Niall Smart, Nick Donohue, Nicola Peduzzi, Nicolas Brugneaux, NimaVaziri, OpherV, Ore Landau, P. Envall, Patrick Canfield, Patrick Drechsler, PatrickJS, Paul Meskers, Paulo Scardine, Pavel Vasek, Pawel Kozlowski, Paxton Hare, Pete Bacon Darwin, Peter Bacon Darwin, Peter Fern, Preston Marshall, R. Merkert, Randi Hillerøe, Renan Ivo, Reto Aebersold, Ricardo Bin, Richard, Richard John, Richard Sentino, Rob Culliton, Rob Dodson, Robb Shecter, Robbie Ferrero, Robert Fauver, Roberto Bonvallet, Roland, Ron Waldon, Rory Douglas, Sam Dornan, Santi Albo, Saul Maddox, Sean Fahey, Sebastian Müller, Sequoia McDowell, Siddique Hameed, Simeon Willbanks, Spencer, Spencer Applegate, Stefan hr Berder, Stephen Merity, Steven Sojka, Tay Ray Chuan, Thomas Tuts, Tim Graham, Tim Ruffles, Tim Statler, Tobias Bosch, Tom Dunstan, Tom Elovie Spruce, Tyler McGinnis, Umur Kontacı, Uri Goldshtein, Valentyn Shybanov, Vineet Kumar, Vojta Jina, Walter Higgins, Wesley Cho, Woody Peterson, Yang Pengcheng, Yuriy Bilogub, Zachary Friedman, adamshaylor, andre, anilgulecha, basarat, bolasblack, brakon, cjmling, commonlisp, douglascalhoun, ebeal, exex zian, gabriel-tessier, gdennie, gdi2290, ghodss, granteagon, jakub-bochenski, janhartigan, jankuca, joscarsson, joshbowdoin, joshkurz, joshrtay, jquadrin, justinrknowles, lorint, mgechev, micole, mmieszek, mtaran-google, naomiblack, naorye, neilmcgibbon, netpoetica, paolo-delmundo, phamdt, phanboy4, pzajdel, rjferguson21, rodbv, rodyhaddad, royling, sarkasm, sdesmond, sflahave, tgkokk, thorn0, tigbro, tomazy, ts-web, wiebl, Étienne Barrié

Read More

Outlook.com on a Custom Domain

Are you looking for free better email services for your domain? I suggest Outlook.com is the best option to setup your custom domain email service. This provides 50 member accounts free with all Outlook features like communicator, file storage etc. take a look this post follow the steps and setup your free Outlook account for your domain.

Read more »

Read More

Understanding Regular Expression

Regular expression is the most important part in form validations and it is widely used for search, replace and web crawling systems. If you want to write a selector engine (used to find elements in a DOM), it should be possible with Regular Expressions. In this post we explained few tips that how to understand and write the Regular Expression in simple way.

Read more »

Read More

10 Reasons To Get A .BLOG Name Now

Blogging has become more than just a way for people to express themselves over the internet; it has become a way for people to connect over shared interests. With the relative ease of setting up a personal blog, many people from all ages and backgrounds have started blogging. Choosing what domain extension to use for your blog is one of the most important steps to creating a successful blog.

Read more »

Read More

AngularJS 1.2.0-rc3: ferocious-twitch

Our last release candidate for 1.2, version 1.2.0-rc.3 is available. Onward to 1.2!

AngularJS 1.2.0-rc3 ferocious-twitch fixes a number of high priority issues in $compile and $animate and paves the way for 1.2.

This release also introduces some important breaking changes that in some cases could break your directives and templates. Please be sure to read the changelog to understand these changes and learn how to migrate your code if needed.

For full details in this release, see the changelog.

Please try it out, review the docs, and report any issues. If you find anything new affecting this release, be sure to note the version 1.2.0-rc.3 in your report.

Barring any exciting showstoppers in the next week, we'll wrap this up and declare it the official 1.2-release.

Thanks to the 117 superheroic individuals who contributed PRs!

Adam Kent, Alexander Kaidalov, Angel Balcarcel, anilgulecha, Anthony Tran, Ash, basarat, Ben Lesh, Ben McCann, Ben Tesser, Boris Serdyuk, brakon, Brian Ford, Butch Peters, Buu Nguyen, Caitlin Potter, Calvin Fernandez, Chirayu Krishnappa, cjmling, Colin Casey, commonlisp, Dag-Inge Aas, Dang Nguyen Anh Khoa, Daniel Luz, Daniel Tse, Dave Peticolas, David Barker, David Bennett, David Gonzalez, Dean Sofer, Eric Large, Felix, Francesco Pontillo, Fred Sauer, Freek Wielstra, gdennie, Gowtam Lal, Hack Reactor Students, Henning Teek, Henry Hazan, Hubert SABLONNIÈRE, Igor Minar, Ilia Choly, J Bruni, J. Tangelder, jakub-bochenski, James, James Daily, James Dunn, James Roper, Jamie Mason, janhartigan, jankuca, Jared Forsyth, JasonM23, Jeff Cross, Jen Bourey, Jesse Palmer, Joe Hanink, joscarsson, jquadrin, Julie, Ken Sheedlo, Lane Goldberg, lorint, Lucas Galfasó, Maarten Stolte, Marc Tamlyn, Mark J. Titorenko, Marko Bonaci, Martin Cortez, Matias Niemelä, Matthew Kleiman, Michael Kueller, Michał Gołębiowski, Michiel Staessen, Misha Moroshko, Mr.Raindrop, mtaran-google, naomiblack, naorye, Nick Donohue, Nicola Peduzzi, paolo-delmundo, Patrick Canfield, Patrick Drechsler, Paxton Hare, Pete Bacon Darwin, Peter Bacon Darwin, pzajdel, R. Merkert, Randi Hillerøe, Ricardo Bin, Richard, Richard Sentino, Rob Culliton, Roberto Bonvallet, rodyhaddad, Ron Waldon, royling, Sam Dornan, Saul Maddox, sflahave, Simeon Willbanks, Stefan hr Berder, Steven Sojka, Thomas Tuts, Tim Ruffles, Tim Statler, Tom Elovie Spruce, ts-web, Tyler McGinnis, Umur Kontacı, Uri Goldshtein, Vojta Jina, Woody Peterson, Zachary Friedman.

Read More

Customizing Google Maps

Do you know Google is providing an awesome feature, that you can create a totally customizable personalized Google Maps for your website based on theme colors. Today I want to explain how to customize and style Google Map from the scratch, just very few lines of code, this helps you to enrich your website design.

Read more »

Read More

Ajax Select and Upload Multiple Images with Jquery

Very few days back I had posted an article about Multiple ajax image upload without refreshing the page using jquery and PHP. In this post I have updated few lines of code that allows to user can select and upload multiple images in single shot, thanks to Lakshmi Maddukuri for sending me a useful piece of code. Just take a quick look this live demo.

Read more »

Read More

AngularJS Tutorial Two Way Data Binding

This post is the continuation of my previous AngularJS tutorial, I had explained JSON parsing using AngularJS. In this we are going to explain how to do two way data binding with Angular JS. Data binding is the most useful feature in AngularJS, It will help you to save from writing a lots of regular code.

Read more »

Read More

ASP.NET and Web Tools for Visual Studio 2013 RC

There are several new features introduced in ASP.NET and web tools for Visual Studio 2013 RC. You can check the release notes for more detailed information http://www.asp.net/vnext

Following are the list of major enhancements which you can see

• Visual Studio Web Tooling Enhancements
• One ASP.NET
• Browser Link – SignalR channel between browser and Visual Studio
• New HTML editor
• Azure website tooling with Azure SDK 2.1
• Scaffolding
• ASP.NET Framework Enhancements
• ASP.NET MVC 5
• ASP.NET Web API 2
• ASP.NET SignalR
• Entity Framework 6.0.0
• Microsoft OWIN (Open Web Interface for .NET) Components
• ASP.NET Identity
• NuGet 2.7

Find more at MSDN Blog @ http://blogs.msdn.com/b/webdev/archive/2013/09/09/announcing-release-of-asp-net-and-web-tools-for-visual-studio-2013-rc.aspx

Check the release notes @ http://www.asp.net/vnext/overview/aspnet-mvc

Read More

Create Custom Facebook Application

Facebook fan page is the most required thing for your brand or website to reach more people via social. Facebook Pages by default applications for Photos, Videos and Events, if you would like to add custom pages with other information like product Look Book, Offers, etc. This post explains you to how to create an application for Facebook Fan page, take a quick look at the following steps.

Read more »

Read More

AngularJS Tutorial RESTful JSON Parsing

Last some days I have been working with AngularJS, it is a Javascript MVC framework created by Google. Now Angular.js is my personal favorite framework to build better architecture web projects, especially for RESTful web services. It improves HTML with new attributes and expressions in order to define powerful templates directly in your HTML page.

Read more »

Read More

Finline Touch–Windows Phone App Store

I am happy to announce that my first windows phone 8 app Finline Touch is live on Windows Phone Store. Few of the screenshots from the application is given below.

Your Pocket personal finance tool to track and plan your investments. It includes the following calculators:

1. Loan Calculator, for mortgage, car or personal loans
2. Special Loan calculator, supporting 0% EMI and down payment
3. Fixed deposit calculator, supports simple interest and interest compounded annually, monthly, quarterly and semi annually.

First version of this application can be downloaded from Windows Phone Store from the this link : http://www.windowsphone.com/en-in/store/app/finline-touch/e004e119-7f4b-46f1-bda5-aa1b1b94e6ef

Read More

AngularJS 1.2.0-rc1: spooky-giraffe

The long-awaited release candidate for 1.2, version 1.2.0rc1 is available!

AngularJS 1.2.0rc1 spooky-giraffe adds a whole lot of new features that we've been working on in the 1.1.x releases: security improvements, a complete rewrite of transitions/animations support, better error messages (including error message minification), compiler additions, and better support for mobile/touchscreen devices.

There are also a few breaking changes since 1.1.5, most notably in $compile, to improve security and animations/transitions apis.

For full details in this release, see the changelog.

Please try it out, kick the tires, read the new docs, and report any issues. If you find anything new affecting this release, be sure to note the version 1.2.0-rc1 in your report.

We'll add a few more documentation changes, tutorial updates, and minor details before putting the final stamp on 1.2.

Thanks to the 115 superheroic individuals who contributed PRs in this release!

Adam, adamshaylor, Alan Klement, Alex Olshansky, Alex Young, Alexander Shtuchkin, Anders Hessellund Jensen, Andreas Marek, Andreas Sander, Andrew O'Brien, Andrew Peterson, Andy Hitchman, Andy Joslin, basarat, Ben Holley, Ben Ripkens, bolasblack, Braden Shepherdson, Brenton, Brian Fitzpatrick, Brian Ford, Bruno Coelho, Caio Cunha, Carl Danley, Chirayu Krishnappa, Daniel Herman, Daniel Luz, David, David Bennett, David Mosher, David Sanders, Dean Peterson, Dean Sofer, Domenic Denicola, Eddie Monge, Eduardo Garcia, Ehsan Ghandhari, Emmanuel, Eric Hagman, Eric Subach, Étienne Barrié, exex zian, gdi2290, Gias Kay Lee, Greg Thornton, Igor Minar, Itamar Rogel, Jad Naous, James Davies, James deBoer, Jamund Ferguson, jankuca, Jan Laußmann, Jared Forsyth, Jeff Cross, Jeffrey Palmer, Jens Rantil, Joao Sa, John Bohn, joshkurz, joshrtay, Julien Bouquillon, Jérémy, Ken Chen, Ken Sheedlo, Leandro Ostera, Lefteris Paraskevas, Luc Morin, Lucas Galfasó, Manuel Kiessling, Marcin Wosinek, Marco Vito Moscaritolo, Mark Campbell, Mark Striemer, Matias Niemelä, Matias Niemelä, Matthew Windwer, Michael Stewart, Michał Gołębiowski, Mikk Kirstein, Misha Moroshko, Misko Hevery, naomiblack, neilmcgibbon, Nelson Blaha, Niall Smart, NimaVaziri, OpherV, Ore Landau, P. Envall, Paul Meskers, Paulo Scardine, Pavel Vasek, Pawel Kozlowski, Pete Bacon Darwin, Peter Fern, Richard John, Robb Shecter, Robbie Ferrero, Robert Fauver, Roland, Rory Douglas, sarkasm, Santi Albo, sdesmond, Sebastian Müller, Siddique Hameed, Spencer, Spencer Applegate, Stephen Merity, Tay Ray Chuan, tgkokk, Vineet Kumar, Vojta Jina, Wesley Cho.

PS If you're wondering what's up with 1.0.x branch, we still have at least one bugfix release planned for 1.0.x. We're planning to have that out within a few days

Read More

Multiple Ajax Image Upload without Refreshing Page using Jquery.

Today I am presenting the most important social networking feature called multiple ajax image upload without refreshing the page using jquery and PHP. We just modified few lines of code in jqery.form.js plugin and renamed that to jquery.wallform.js. This feature is one of the key feature in Wall Script sale, big thanks to Arun Sekar for this code trick.

Read more »

Read More

Wall Script 6.0

Introducing the brand new Wall Script 6.0 with enrich social network features. Exactly year later I did released Wall Script previous version, it got awesome response and outstanding sale. This script IDEA was came out from my imagination, introducing powerful features like Conversations, OEmebd URL expanding system, Like/Share and Multiple image slider.

Read more »

Read More

Jquery Timeago Implementation with PHP.

Nowadays timeago is the most important functionality in social networking sites, it helps to updating timestamps automatically. Recent days I received few requests from 9lessons readers that asked me how to implement timeago plugin with dynamic loading live data using PHP. In this post I am just presenting a simple tip to implement timeago in a better way.

Read more »

Read More

Monetize your Windows 8 Applications with Lotaris

I was approached by Lotaris a while ago and asked if I would do a review of their platform. Having not heard of the company before, I waded in and started looking around and was quietly surprised by what I found. If you’re interested in making more money for your paid apps or a higher revenue stream plus tracking and analytics, read on.

Read more »

Read More

CRUD Operation using Ignite UI Grid (igGrid), HTML 5 and MVC 4

Today I am going to show you the basic CRUD operation using ASP.NET MVC 4 and Ignite UI Grid. The best feature of this Grid is it allows you to code in various ways depending on the language you are comfortable with, like if you are more comfortable in coding using MVC you can go for it, if you want to code in pure jQuery you can go for that too, with complete support of all the Browsers, Platform and devices.

For this demo I have chosen Web Application using HTML5 + jQuery in an MVC 4 application. To start first you can download the IgniteUI Grid package from here. And follow the steps below:

1. Setup the Environment.

Once you downloaded the installer un-package the ZIP File (IgniteUI_20122_WithSamplesAndHelp.zip) -> Go to Setup folder –> and install the IngniteUI_20122.msi in your system.

Once you complete the installations, go the folder where you have installed the IgniteUI and copy the ‘css’ and ‘js’ folder from your installer location to your application root folder.

Now include this files in your Visual Studio .NET Solution folder.

Once you perform all these steps, your solution is almost ready for the coding Ignite UI controls using jQuery and HTML 5.

Add the following JavaScript and CSS references are recommended in this order:

Alternatively instead of loading the jQuery libraries from CDN you can load the libraries from your local resources and Infragistics loader can be used to load only necessary resources for your Infragistics scripts. In my example I have kept the script references as below, make sure to keep the Infragistics loader script in the same order otherwise you may get runtime script error.

To request necessary resources, which include CSS and JavaScript files the following code may be used, note that; the asterisk at the end of igGrid is used to specify to load all the resource which starts with igGrid and required to perform the Infragistics Grid operations.

This completes the initial environment setup for the Infragistics igGrid controls using jQuery and HTML 5.

2. Setup the Model

Now the next step will be to implement the model and business logic, for the purpose of this demo I have kept this simple and used igGrid instead of using Hierarchical data using igHierarchicalGrid. I have used SQL Database as Datastore with EF 5 using Repository pattern and MVC 4 for CRUD operations. The focus of my article is to cover the features of igGrid and how to implement this control, so I am going to give you a very high level overview of the Data Model and the Patterns which are used in this example. In the model diagram below for this example I have used only the employee table. The address table can be used if you are considering to display the hierarchical data.

3. Setup the Repository Code

   1: /// <summary>

   2: /// Get All Employees

   3: /// </summary>

   4: /// <returns>Employee Collection</returns>

   5: public IEnumerable<Employee> GetAll()

   6: {

   7:     context.Configuration.ProxyCreationEnabled = false;

   8:     return context.Employees.Include("Addresses");

   9: }

  10:  

  11: /// <summary>

  12: /// Get Employee By Id

  13: /// </summary>

  14: /// <param name="employeeId">Employee Id</param>

  15: /// <returns>Employee</returns>

  16: public Employee GetById(int employeeId)

  17: {

  18:     return context.Employees

  19:         .Where(a => a.EmployeeId == employeeId).FirstOrDefault();

  20: }

  21:  

  22: /// <summary>

  23: /// Add/Update Employee

  24: /// </summary>

  25: /// <param name="employee">Employee to Add or Update</param>

  26: /// <returns>Success or Failed</returns>

  27: public int Update(Employee employee)

  28: {

  29:     if (employee.EmployeeId == 0)

  30:     {

  31:         context.Employees.Add(employee);

  32:     }

  33:     else

  34:     {

  35:         var result = context.Employees

  36:             .Where(a => a.EmployeeId == employee.EmployeeId).FirstOrDefault();

  37:         if (result != null)

  38:         {

  39:             context.Entry(result).CurrentValues.SetValues(employee);

  40:         }

  41:     }

  42:     return context.SaveChanges();

  43: }

  44:  

  45: /// <summary>

  46: /// Deletes an Employee

  47: /// </summary>

  48: /// <param name="employeeId">Employee Id of the employee to be deleted</param>

  49: /// <returns>Success or Failed</returns>

  50: public int Delete(int employeeId)

  51: {

  52:     var result = context.Employees

  53:         .Where(a => a.EmployeeId == employeeId).FirstOrDefault();

  54:     context.Employees.Remove(result);

  55:     return context.SaveChanges();

  56: }

The repository layer consists of the following methods:

GetAll :- Get all the employee to display in the Grid control, this methods returns collection of employees

GetById :- Get Employee by Employee Id, this method returns a single Employee entity.

Update :- Add or Update the employee one at a time.

Delete :- To delete the employee by employee Id

Below are the business entities, to keep simple I have modified the code generated by Entity Framework and bound the same model to the Controller and Views. Alternatively you can create a separate business entities and use the AutoMapper or Translators to do the same.

You can notice I have added three new properties, called AddRow, DeleteRow and UpdateRow, which I have used as a dummy column name to bind to my Grid for Update and Delete Operation, Alternatively you can use the concept of Unbound columns of Ignite UI Grid to do the same.

4. Setup the Controller.

Now for the controller code I have created the Action methods to GetAll the Employees, Manage, Update and Delete Employees.

   1: [AcceptVerbs(HttpVerbs.Get)]

   2: public ActionResult GetAll()

   3: {

   4:     repository = new EmployeeRepository();

   5:     var employees = repository.GetAll().ToList();

   6:     return Json(employees, JsonRequestBehavior.AllowGet);

   7: }

   8:  

   9: [AcceptVerbs(HttpVerbs.Get)]

  10: public ActionResult ManageEmployee(int employeeId, string command)

  11: {

  12:     repository = new EmployeeRepository();

  13:     if (!String.IsNullOrEmpty(command) && command.Equals("edit"))

  14:     {

  15:         var employees = repository.GetById(employeeId);

  16:         ViewBag.IsUpdate = true;

  17:         return View("_ManageEmployee", employees);

  18:     }

  19:     else

  20:     {

  21:         ViewBag.IsUpdate = false;

  22:         return View("_ManageEmployee");

  23:     }

  24: }

  25:  

  26: [AcceptVerbs(HttpVerbs.Post)]

  27: public ActionResult Update(IgGridDemo.Models.Employee employee, string command)

  28: {

  29:     if (ModelState.IsValid)

  30:     {

  31:         repository = new EmployeeRepository();

  32:         repository.Update(employee);

  33:     }

  34:     return RedirectToAction("Index");

  35: }

  36:  

  37: [AcceptVerbs(HttpVerbs.Get)]

  38: public ActionResult Delete(int employeeId)

  39: {

  40:     repository = new EmployeeRepository();

  41:     repository.Delete(employeeId);

  42:  

  43:     return RedirectToAction("Index");

  44: }

In the controller we have the following Action Methods which is as follows:

GetAll :- used to fetch all the employee from the Repository and return the Json result to the Views

ManageEmployee :- used by the Edit and Add buttons from the Grid, this method accepts employeeId and command as input parameter, command parameter is used to check if the request is coming from Add or Edit button, based on the command the action logic decides which View to call and Set the parameters. In this cased I have used the same view called _ManageEmployee.cshtml for both the operation and setting the ViewBag.IsUpdate either as true or false. If IsUpdate is set to true then we display the _ManageEmployee form accordingly. This ActionMethod does not make any call the the Repository layer.

Update :- called from the _ManageEmployee.cshtml view, and accepts Employee as an input parameter. For the new employee EmployeeId is set to default value as ‘0’ and for Update operation, we will have the employeeId set. Based on the employeeId repository layer decides whether we have to Add or Update an existing employee.

Delete :- used to delete the selected employee, this Action Method accepts employeeId as input parameter and removes the employee from the database using the Repository Layer.

5. Setup the View with Ignite UI Grid

Now coming to the final part, and the one which is the main focus of this Article, the View Part. To Display the Grid in the View, I am going to extend the script of the igGrid Loader further. As mentioned earlier igGrid is a very powerful control which includes lots of features. Including all these features may not be possible to cover in single article.

igGrid supports the built-in edit, add and delete dialogs, and you can even edit the data inside the grid itself as I have given in the screen below. But for the sake of simplicity and more control on the dialog you are creating I am going to create custom Dialog controls for Add and Update screens. The screen below shows the built-in edit feature of igGrid.

Now let me start with the View Code which I have written to bind and display the data.

In the Index.cshtml, first I am going to create the place holder for the Grid control.

   1: <section class="featured">

   2:     <div class="content-wrapper">

   3:         <!-- the igGrid target element-->

   4:         <table id="employeeGrid" style="width: auto;"></table>

   5:     </div>

   6: </section>

And for requesting the data from server, rendering and displaying I am modifying the igGrid loader script which I have given above

   1: <script type="text/javascript">
   1:  
   2: $.ig.loader({
   3:     scriptPath: './js/',
   4:     cssPath: './css/',
   5:     resources: 'igGrid.*',
   6:     ready: function () {
   7:         $.getJSON("Home/GetAll", null, function (data) {
   8:             var headerTextValues = ["Employee Id", "First Name", "Last Name", "Age", "Update", "Delete"];
   9:             $('#employeeGrid').igGrid({
  10:                 expandCollapseAnimations: true,
  11:                 animationDuration: 1000,
  12:                 expandTooltip: "Expand to View Details",
  13:                 collapseTooltip: "Hide details",
  14:                 height: "400px",
  15:                 width: "800px",
  16:                 dataSource: data,
  17:                 responseDataKey: "Records",
  18:                 dataSourceType: "json",
  19:                 autoGenerateLayouts: false,
  20:                 autoGenerateColumns: false,
  21:  
  22:                 rowEditDialogContainment: "owner",
  23:                 showReadonlyEditors: false,
  24:  
  25:                 columns: [
  26:                     { headerText: headerTextValues[0], key: "EmployeeId", width: 150 },
  27:                     { headerText: headerTextValues[1], key: "FirstName", width: 175 },
  28:                     { headerText: headerTextValues[2], key: "LastName", width: 175 },
  29:                     { headerText: headerTextValues[3], key: "Age", width: 175 },
  30:                     { headerText: headerTextValues[4], key: "UpdateRow", width: 175, template: "<a href='Home/ManageEmployee?EmployeeId=${EmployeeId}&command=edit' class='editDialog'>Edit</a>" },
  31:                     { headerText: headerTextValues[5], key: "DeleteRow", width: 175, template: "<a href='Home/Delete?EmployeeId=${EmployeeId}' class='confirmDialog'>Delete</a>" },
  32:                 ],
  33:  
  34:                 initialDataBindDepth: -1,
  35:                 primaryKey: 'EmployeeId',
  36:                 width: '800',
  37:  
  38:                 features: [
  39:                         {
  40:                             name: "Selection",
  41:                             mode: "row",
  42:                             multipleSelection: false
  43:                         },
  44:                         {
  45:                             name: 'Hiding'
  46:                         },
  47:                         {
  48:                             name: 'Paging',
  49:                             type: 'local',
  50:                             pageSize: 5,
  51:                             inherit: true
  52:                         },
  53:                         {
  54:                             name: 'Filtering'
  55:                         },
  56:                         {
  57:                             name: "ColumnMoving",
  58:                             mode: "immediate",
  59:  
  60:                             //columnDragStart: function (event, ui) {
  61:                             //    ui.owner.element.find('tr td:nth-child(' + (ui.columnIndex + 1) + ')').addClass("ui-state-moving");
  62:                             //    colMovingKey = ui.columnKey;
  63:                             //},
  64:                             //columnDragEnd: function (event, ui) {
  65:                             //    var grid = $(event.target).data('igGrid');
  66:                             //    var newindex = grid.options.columns.indexOf(grid.columnByKey(colMovingKey)) + 1;
  67:                             //    grid.element.find('tr td:nth-child(' + newindex + ')').removeClass("ui-state-moving");
  68:                             //},
  69:  
  70:                             addMovingDropdown: true,
  71:                             mode: "deferred",
  72:                             type: "render"
  73:                         }
  74:  
  75:  
  76:                 ],
  77:             });
  78:         });
  79:     }
  80: });
</script>

Here in the line 7, I am making the JSON call to the GetAll action method, in line 8, I have defined the headers for the Grid. Now quickly jump to the output screen which will speak by itself and then I am going to move to the next line of codes.

Best part of Ignite UI Grid is that it has built in support for Filtering, Column Hiding, Sorting, Column Rearrange, etc with just few lines of code. As you can see from line 38, I have set the features of the Grid. In this example I have demonstrated just few of the properties, for the exhaustive list of features of Ignite Grid you can refer to igGrid from this link : http://help.infragistics.com/jQuery/2012.2/ui.iggrid

From line 10-20 I am setting up the Grid Properties and there is nothing much to explain there. And from line 20-32 I am defining the columns and their binding properties, things which is to notice is on line 30 and 31 where I have defined the custom template for the column which calls the Manage Action method from the HomeController with the employeeId and command as a parameter. And to open these dialogs I have put a separate script which I have packaged with my Source code which you can download from here, alternatively you can get more details on the modal dialog controls which I have used in this link : http://www.mindstick.com/Articles/279bc324-5be3-4156-a9e9-dd91c971d462/?CRUD%20operation%20using%20Modal%20dialog%20in%20ASP.NET%20MVC.

Once you click this Add/Edit button inside the grid you will get the dialog to edit your data.

Saving on these screen makes call to Update Action method of HomeController and based on employeeId as either 0 or > 0 the Repository layer decides whether to Save or Update an existing employee. Similarly on click of the Delete button I have created a Modal windows for the Delete operation too.

6. Other Ignite UI Grid features which you might like to Explore

With this article I leveraged few of the features of Ignite UI Grid, a part from these features there are lots of other features which you can leverage like displaying the Hierarchical  Data using igHirerarchialGrid, igPivotGrid for multidimensional data, Column Reordering, Column Hiding, Merged Columns, Paging, Resizing, Grid Summaries,  Continuous Virtualization, and lots of other features which can be achieved with just few lines of code.

Along with these features you can either use MVC Server side code to render and display the Grid or you can use plain HTML 5 + CSS based on your comfort. In my example I have used the later one. Ignite UI Grid also have full support for REST API. In my upcoming post I will try to cover these features and try to dive more deep into these concepts.

7. Useful Links

Hope this post will help you, You can download the source code from here:

https://skydrive.live.com/redir?resid=B13080429F8946BC!7011&authkey=!APZsUBTZmzzpuww

Other useful Links which might help you.

Ignite UI Trial Download : http://www.infragistics.com/igniteui-download?utm_source=Microsoft.NetDeveloperBlog&utm_medium=Banner&utm_content=IgniteUI&utm_campaign=IgniteUI-Product

Ignite UI Api Reference : http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0

Ignite UI Developer Reference : http://help.infragistics.com/jQuery/2013.1/

Controls and Application Samples : http://www.infragistics.com/products/jquery/grid

Read More