Friday, January 2, 2015

AngularJS Example

Develop a simple app where web page link is provided as input and it will display screenshots of the web page.

  • AngularJS provides two-way data binding. If data model changes, view is updated i.e, DOM of the webpage will refresh with new data and if new value is entered in field, data model will update.
  • We can divide application into different components and AngularJS Dependency Injection mechanism will inject components into each other.
  • Accessing DOM should be done only in Directives. Directives are AngularJS markers which adds behaviour to DOM element. Directives are added to HTML template to add dynamic behavior.
<div  ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500">

</div>


  • ng-repeat is a directive which instantiates template once per item( variable c) in collection(book.notes Array)
  • If the value of book.notes =['link1.jpg','link2.jpg'] then view will be rendered with two div elements, one for each link in book.notes
  • <input ng-model="book.note" >
    ng-model directive stores/updates value of the input field. note is model field which will be updated based on input field.

HTML Template

Following is the HTML template we will use to display one input box which expects web page url and an add button which add link to image collection.

<div ng-app="notes" ng-controller="notesController as book">

<button ng-click="book.add()">Add</button>

<input min="0" ng-model="book.note" required >

<div ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500">





Controller View Model is defined in Controller file

angular.module('notes',[])

.controller('notesController',function(){

this.notes=[];

this.add=function (){

this.notes.push('http://screenshot.etf1.fr/?url='+this.note);

};


  • Controller is attached to DOM using ng-controller.
  • All properties and methods defined inside controller are available  in DOM where controller is attached. Properties are called view model and methods are called behaviour.
  • notes is a model and add is behaviour which is available in DOM where ng-controller="notesController" is added.

When Add button is clicked the notes model is updated and view is updated accordingly  because ng-repeat is based on notes model.

Complete HTML code and controller.js code

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Example</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

<script src="controller.js"></script>

</head>

<body >

<div ng-app="notes" ng-controller="notesController as book">

<button ng-click="book.add()">Add</button>

<input min="0" ng-model="book.note" required >



<div class="col-xs-3" ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500"> </img>

</div>

</body>

</html>





Controller.js


angular.module('notes',[])

.controller('notesController',function(){

this.notes=[];

this.add=function (){

this.notes.push('http://screenshot.etf1.fr/?url='+this.note);

};

})

No comments:

Post a Comment