1. SE-2840 Dr. Mark L. Hornick1 AngularJS A library for JavaScript

2. What is AngularJS and what problem(s) does it address? First, consider the structure of the web apps you have done so far: Does the code present a clean implementation of the MVC pattern? Where is the View implemented? Where is the Controller implemented? Where is the Model implemented? SE-2840 Dr. Mark L. Hornick2

3. Typical jQuery approach ketchup pickles Add item … $(‘#add’).click(function() { var item = ‘mayo’; // or get from Ajax $(‘ul’).append(‘ ’+item+’ ’); }); SE-2840 Dr. Mark L. Hornick3

4. Low cohesion! Note that the Javascript function “knows” about the View, since it explicitly has to add a element to the This is poor cohesion and tight coupling SE-2840 Dr. Mark L. Hornick4

5. AngularJS approach {{item}} Add item … angular.module(‘app’).controller(‘ListCtrl’, function($scope) { $scope.items = [ ‘ketchup’, ‘pickles’]; $scope.addItem = function() { $scope.items.push(‘mayo’);// or get from db }; }); SE-2840 Dr. Mark L. Hornick5