Web Code Helpers Coding Blog, Angularjs Tutorials, html5, css, jQuery, Ajax, javascript, html, examples and Demos Web CodeHelpers

Coding RESTful API Call using Jquery

In this tutorial we are going to discuss about doing a RESTful API call using Jquery with example

Using Jquery Ajax we can do the RESTful API call, We can render the data JSON / XML in the webpage / webapplication

jQuery Ajax function basically performs an asynchronous HTTP request with parameters

  • type is the request method. Possible values can be GETPOSTDELETEPUT, etc. Here we are making a "GET" request.
  • url represents a resource on the web. In our case, we are providing service URL.
  • datatype specifies the type of data returned from server, i.e., xml, text, html, script, json, jsonp.
  • success is the callback function that will be invoked when request gets completed.
  • error is also a callback function that will be called in case of request failure.

The above code will the show the demo how we call the RESTapi using jquery

Success Call back will hold the Success data of response

Error Call back will hold the Error data

AngularJs ChromeExtensions for Development

In the article we like to list out the chrome-extensions which are useful for angularjs development

1. AngularJS Batarang
Description : Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.

2. ng-inspector for AngularJS

Inspector pane for AngularJS apps : ng-inspector is a browser extension that displays an inspector panel showing the AngularJS scope hierarchy in the current page in real time, as well as which controllers or directives are associated with which scope. Hovering over a scope in the inspector will highlight the DOM element that scope is attached to. Clicking on a model will console.log that model's contents. The extension adds a button next to the address bar with the Angular logo that toggles the pane on and off.

AngularJs Based SPA [Single Page Application] with Example

AngularJs Based SPA [Single Page Application] with Example

Users Management Module in  AngularJs Based SPA [Single Page Application]

In this example i used bootstrap CSS ,  AngularJs for SPA and JSON Data

In the current Example , I explained about three Modules

1. Add Users
2. List Users
3. Search Users

Edit and Delete Users will in the Next Tutorial

In the below HTML page(index.html) we need to add bootstrap css and AngularJs Minified Code

Below Code add in the Index Page Body Area
Full Name Company Name Designation e-Mail edit delete
{{ name }} {{ cname }} {{ designation }} {{ email }}
{{ list.name | uppercase}} {{ list.cname | uppercase}} {{ list.designation | uppercase}} {{ list.email }} edit delete

CSS Page, In this page, we included the boot strap
CSS Code

Javascript [Users Based Controller ] ::

Google Chrome web authoring and debugging tools


The Chrome Developer Tools (DevTools for short), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

Note: If you are a web developer and want to get the latest version of DevTools, you should use Google Chrome Canary.

How to access the DevTools

To access the DevTools, open a web page or web app in Google Chrome. Either:

Select the Chrome menu  at the top-right of your browser window, then select Tools > Developer Tools, or
Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

There are several useful shortcuts for opening the DevTools:

Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
For your day-to-day workflow, learning the shortcuts will save you time.

The DevTools window

The DevTools are organised into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you work with a specific type of page or app information, including DOM elements, resources, and sources.

Overall, there are eight main groups of tools available view Developer Tools: Elements, Resources, Network, Sources, Timeline, Profiles, Storage, Audits, and Console. You can use the Ctrl+[ and Ctrl+] shortcuts to move between panels.

Inspecting the DOM and styles

The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.

Working with the console

The JavaScript Console provides two primary functions for developers testing web pages and applications:

A place to log diagnostic information using methods provided by the Console API, such as console.log(), or console.profile().
A shell prompt where you can enter commands and interact with the document and the Chrome DevTools. You can evaluate expressions directly in the Console, and can also use the methods provided by the Command Line API, such as $() command for selecting elements, or profile() to start the CPU profiler.

Debugging JavaScript

As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.

Improving network performance

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.


The Audit panel can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness. For further insight, we recommend also installing the PageSpeed extension.

Improving rendering performance

The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page. All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.

JavaScript & CSS performance

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes a few profilers: a CPU profiler, a JavaScript profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

