web age speaks! webinar series€¦ · introduction to angularjs ©webagesolutions.com 2...
TRANSCRIPT
![Page 1: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/1.jpg)
"Web Age Speaks!" Webinar Series
Introduction to AngularJS
![Page 2: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/2.jpg)
2 ©WebAgeSolutions.com
Introduction
Mikhail Vladimirov Director, Curriculum Architecture
Web Age Solutions Providing a broad spectrum of regular and
customized training classes in programming, system administration and architecture to our clients across the world for over ten years
![Page 3: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/3.jpg)
3 ©WebAgeSolutions.com
Overview of Talk
What is AngularJS
Anatomy of an AngularJS Application
MVC with AngularJS
Modules and Dependency Injection
Filters
HTTP Server Communication
![Page 4: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/4.jpg)
Introduction to AngularJS
What is AngularJS
![Page 5: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/5.jpg)
5 ©WebAgeSolutions.com
AngularJS Defined
AngularJS is an open-source JavaScript framework
Focuses on single-page Rich Client Web applications
Offers client-side Model–View–Controller (MVC) capability
Plumbing is provided in the form of special custom (ng-*) tag attributes
The attributes' values are AngularJS directives for handling page logic
Offers two-way data-binding that allows for the automatic synchronization of the model and view (UI) components
![Page 6: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/6.jpg)
6 ©WebAgeSolutions.com
AngularJS
http://angularjs.org/
![Page 7: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/7.jpg)
7 ©WebAgeSolutions.com
How it all started …
It all started around 2009 at Google
Google Feedback Application with around 17,000 lines of client-side code
Maintenance and enhancements problems
Miško Hevery, software engineer at Google, had a pet project that he suggested to use to re-write Feedback
Which he did in three weeks reducing code base from 17,000 down to 1,500 lines
![Page 8: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/8.jpg)
Introduction to AngularJS
Anatomy of an AngularJS Application
![Page 9: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/9.jpg)
The MVC Structure
9 ©WebAgeSolutions.com
![Page 10: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/10.jpg)
10 ©WebAgeSolutions.com
One-Way (Traditional) Data Binding
Traditional web pages use one-way data binding:
The declarative template expressed in HTML code is merged with the model (data) to form the view
Changes in the model are not automatically propagated and reflected in the view - you need to write JavaScript code to push out the changes
Any changes in the view are also not immediately reflected in the model
All this means that the web page developer has to always write code to keep the view in synch with the model and the model back with the view
![Page 11: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/11.jpg)
11 ©WebAgeSolutions.com
Two-Way Data Binding
Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view
Source: https://docs.angularjs.org/guide/databinding
![Page 12: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/12.jpg)
12 ©WebAgeSolutions.com
Speeding Things Up
AngularJS implements its data binding in JavaScript which has inherent speed limitations as any other interpreted language
Google is working with the TC39 – ECMAScript (JavaScript) technical committee to see if a new low-level structure called Object.observe() can be natively implemented in JavaScript runtimes which will give browsers the ability to track JavaScript object (data model) changes
With the Object.observe() implementation in place, data binding can be performed at native data speeds
![Page 13: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/13.jpg)
13 ©WebAgeSolutions.com
Hello AngularJS
![Page 14: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/14.jpg)
14 ©WebAgeSolutions.com
The Hello AngularJS Code <!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS!</title>
<script src='angular.js'></script>
</head>
<body>
Enter user name: <input type="text" ng-model='name'><br>
Enter user age : <input type="number" ng-model='age'>
<p style='color:blue;'>User {{name}} is {{age}} years old</p>
</body></html>
Notes:
Add <button ng-click="name ='foo'">Foo it ...</button> to
change the displayed name (two-way binding)
You can use ng-bind attribute to bind a model var to UI, e.g.
<p ng-bind="your_model_variable"></p>
![Page 15: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/15.jpg)
15 ©WebAgeSolutions.com
The Main ng-* Directives
ng-app The root element of AngularJS applications that sets the system
boundaries
ng-bind Binds a UI element with the value of a given expression
ng-model Similar to ng-bind, but allows two-way data binding between the
UI and the model
ng-class Allows CSS class attributes to be programmatically manipulated
ng-controller Specifies a JavaScript controller class
ng-repeat An iterator for building UI lists
![Page 16: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/16.jpg)
16 ©WebAgeSolutions.com
Dependency Injection AngularJS uses an injector subsystem for creating
components, resolving and wiring their dependencies, and making them available to consumers
The dependency is simply handed to the consumers when needed
This feature of AngularJS facilitates the testing of web applications in isolation, e.g. from a web server, when they can be provided with some mock-up objects in place of a real system (e.g. in order to avoid making HTTP requests to the web server)
Angular's DI container facilitates assembling web applications from smaller and thoroughly tested components and services
![Page 17: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/17.jpg)
17 ©WebAgeSolutions.com
MVC with AngularJS
![Page 18: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/18.jpg)
18 ©WebAgeSolutions.com
MVC with AngularJS <!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS!</title>
<script src='angular.js'></script>
<script>
function TaxCalculator($scope) {
this.applyTax = function() {
var person = $scope.person.name; var income = $scope.person.income;
taxRate = 0.5;
var tax = income * taxRate;
alert("Grab $ " + tax + " in taxes from poor soul " + person);
}; }
</script></head><body ng-controller='TaxCalculator as txCalc'>
Enter person's name: <input type="text" ng-model='person.name'>
<br> Enter person's income: <input type="number" ng-model='person.income'>
<p style='color: blue;'>The income of [{{person.name}}] is $[{{person.income}}]</p>
<button ng-click='txCalc.applyTax()'>Apply Tax</button>
</body></html>
![Page 19: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/19.jpg)
19 ©WebAgeSolutions.com
Additional Observations
AngularJS uses no CSS classes or IDs
You don't need to write / register any DOM event listeners / callbacks
Controllers are plain JavaScript classes
The $scope framework object is supplied at run-time by way of DI mechanism
![Page 20: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/20.jpg)
20 ©WebAgeSolutions.com
Building Lists with ng-repeat
![Page 21: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/21.jpg)
21 ©WebAgeSolutions.com
Building Lists with ng-repeat
<body ng-controller='TODOController'>
<h2 style="color: white; background-color: blue;">My TODO List</h2>
<p>[ Description ] [ Urgency ]</p>
<div ng-repeat='i in items'>
<input ng-model='i.itemName'>
<input type="number" ng-model='i.itemUrgency' min=1 max=3>
<button ng-click="removeTODOItem($index)">Done !</button>
</div>
<p style='color: blue;'>Items in the list: {{items.length}}</p>
<button ng-click="addTODOItem()">Add a new TODO item</button>
</div>
</body
![Page 22: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/22.jpg)
22 ©WebAgeSolutions.com
Building Lists with ng-repeat
<script>
function TODOController($scope) {
$scope.items = [ {
itemName : 'Create a TODO List',
itemUrgency : 1
} ];
var todoLen = $scope.items.length;
$scope.removeTODOItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.addTODOItem = function() {
$scope.items.splice(todoLen, 0, {
itemName : 'Enter a TODO item',
itemUrgency : 2
});
}
}
</script>
![Page 23: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/23.jpg)
23 ©WebAgeSolutions.com
Modules and Dependency Injection <html ng-app='AssetsModule'>
<head>
<script src="angular.js"></script>
<script>
// Set up the service factory to create our Assets interface
angular.module('AssetsModule', []).factory('Assets', function() {
var assetsList = {};
assetsList.fetchAssets = function() {
// In real apps, we'd pull this data from the server...
return [ { a:1}, {a:2}, {a:3} ];
};
return assetsList;
});
function AssetsController($scope, Assets) {
$scope.assetsList = Assets.fetchAssets();
}
</script></head>
<body ng-controller='AssetsController’>
<ol>
<li ng-repeat="asset in assetsList">{{asset.a}}
</ol>
![Page 24: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/24.jpg)
24 ©WebAgeSolutions.com
Filters Filters help with data formatting for display
The generic syntax: {{ expression | filterName : param1 : ...paramN }}
Supported filters:
currency, date, limitTo, orderBy, lowercase, uppercase, etc...
Examples:
{{1234.988 | currency}}
will be rendered as $1,234.99 (notice the automatic
rounding up)
{{1394124951226 | date: 'MMM-yyyy'}}
will be rendered as Mar-2014
You can build pipes of filters !!
You can access filters in JavaScript using this syntax: $filter('filter_name')(model_variable[, param1, param2,
...])
![Page 25: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/25.jpg)
25 ©WebAgeSolutions.com
HTTP Connector
HTTP server connectivity is supported by the $http service object
It supports a number of convenience methods for
GET
HEAD
POST
DELETE
PUT
JSONP (to request data from a server in a different domain)
![Page 26: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/26.jpg)
26 ©WebAgeSolutions.com
HTTP Connector [
{"name":"stock", "value": 139.80},
{"name":"cash", "value": 234.99},
]
function DataConroller($scope, $http) {
$http.get('/assets').success(function(data, status, headers, config) {
$scope.assets = data;
});
}
<body ng-controller="DataConroller">
<table>
<tr ng-repeat="a in assets">
<td>{{a.name}}</td><td>{{a.value | currency}}</td>
</tr>
</table>
</body>
Connector
Server Data
![Page 27: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/27.jpg)
27 ©WebAgeSolutions.com
AngularJS API Docs
http://docs.angularjs.org/api
![Page 28: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/28.jpg)
28 ©WebAgeSolutions.com
Tools Since AngularJS uses the standard set of web technologies:
HTML and JavaScript, you can continue using your favorite editors, IDEs, browser extensions, etc.
The AngularJS vibrant community has also contributed to public domain a number of useful specialized tools to help develop and test AngularJS applications:
Batarang
A Chrome browser developer tool extension for inspecting AngularJS web applications to see what is happening under the hood
Plunker (http://plnkr.co)
On-line Web page editor useful for quick code prototyping, running short examples and do code sharing. Written in AngularJS.
![Page 29: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/29.jpg)
Introduction to AngularJS
Our Offerings
![Page 30: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/30.jpg)
30 ©WebAgeSolutions.com
Introduction to AngularJS
WA2220 Introduction to AngularJS Programming
![Page 31: Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2 Introduction Mikhail Vladimirov Director, Curriculum Architecture Mikhail.vladimirov@WebAgeSolutions.com](https://reader030.vdocument.in/reader030/viewer/2022041101/5eda8455febf237c0c3b6d8f/html5/thumbnails/31.jpg)
31 ©WebAgeSolutions.com
Summary
In this webinar we:
Reviewed the main AngularJS directives
Looked at how to create AngularJS-driven Rich Internet Applications