Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2...

"Web Age Speaks!" Webinar Series

Introduction to AngularJS

2 ©WebAgeSolutions.com

Introduction

Mikhail Vladimirov Director, Curriculum Architecture

[email protected]

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


Overview of Talk

What is AngularJS

Anatomy of an AngularJS Application

MVC with AngularJS

Modules and Dependency Injection

Filters

HTTP Server Communication


What is AngularJS


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


AngularJS

http://angularjs.org/


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


Anatomy of an AngularJS Application

The MVC Structure



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


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


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


Hello AngularJS


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>


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


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


MVC with AngularJS


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>


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


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


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>


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,

...])


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)


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


AngularJS API Docs

http://docs.angularjs.org/api


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.


Our Offerings



WA2220 Introduction to AngularJS Programming

http://www.webagesolutions.com/webapp/wcs/stores/servlet/Product_10001_10051_11510_-1_11502_main_



http://www.webagesolutions.com/courses/WA2220-introduction-to-angularjs-programming



Summary

In this webinar we:

Reviewed the main AngularJS directives

Looked at how to create AngularJS-driven Rich Internet Applications

Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2...

Documents

Transcript of Web Age Speaks! Webinar Series€¦ · Introduction to AngularJS ©WebAgeSolutions.com 2...