The CPU profiler shows where execution time is spent in your page's JavaScript functions.
The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes.
The JavaScript profile shows where execution time is spent in your scripts

Inspecting storage

The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 Database, Local Storage, Cookies, AppCache, etc.

Useful Chrome Extensions for Web Developers

WhatFont - Google Chrome Extension

The easiest way to identify fonts on web pages

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.

What Font Chrome Extension Link

Screen ruler - Google Chrome Extension 

A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.

Get pixel perfect with horizontal and vertical draggable rulers; pixel, picas and type measurements, line height guides and stroke widths. Move ruul with arrow keys, one pixel at a time, and use multiple ruul together. Ruul have 4 different coloured ruul, steel and wooden ruul included.

"Every Web designer or Developer should have One"

Screen ruler Chrome Extension Link 

Screen Capture - Google Chrome Extension

Capture visible content of a tab, a region of a web page, or the whole page as a PNG image. Support horizontal and vertical scroll…

It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image.

You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported.

What set this extension apart are: Super fast when capturing page image, esp. for large pages; Support horizontal scroll for large pages that do not fit in one tab screen horizontally; Intelligently detect floating objects on a page and avoid repeating capture of the same floating objects if whole page capture requires scrolling; Works on Windows, Linux and Mac

Screen Capture Chrome Extension Link 

Image Downloader - Google Chrome Extension

If you need to bulk download images from a web page, with this extension you can: See images that the page contains and links to, Filter or sort them by URL; also supports wildcards and regular expressions, Optionally show only images from links, Select images for download by either using the checkboxes or directly clicking on the image, Dedicated buttons to download or open in new tab individual images, Customize display width, border size, style and color, Hide filters, buttons and notifications you don't need
When you press the "Download" button, all selected images are saved to the default download directory of Chrome. If you don't have one, you will have to manually choose the save location for each image.

Evernote Web Clipper - Google Chrome Extension

RescueTime is a personal-analytics service that helps you understand how you spend your time.
From interests to research, save anything you see online—including text, links and images—into your Evernote account with a single click. With one click, clip part or all of any webpage, including text, images, and links. Collect everything that inspires you online. Have it forever, even if the original goes away.

Evernote Chrome Extension Link 

RescueTime- Google Chrome Extension

RescueTime is a personal-analytics service that helps you understand how you spend your time.RescueTime is a personal-analytics service that helps you understand how you spend time on your computer, smartphone and tablet. There is no manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.

Rescue Time Chrome Extension Link 

Pinterest - Google Chrome Extension

Discover, collect, and share inspiration.Pinterest is a tool to find your inspiration and share it with others. Use it to collect things you love, organize and plan important projects, and more.The official Pinterest extension for Google Chrome adds a button to your browser that lets you pin from any website, quickly and easily

Pintrest Chrome Extension Link 

Web Developer - Google Chrome Extension

Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

Stylebot - Google Chrome Extension

Adapt the web's appearance

Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).
You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.

Alexa Traffic Rank - Google Chrome Extension

The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.Alexa Traffic Rank is Alexa Internet's free extension for Chrome, and is the only extension that includes you in Alexa's traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.
Get quick and easy access to a site's Alexa Traffic Rank and sites linking in. How does this site's traffic compare to other sites on the Web?

Alexa Traffic Rank Chrome Extension Link 

Eye Dropper - Google Chrome Extension

Eye Dropper is open source extension which allows you to pick colors from web pages.Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

Eye Dropper Chrome Extension Link 

Resolution Test - Google Chrome Extension

An extension for developers to test web pages in different screen resolutions.An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here - http://browsersize.googlelabs.com/

Resolution Test Chrome Extension Link

Speed Tracer  - Google Chrome Extension

Get insight into the performance of your web applications.Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by: Javascript parsing and execution, Layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading, Timer fires, XMLHttpRequest callbacks, Painting and more.

Speed Tracer Chrome Extension Link

Firebug Lite - Google Chrome Extension

