Learning AngularJS

Adding a Zoom View Field to Images

In this example you will use a custom AngularJS directive to replace the <img> element and provide an automatic zoom view field that is displayed next to the image on the page. When you click on the image, the zoom view field will be updated with a zoomed-in portion of the image.

The purpose of this exercise is to show you how AngularJS custom directives can extend HTML with new elements that have a rich set of features. This example also illustrates another time when you will want to use the full version of jQuery rather than jQuery lite to get the size of the image and position of the mouse within the image.

The folder structure for this example is as follows:

■ ./server.js: Node.js web server that serves ...