Post on 31-May-2020
"Web Age Speaks!" Webinar Series
Introduction to AngularJS
2 ©WebAgeSolutions.com
Introduction
Mikhail Vladimirov Director, Curriculum Architecture
Mikhail.vladimirov@WebAgeSolutions.com
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
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
Introduction to AngularJS
What is AngularJS
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
6 ©WebAgeSolutions.com
AngularJS
http://angularjs.org/
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
Introduction to AngularJS
Anatomy of an AngularJS Application
The MVC Structure
9 ©WebAgeSolutions.com
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
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
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
13 ©WebAgeSolutions.com
Hello AngularJS
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>
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
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
17 ©WebAgeSolutions.com
MVC with AngularJS
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>
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
20 ©WebAgeSolutions.com
Building Lists with ng-repeat
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
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>
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>
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,
...])
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)
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
27 ©WebAgeSolutions.com
AngularJS API Docs
http://docs.angularjs.org/api
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.
Introduction to AngularJS
Our Offerings
30 ©WebAgeSolutions.com
Introduction to AngularJS
WA2220 Introduction to AngularJS Programming
31 ©WebAgeSolutions.com
Summary
In this webinar we:
Reviewed the main AngularJS directives
Looked at how to create AngularJS-driven Rich Internet Applications