Firebug Lite for Google Chrome, supported by the Firebug Working Group.Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.For more detailed information, visit:http://getfirebug.com/releases/lite/chrome/

Firebug Lite Chrome Extension Link

Corporate Ipsum- Google Chrome Extension

Generate random corporate double-speak for use as filler text.A lorem ipsum generator with a corporate bent.Generates filler content by the word or paragraph.This is a clone (with permission) of Brian Haslanger's Corporate Ipsum dashboard widget for Google Chrome.Efficiently seize integrated vortals with installed base methodologies. Synergistically orchestrate leveraged data with intuitive action items. Proactively develop tactical services and interoperable networks. Efficiently create enterprise potentialities whereas interoperable e-commerce. Globally fabricate worldwide solutions via principle-centered human capital.
Planned additions: Copy output as HTML, Configurable number of sentences per paragraph.opy-output-as-html, and configurable number of sentences per paragraph.

Corporate Ipsum Chrome Extension Link

Web Development / UI Terminology

Before Learning any Platform we need to know the basic terminology,
Understanding Terminologies will be helpful to learn the technology easily,.


Refers to the structuring of web content in such a way that it is easily accessible to all users, in particular users with disabilities.


Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.


The text a link uses to refer to your site. This can make a big difference in your siteís search engine results


this convenient tool allows users to move data up and down the computer screen.


this part of a program is located at the bottom-most part of its interface, and it usually displays small messages that indicate the progress of a command or task. If programmed incorrectly, an application might display the wrong information in this area.


The back end of a website is the part hidden from view of regular website visitors. The back end generally includes the information structure, applications, and the CMS controlling content on the site.


Backlinks are links from other sites back to your own. Theyíre sometimes also referred to as ìtrackbacksî (especially on blogs). Backlinks have a huge impact on your sites search rankings. Lots of backlinks from high-ranking sites can greatly improve your search engine results, especially if those links use keywords in their anchor text.


Bandwidth can refer to two different things: the rate at which data can be transferred or the total amount of data allowed to be transferred from a web host during a given month (or other hosting service term) before overage charges are applied. It is generally referred to in term of bits-per-second (bps), kilobits per second (kbs), or other metric measurements. Lower bandwidth internet connections (such as dial-up) mean data loads slower than with high bandwidth connections (like cable or fiber).


A websiteís bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a websiteís navigation is, as well as an indicator of the quality of the siteís content (a very high bounce rate doesnít bode well for either of those things).


Breadcrumbs are the bit of navigation elements that generally appear near the top of a give web page that show you the pages and subpages the appear before the page youíre on. For examples, on a blog, the breadcrumbs might look something like: Home > Category > Year > Month > Post (or they might be a lot simpler that that).


Browser refers to the program a website visitor is using to view the web site. Examples include Safari, Firefox, Google Chrome, Opera, and Internet Explorer.


Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.


Client-side refers to scripts that are run in a viewerís browser, instead of on a web server (as in server-side scripts). Client-side scripts are generally faster to interact with, though they can take longer to load initially.


Also known as a CMS, the Content Management System is a backend tool for managing a siteís content that separates said content from the design and functionality of the site. Using a CMS generally makes it easier to change the design or function of a site independent of the siteís content. It also (usually) makes it easier for content to be added to the site for people who arenít designers.


CSS (Cascading Style Sheet) is a style sheet language that determines the look of elements on a web page. Web sites can be built without CSS (it came many years after HTML), but CSS gives the web designer more power to control how the content is displayed. The main benefit of CSS is that it splits the content from the presentation. Site-wide style changes can be performed by editing the style sheet rather than every page individually.


A CSS framework is a collection of CSS files used as the starting point to make XHTML and CSS web sites quickly and painlessly. They usually contain CSS styles for typography and layout.


Depricated tags, elements or attributes are ones that have become obsolete or they have been replaced by newer versions. Continuing to use a depricated tag/element/attribute might seem to work fine, but it will eventually stop working as newer web browsers stop supporting it.Deprecated code is code that is no longer included in the language specifications. Generally this happens because it is replaced with more accessible or efficient alternatives.


