![Page 1: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/1.jpg)
AngularJS
![Page 2: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/2.jpg)
What is AngularJS
à Javascript Framework à MVC à for Rich Web Application
Development à by Google
![Page 3: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/3.jpg)
Why AngularJS
“Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”.
● Lightweight ( < 36KB compressed and minified) ● Free ● Separation of concern ● Modularity ● Extensibility & Maintainability ● Reusable Components
![Page 4: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/4.jpg)
● Allows for DOM Manipulation ● Does not provide structure to your code ● Does not allow for two way binding
What we used previously.
![Page 5: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/5.jpg)
What we used previously.
![Page 6: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/6.jpg)
<p>Select value: {{ theValue }}</p> <select ng-model="theValue"> <option value="1">1</option> <option value="2">2</option> </select>
<p>Select value: <span id="theValue"></span></p> <select id="theSelect"> <option value="1">1</option> <option value="2">2</option> </select> $(function() { $('#theSelect').on('change', function() { var value = $(this).val(); $('#theValue').text(value); } });
![Page 7: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/7.jpg)
Some Features
à Two-way Data Binding – Model as single source of truth à Directives – Extend HTML à MVC à Dependency Injection à Testing à Deep Linking (Map URL to route Definition) à Server-Side Communication
![Page 8: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/8.jpg)
Simple Example
<html ng-app> <head> <script src='angular.min.js'></script> </head> <body> <input ng-model='user.name'> <div ng-show='user.name'>Hi {{user.name}}</div> </body> </html>
![Page 9: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/9.jpg)
MVC
Model (Data)
Controller (Logic)
View (UI) Change Notifies
Event Notification Changes
![Page 10: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/10.jpg)
MVC
Controller
Model
View
JS Classes
DOM
JS Objects
![Page 11: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/11.jpg)
Bootstrapping
![Page 12: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/12.jpg)
Expressions
AngularJS binds data to HTML using Expressions.
<div> <p>My first expression: {{ 5 + 5 }}</p> </div> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third item is <span ng-bind="points[2]"></span></p> </div>
![Page 13: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/13.jpg)
Directives
https://docs.angularjs.org/api/ng/directive
AngularJS lets you extend HTML with new attributes called Directives.
<div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p ng-bind="firstName"></p> </div>
![Page 14: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/14.jpg)
Directives
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat=”x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
![Page 15: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/15.jpg)
Controllers
AngularJS controllers control the data of AngularJS applications.
<div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>
![Page 16: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/16.jpg)
Filters
Filter Description currency Format a number to a currency format. filter Select a subset of items from an array. lowercase Format a string to lower case. orderBy Orders an array by an expression. uppercase Format a string to upper case.
Filter is used to do some transformation of the scoped Data. Filter is applied using the symbol | (pipe).
<div ng-app="myApp" ng-controller="costCtrl"> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>Total = {{ (quantity * price) | currency }}</p> </div>
![Page 17: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/17.jpg)
Server Interaction
$http is an AngularJS service for reading data from remote servers.
{ "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", "Country" : "Mexico" } ]}
![Page 18: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/18.jpg)
Server Interaction
$http is an AngularJS service for reading data from remote servers.
<div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }); </script>
![Page 19: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/19.jpg)
Modules
A module is a container for the different parts of an application. All application controllers should belong to a module.
<body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body>
![Page 20: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/20.jpg)
$Scope “Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.” - From Angular website
à {{firstName + " " + lastName}} is an expression executed within scope
à Scope can be hierarchal with DOM nesting of directives
à Watches can be used to watch for changes to scope ex: $scope.$watch("firstName", function(value) {
//update the DOM with the new value });
![Page 21: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/21.jpg)
$scope .emit/.on $rootScope = { }
Index Controller $scope = { people: [{},{},{}] }
DIRECTIVE (RENDERING HTML!) ng-repeat="person in people" John Culviner Jane Doe, John Doe
Person Controller $scope: { person: { firstName: "John", lastName: "Culviner } updatePerson: function() { //save a person } }
Hey John changed! Refresh!
� Scopes can "message" parent/child scopes � $scope.$emit(…)
Message upward � $scope.$broadcast(…)
Message downward � Here:
� When a person changes � Notify the "Index" controller to
refresh it's list (which has now changed)
![Page 22: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/22.jpg)
Putting it on Together
Contents taken from https://docs.angularjs.org/tutorial/step_04
![Page 23: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/23.jpg)
Two way data Binding
![Page 24: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/24.jpg)
$ngRoutes
“Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature, we can implement deep linking, which lets us utilize the browser's history (back and forward navigation) and bookmarks.” - Angularjs.org var phonecatApp = angular.module(’phonecatApp', [ 'ngRoute', ’OtherDepedencies' ]);
![Page 25: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/25.jpg)
$ngRoutes
phonecatApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/phones' }); }]);
![Page 26: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/26.jpg)
$ngRoutes
…. <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"> <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a> <a href="#/phones/{{phone.id}}">{{phone.name}}</a> <p>{{phone.snippet}}</p> </li> </ul> …. Full example can be found in https://docs.angularjs.org/tutorial/step_07
![Page 27: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/27.jpg)
Single Page application
http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
![Page 28: AngularJS - Department of Computer Science, …mashiyat/csc309/Lectures/AngularJS.pdf Hi](https://reader031.vdocuments.mx/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca7c/html5/thumbnails/28.jpg)
Single Page application