Stands for Dynamic HyperText Markup Language. DHTML fuses XHTML (or any other markup language), the DOM, JavaScript (or other scripts), and CSS (or other presentation definition languages) to create interactive web content.


Stands for Domain Name Service (alternately Domain Name System or Domain Name Server). Basically, itís the thing that converts IP addresses into domain names. DNS servers are provided with the IP address of your web server when you assign your domain name to those servers. In turn, when someone types your domain name into their web browser, those DNS servers translate the domain name to the IP address and point the browser to the correct web server.


The doctype declaration specifies which version of HTML is used in a document. It has a direct effect on whether your HTML will validate.


Stands for Document Object Model. Itís a language-indpendent, cross-platform convention for representing objects in XML, XHTML, and HTML documents.


The domain is the name by which a website is identified. The domain is associated with an IP address. Domains can be purchased with any combination of letters, hyphens (-), and numbers (though it canít start with a hyphen). Depending on the extension (.com, .net, .org, etc.), a domain can be anywhere up to 26 to 63 characters long.


Stands for Document Type Definition. DTD is one of several SGML and XML schema languages. It provides a list of the attributes, comments, elements, entities, and notes in a document along with their relationships to each other.


Short for electronic commerce. Itís the buying and selling of goods online, through websites. Products sold through e-commerce can be physical products that require shipping, or digital products delivered electronically.


An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. Itís ability to flex to accommodate the browser width and readerís font preferences are where it gets its name.


In XML, an element is the central building block of any document. Individual elements can contain text, other elements, or both.


An embedded style is a CSS style written into the head of an XHTML document. It only effects the elements on that page, instead of site-wide as a separate CSS file does. Style in an embedded style sheet will override styles from the linked CSS file.


Otherwise known as XML. XML is a markup language used for writing custom markup languages. In other words, XML describes how to write new languages (itís sometimes referred to as a ìmetaî language because of this). It also serves as a basic syntax that allows different kinds of computers and applications to share information without having to go through multiple conversion layers.


This is a CSS document that is written in a separate, external document. The biggest advantage to using an external style sheet is that it can be linked to by multiple HTML/XHTML files (which means changes made to the style sheet will effect all the pages linked to it without having to change each page individually).


Favicons are tiny (generally 16◊16 pixels, though some are 32◊32 pixels), customizable icons displayed in the web address bar in most browsers next to the web address. Theyíre either 8-bit or 24-bit in color depth and are saved in either .ico, .gif or .png file formats.


A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.


Font family is a group designation for defining the typefaces used in CSS documents. The font family tag generally lists multiple fonts to be used, and usually ends with the generic font category (such as ìserifî or ìsans-serifí).


In CSS, the font style refers solely to whether a font is italic or not.


The font weight refers to how thick or thin (bold or light) a font looks.


The front-end is basically the opposite of the back-end. Itís all the components of a website that a visitor to the site can see (pages, images, content, etc.) Specifically, itís the interface that visitors use to access the siteís content. Itís also sometimes referred to as the User Interface.


Also referred to by its acronym: GUI. A graphical user interface uses an input device (like the mouse) and visual representations of how the user is able to interact with a web application. In other words, itís all the front-end stuff you see on a web application. Itís purpose is to allow you to interact with a web application without having to enter code.


Also referred to a ìhexî numbers, they are a base-16 numbering system used to define colors online. Hex numbers include the numerals 0-9 and letters A-F. Hexadecimal numbers are written in three sets of hex pairs. Because screen colors are RGB (Red, Green, Blue), the first pair defines the red hue, the second pair defines the green hue, and the third pair defines the blue.


The .htaccess file is the default directory-level configuration file on Apache servers. They are also known as ìdistributed configuration files.î Configuration directives contained in the .htaccess file apply to the directory in which the file is placed as well as all of its subdirectories. Within the .htaccess file things like authorization and authentication, rewriting of URLs, cache control and customized error responses can all be specified.


Stands for Hypertext Markup Language. Itís the primary language used to write web pages. HTML is primarily intended as a way to provide content on websites (with CSS handling the layout and stylistic options), though it can also be used to determine how that content is displayed.


Also referred to as an HTML element, an HTML tag is the bit of code that describes how that particular piece of the web page itís on is formatted. Typical tags specify things like headings, paragraphs, links, and a variety of other items.


Stands for HyperText Transfer Protocol. HTTP is a set of rules for transferring hypertext requests between a web browser and a web server.


Similar to HTTP, HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer) or, alternately, HyperText Transfer Protocol Secure. Like HTTP, itís a set of rules for transferring hypertext requests between browsers and servers, but this time itís done over a secure, encrypted connection.


A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the ìhyperî part of ìhypertext.î


Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.


Short for Inline Frame. An iframe is used to display one or more web pages within another normal web page (one that isnít a frameset page).

Image map

An image map is a single image on a web site where one or more area of the image has been turned into a link, as opposed to an image link where the entire image is linked.


In CSS, elements that donít have a pre-defined style will take on the style of their parent element within the document tree.


Elements with CSS written directly around the element it affects, instead of in a separate style sheet or header style.


A landing page is the page where a visitor first enters a website. Oftentimes, a special landing page is created to elicit a specific action from the new visitor (usually in connection with an advertising or marketing campaign).


A link farm is any website setup specifically to increase the link popularity of other websites by increasing the number of incoming links to that site. While some link farms are single pages listing unrelated links, others consist of networks of sites that contain multiple links back and forth to one another. Search engines can generally recognize these types of schemes and often remove link farms from their directories and penalize the sites linking to and from them.


A liquid layout is one that is based on percentages of the browser windowís size. The layout of the site will change with the width of the browser, even if the visitor changes their browser size while viewing the page. Liquid layouts take full advantage of a personís browser width, optimizing the amount of content you can fit onscreen at one time.


This refers to the coding applied to a text document to change it into an HTML, XML, or other Markup Language document.


Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isnít viewable on the web page (except in the source code). Meta data is contained within meta tags.


A meta tag is an HTML tag used to include meta data within the header of your web page.


Navigation refers to the system that allows visitors to a website to move around that site. Navigation is most often thought of in terms of menus, but links within pages, breadcrumbs, related links, pagination, and any other links that allow a visitor to move from one page to another are included in navigation.


Nesting refers to putting one HTML element within another element. When this is done, the elements have to be closed in the reverse order from how they were opened.


A non-breaking space (also referred to as  ) is a white-space character that isnít condensed by HTML. Itís primary function is to hold open table cells or add spacing between words (or a the beginning of paragraphs if an indent is desired).


Open source refers to the source code of a computer program being made available to the general public. Open source software includes both web-based and desktop applications. Open source programs are generally free or very low cost and are developed by teams of people, sometimes comprised mostly of volunteers.


A pageview is a request for an entire web page document from a server by a visitorís browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.


Short for ìpermanent link.î Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.


A plug-in is a bit of third party code that extends the capabilities of a website. Itís most often used in conjunction with a CMS or blogging platform. Plug-ins are a way to extend the functionality of a website without having to redo the core coding of the site. Plugins can also refer to bits of third-party software installed within a computer program to increase its functionality.


Progressive enhancement is a strategy for web design that uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

AngularJS Event Handling with Example

creating AngularJS applications, 

your application will need to handle DOM events like 
mouse clicks,
keyboard presses,
change events etc.

AngularJS has a simple model for how to add event listeners to the HTML you generate from your views. This text will explain this model.

<!DOCTYPE html>
<html lang="en">

<title>Angular JS Events Sample Code</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

<body ng-app="myapp">

  <div ng-controller="MyController" >
    <div>In this example, i tried to demonstrate the click event</div>
    <div ng-click="myData.doClick()">Click here</div>

    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
            } );