CS计算机代考程序代写 javascript database compiler Java file system flex angularjs js c# jquery AWS JavaScript Frameworks

JavaScript Frameworks

Outline

• Node.js
• Angular

2© Marco Papa 2017-2021

Node.js

1. Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
2. Node.js uses an event-driven, non-blocking I/O model that makes it

lightweight and efficient.
3. Node.js allows the creation of Web servers and networking tools using

JavaScript and a collection of “modules” that handle various core
functionality.

4. Modules handle file system I/O, networking (DNS, HTTP, TCP, TLS/SSL, or
UDP), binary data (buffers), cryptography functions, data streams and other
core functions.

3© Marco Papa 2017-2021

Basic functionality

HTTP
• To use the HTTP server and client one must require(‘http’).
• The HTTP interfaces in Node.js are designed to support many features of the protocol which have been

traditionally difficult to use. In particular, large, possibly chunk-encoded, messages. The interface is
careful to never buffer entire requests or responses–the user is able to stream data.

http.createServer([requestListener])
• Returns a new instance of http.Server.
• The requestListener is a function which is automatically added to the ‘request’ event.
http.request(options[, callback])
• Node.js maintains several connections per server to make HTTP requests. This function allows one to

transparently issue requests.
• options can be an object or a string. If options is a string, it is automatically parsed with url.parse().
http.get(options[, callback])
• Since most requests are GET requests without bodies, Node.js provides this convenience method. The

only difference between this method and http.request() is that it sets the method to GET and calls
req.end() automatically.

4© Marco Papa 2017-2021

Basic functionality

File System
• File I/O is provided by simple wrappers around standard POSIX functions. To use this module do

require(‘fs’). All the methods have asynchronous and synchronous forms..

fs.readFile(file[, options], callback)
• Asynchronously reads the entire contents of a file.
• The callback is passed two arguments (err, data), where data is the contents of the file.
• If no encoding is specified, then the raw buffer is returned.

fs.readFileSync(file[, options])
• Synchronous version of fs.readFile. Returns the contents of the file.
• If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.
.

5© Marco Papa 2017-2021

Basic functionality

Buffer
• Prior to the introduction of TypedArray in ECMAScript 2015 (ES6), the JavaScript language had no

mechanism for reading or manipulating streams of binary data. The Buffer class was introduced as part
of the Node.js API to make it possible to interact with octet streams in the context of things like TCP
streams and file system operations.

• The Buffer class is a global within Node.js, making it unlikely that one would need to ever use
require(‘buffer’).

Buffers and Character Encodings
• Buffers are commonly used to represent sequences of encoded characters such as UTF8, UCS2, Base64

or even Hex-encoded data. It is possible to convert back and forth between Buffers and ordinary
JavaScript string objects by using an explicit encoding method.

6© Marco Papa 2017-2021

Example usage – Buffer Class

buffer.js:

const { Buffer } = require(‘buffer’);
const buf = Buffer.from(‘hello world’, ‘utf8’);

console.log(buf.toString(‘hex’));
// Prints: 68656c6c6f20776f726c64
console.log(buf.toString(‘base64’));
// Prints: aGVsbG8gd29ybGQ=

console.log(Buffer.from(‘fhqwhgads’, ‘utf8’));
// Prints:
console.log(Buffer.from(‘fhqwhgads’, ‘utf16le’));

// Prints:

7© Marco Papa 2017-2021

Example usage – ‘fs’Read File

fs-readFile.js:
var fs = require(‘fs’);
fs.readFile(‘./intro.txt’, ‘utf-8’, function (err, data) {

if (err) throw err;
console.log(data);

});

intro.txt:
JsApp.US is a hosting platform for node.js applications.

It is setup to be a platform to coddle to quick, weekend hack like projects.

Run command (may have to add ‘sudo’):
$ nodejs fs-readFile.js

8© Marco Papa 2017-2021

Example usage – ‘http’ Run Web Server

server.js:
const http = require(‘http’);
http.createServer(function (req, res) {

res.writeHead(200, { ‘Content-Type’: ‘text/plain’ });
res.end(‘Hello World CSCI571!\n’);

}).listen(9090, ‘127.0.0.1’, function () {
console.log(`Server running at http://localhost:9090/`);});

Run command:
$ sudo node server.js

9© Marco Papa 2017-2021

Node.js Modules

• npm: package manager for JavaScript.
The npm command-line tool is bundled with Node.js. If
you have it installed, then you already have npm too. (see
https://www.npmjs.com)

• nodemon: monitor script for use during development of a
Node.js app. Will watch files in the directory in which
nodemon was started. If any files change, it will restart
your node app. (see https://nodemon.io)

• jshint: a static analysis tool to detect errors and potential
problems in JavaScript code and to enforce your team’s
coding conventions. (see http://jshint.com)

10© Marco Papa 2017-2021

https://www.npmjs.com/
https://nodemon.io/
http://jshint.com/

Node.js Modules (cont’d)

• express: a fast, minimalist web framework. It provides small,
robust tooling for HTTP servers, making it a great solution for
single page applications, web sites, hybrids, or public HTTP
APIs. (see https://expressjs.com)

• cors: a Node.js package for providing a Connect/Express
middleware that can be used to enable CORS with various
options. (see https://github.com/expressjs/cors)

• body-parser: body-parser extracts the entire body portion of an
incoming request stream and exposes it on req.body as
something easier to interface with. (see
https://github.com/expressjs/body-parser)

• request: simplified HTTP request client. Supports HTTPS.
(seehttps://www.npmjs.com/package/request) Deprecated

11© Marco Papa 2017-2021

https://expressjs.com/
https://github.com/expressjs/cors
https://github.com/expressjs/body-parser

Node.js Modules (cont’d)

• xml2js: a simple XML to JavaScript object converter. (see
https://www.npmjs.com/package/xml2js)

• async: a utility module which provides straight-forward, powerful
functions for working with asynchronous JavaScript. (see
https://caolan.github.io/async/)

• q: a library for promises. A promise is an object that represents the
return value or the thrown exception that the function may eventually
provide. (see https://github.com/kriskowal/q)

• underscore: a JavaScript library that provides a whole set of useful
functional programming helpers without extending any built-in
objects. (see http://underscorejs.org)

• socket.io: a Node.js real-time framework server. It enables real-time
bidirectional event-based communication. (see https://socket.io/docs/)

• minimist: a module used to parse command line arguments. (see
https://www.npmjs.com/package/minimistx)

12© Marco Papa 2017-2021

https://www.npmjs.com/package/xml2js
https://caolan.github.io/async/
https://github.com/kriskowal/q
http://underscorejs.org/
https://socket.io/docs/
https://www.npmjs.com/package/minimist

Node.js Modules (cont’d)

• mocha: a simple, flexible, fun JavaScript test framework for
Node.js and the browser. (see https://mochajs.org)

• http-server: a simple, zero-configuration command-line http
server. Powerful enough for production usage, but it’s simple
and hackable enough to be used for testing, local development,
and learning. (see https://github.com/indexzero/http-server)

• mongodb: the official MongoDB driver for Node.js. It provides
a high-level API on top of mongodb-core that is meant for end
users. (see https://github.com/mongodb/node-mongodb-native)

• mongoose: a MongoDB object modeling tool designed to work
in an asynchronous environment. (see http://mongoosejs.com)

13© Marco Papa 2017-2021

https://mochajs.org/
https://github.com/indexzero/http-server
https://github.com/mongodb/node-mongodb-native
http://mongoosejs.com/

Node.js Modules (cont’d)

• node-fetch: a light-weight module that brings window.fetch to
Node.js. Server version of client-side window.fetch compatible API
(see https://www.npmjs.com/package/node-fetch)

• axios: a promise-based HTTP client for the browser and node.js. Make
XMLHttpRequests from the browser. Make http requests from node.js.
Supports the Promise API. (see
https://www.npmjs.com/package/axios)

• Hapi: a powerful and robust framework that is used for developing
APIs. It was first introduced by Eran Hammer 2011 at Walmart while
trying to handle the traffic on black Friday.. (see https://hapi.dev/)

• passport: a unique authentication module for Node.js devs. Hundreds
of authentication methods to choose from, starting from internal ones,
all the way up to external ones like Google, Facebook, and others. (see
https://github.com/jaredhanson/passport)

14© Marco Papa 2017-2021

https://www.npmjs.com/package/node-fetch
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
http://nodejs.org/api/http.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://www.npmjs.com/package/axios
https://hapi.dev/
https://github.com/jaredhanson/passport

express Module Example

var express = require(‘express’);
var app = express();

//respond with “hello world” when a GET request is made
to the homepage

app.get(‘/’, function (req, res) {
res.send(‘Hello World’)

});

//server listening on port 3000

app.listen(3000);

15© Marco Papa 2017-2021

cors Module Example

var express = require(‘express’);
var cors = require(‘cors’);
var app = express();

app.use(cors());

app.get(‘/products/:id’, function (req, res, next) {
res.json({msg: ‘This is CORS-

enabled for all origins!’})
});

app.listen(80, function () {
console.log(‘CORS-

enabled web server listening on port 80’)
});

16© Marco Papa 2017-2021

xml2js Module Example

var parseString = require(‘xml2js’).parseString;
var xml = “Hello xml2js!”;

//”result” is the result of parsing xml

parseString(xml, function (err, result) {

console.dir(result);
});

17© Marco Papa 2017-2021

Node.js on AWS

• Create Ubuntu Micro EC32 instance
• ssh to the AWS ubuntu server
• Download node.js using ‘wget’
• Execute the binaries, make, and install:
./configure && make && sudo make install

• Alternatively, use AWS Elastic Beanstalk and select the Node.js Preconfigured
Platform when creating Environment

• Node.js 14 running on 64bit Amazon Linux 2, Platform version 5.4.1
• nginx Proxy server
• Supports static file mappings and gzip compression
• See Homework #7 slides
• See also: https://aws.amazon.com/getting-started/hands-on/deploy-nodejs-web-app/

18© Marco Papa 2017-2021

Node.js on AWS (cont’d)

• AWS SDK for JavaScript in Node.js
• Provides JavaScript objects for AWS services including Amazon S3, Amazon

EC2, DynamoDB, Amazon Elastic Beanstalk and many more.
• Single, downloadable package includes the AWS JavaScript Library and

documentation
• See: https://aws.amazon.com/sdk-for-node-js/

19© Marco Papa 2017-2021

Node.js on Google Cloud

• Node.js app deployed using Google App Engine Managed VMs
• Scales to serve millions of requests
• Supports structures and binary data, authentication, logging, events
• See: https://cloud.google.com/nodejs
• See Homework Assignment #7 slides

20© Marco Papa 2017-2021

Node.js on macOS and Windows

• Download macOS (64bit) and Windows package at https://nodejs.org/en/
• Learn Node.js on you local MacBook or Windows PC
• Latest versions are 16.13.0 Long Term Support (LTS) and 17.0.1 Current

21© Marco Papa 2017-2021

Related URLs

• Node.js website: https://nodejs.org/
• Node.js on Github: https://github.com/nodejs/node
• NPM: https://www.npmjs.com/
• Learn Node.js in terminal: https://github.com/workshopper/learnyounode
• Tools: http://gruntjs.com/

22© Marco Papa 2017-2021

https://nodejs.org/
https://github.com/nodejs/node
https://www.npmjs.com/
https://github.com/workshopper/learnyounode
http://gruntjs.com/

Introduction

• AngularJS is a complete JavaScript-based open-source front-end web application
framework.

• Its mainly maintained by Google and some community of individuals.
• It provides a framework for client-side model–view–controller (MVC) and model–

view–viewmodel (MVVM) architectures.
• AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database,

Express.js web application server framework, Angular.js itself, and Node.js runtime
environment.

23© Marco Papa 2017-2021

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
https://en.wikipedia.org/wiki/Model_View_ViewModel

Angular.js

Why AngularJS?
• HTML is great for declaring static documents, but it falters when we try to use it for

declaring dynamic views in web-applications. AngularJS lets you extend HTML
vocabulary for your application. The resulting environment is extraordinarily
expressive, readable, and quick to develop.

Alternatives
• 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.

Extensibility
• AngularJS is a toolset for building the framework most suited to your application

development. It is fully extensible and works well with other libraries. Every feature can
be modified or replaced to suit your unique development workflow and feature needs.
Read on to find out how.

24© Marco Papa 2017-2021

Basic functionality

Control of the app

Data Binding
• Data-binding is an automatic way of updating the view whenever the model changes,

as well as updating the model whenever the view changes. This is awesome because it
eliminates DOM manipulation from the list of things you have to worry about.

Controller
• Controllers are the behavior behind the DOM elements. AngularJS lets you express the

behavior in a clean readable form without the usual boilerplate of updating the DOM,
registering callbacks or watching model changes.

Plain JavaScript
• Unlike other frameworks, there is no need to inherit from proprietary types in order to

wrap the model in accessors methods. Angular models are plain old JavaScript objects.
This makes your code easy to test, maintain, reuse, and again free from boilerplate.

25© Marco Papa 2017-2021

Basic functionality (cont’d)

Wire up a Backend

Deep Linking
• A deep link reflects where the user is in the app, this is useful so users can bookmark

and email links to locations within apps. Round trip apps get this automatically, but
AJAX apps by their nature do not. AngularJS combines the benefits of deep link with
desktop app-like behavior.

Form Validation
• Client-side form validation is an important part of great user experience. AngularJS

lets you declare the validation rules of the form without having to write JavaScript code.
Write less code, go have beer sooner.

Server Communication
• AngularJS provides built-in services on top of XHR (XMLHttpRequest) as well as

various other backends using third party libraries. Promises further simplify your code
by handling asynchronous return of data. (Alternative to jQuery’s AJAX)

26© Marco Papa 2017-2021

Basic functionality (cont’d)

Create Components

Directives
• Directives is a unique and powerful feature available only in Angular. Directives let you

invent new HTML syntax, specific to your application.
Reusable Components
• We use directives to create reusable components. A component allows you to hide

complex DOM structure, CSS, and behavior. This lets you focus either on what the
application does or how the application looks separately.

Localization
• An important part of serious apps is localization. Angular’s locale aware filters and

stemming directives give you building blocks to make your application available in all
locales.

27© Marco Papa 2017-2021

Companies that Use Angular JS

There are approximately 12,000 other sites out of 1 million tested in May 2017 that use Angular JS

React and Angular on Google Trends:
https://trends.google.com/trends/explore?date=
today%205-y&q=%2Fm%2F012l1vxv,Angular

28© Marco Papa 2017-2021

Goals

AngularJS de-emphasizes explicit DOM manipulation with the goal of improving testability
and performance.

• Design goals are
– It decouples DOM manipulation from application logic
– It decouple the client side of an application from the server side.
– It provides structure for building an application

• Designing the UI
• Writing the business logic
• Testing

29© Marco Papa 2017-2021

Goals (cont’d)

• Angular JS framework adapts and extends traditional HTML.
• It supports dynamic content through two-way data-binding.
• Two-way data-binding allows for the automatic synchronization of models and views.
• The tasks in angular bootstrapper occur in 3 phases

– Creation of a new Injector
– Compilation of the directives that decorate the DOM
– Linking of all directives to scope

30© Marco Papa 2017-2021

Data Binding
Classical Angular

Any changes that the user makes to
the view are not reflected in the
model

The view is just a projection of
the model. So there is automatic
refresh of the data between view
and model

31© Marco Papa 2017-2021

AngularJS Directives

• AngularJS directives allows to specify custom reusable HTML-like elements and
attributes.

• Some of the Angular Directives are
– ng-app
– ng-controller
– ng-bind
– ng-model
– ng-class
– ng-repeat

32© Marco Papa 2017-2021

AngularJS Directives (Cont’d)

• ng-app
– Declares the root element of an AngularJS application.

• ng-controller
– Specifies a JavaScript controller class that evaluates HTML expressions.

• ng-bind
– Sets the text of a DOM element to the value of an expression.

• ng-model
– Similar to ng-bind, but establishes a two-way data binding between the view and

the scope.
• ng-repeat

– Instantiate an element once per item from a collection.

33© Marco Papa 2017-2021

Code Snippet – AngularJS Instantiation

• An AngularJS module defines an application.
• The module is a container for controllers
• Controllers always belong to a module.

34© Marco Papa 2017-2021

AngularJS Data Binding – Example

A simple example which shows how AngularJS process two-way
data binding using ng-model.

http://csci571.com/examples/Angular/binding/index.html

35© Marco Papa 2017-2021

http://csci571.com/examples/Angular/binding/index.html

AngularJS Repeat with data from static
array

ng-repeat works like a for loop and replicates
the template to the number of rows in the model

http://csci571.com/examples/Angular/populating_data/index.html

36© Marco Papa 2017-2021

http://csci571.com/examples/Angular/populating_data/index.html

AngularJS Repeat from http request

$http holds the xml http request handler in Angular.

http://csci571.com/examples/Angular/populating_data/index.html

37© Marco Papa 2017-2021

http://csci571.com/examples/Angular/populating_data/index.html

AngularJS Sort and Search

orderBy: sort the Column ascending
orderBy::
– the column you want to sort
– true-descending, false-ascending

Filter: search the rows in the model
Filter: e.x. filter: search
Or
Filter: e.x.
filter:{:search}

http://csci571.com/examples/Angular/sort_and_search/index.html
38© Marco Papa 2017-2021

http://csci571.com/examples/Angular/sort_and_search/index.html

AngularJS External UI Components

External components need to be added to the
angular application.
angular.module(‘myapp’,
[])

http://csci571.com/examples/Angular/external_plugins/index.html
39© Marco Papa 2017-2021

http://csci571.com/examples/Angular/external_plugins/index.html

AngularJS Remove and Insert DOM
Element

Using ng-if to insert/remove the dom.

http://csci571.com/examples/Angular/manipulate_dom/index.html
40© Marco Papa 2017-2021

http://csci571.com/examples/Angular/manipulate_dom/index.html

About Angular 2+

• AngularJS is the name for all AngularJS version 1.x.
• Angular 2+ stands for the Angular 2 and later, including Angular

2,4,5,6,7 and 8.
• Angular 2+ is a ground-up rewrite.
• AngularJS 1.7 was released on July 1, 2018, and it enters a 3 years

long-term support. It is “retired” now.
• There are few upgrade possibilities of AngularJS to Angular 2+ and in

most cases the only suitable possible option is to rewrite the
application in Angular 2+.

• Starting with Angular 2, a major release is published every 6 months.
There are some improvements between each version.

• The “current” Angular version is Angular 12 and was released in May
2021. https://angular.io/guide/releases

• The “stable” release is Angular version 12.

41© Marco Papa 2017-2021

https://angular.io/guide/releases

Differences between versions
AngularJS Angular 2+

Architecture Based on MVC Based on service/component

Javascript vs
TypeScript

Uses JavaScript Uses TypeScript (a superset of JavaScript )
and RxJS (A reactive programming library
for JavaScript).

Component-based
UI

Can split application features into various
components and call required UI, which
increases reusability and flexibility

Mobile Support Native Script or Ionic

SEO (Search
Engine
Optimization)
Friendly

Difficult to develop
search engine friendly
Single Page
Applications

Possible to build Single Page Applications
SEO friendly by rendering plain HTML at
the server side. It released Angular
Universal.

42© Marco Papa 2017-2021

Features of Angular 4
• Smaller and Faster
• View engine with less code

– The view engine is introduced in Angular 4 where the produced code of
components can be reduced up to 60%. The bundles are reduced to thousands
of KBs.

• Improved *ngIf directive
– A new “else” statement is added

• Animation
– Animations are pulled from the Angular core and set in their own package

• TypeScript 2.1 and 2.2 Compatibility
• Source Maps for Templates

– Now whenever there’s an error caused by something in one of the templates,
source maps are created which provide a meaningful context concerning the
original template.

43© Marco Papa 2017-2021

Features of Angular 6
• ng update

– Using ng update to update your Angular app from Angular 2, 4 or 5.
• ng add

– Using ng add to add new dependencies and invoke an installation script.
• Angular Material + CDK Components
• CLI Workspaces

– CLI projects will now use angular.json for build and project configuration.
• Animations Performance Improvements
• RxJS v6

Features of Angular 7
• Application Performance

– Optimize polyfills.ts
• Angular Material & the CDK

– Virtual Scrolling
– Drag and Drop

• Partner Launches
– NativeScript : A single project that builds for both web and installed mobile

with NativeScript
– StackBlitz 2.0 supports multipane editing and the Angular Language Service

• Dependency Updates
– Typescript 3.1
– RxJS 6.3
– Node 10

Features of Angular 8
• Requires TypeScript 3.4

– Required. You will need to upgrade.
• Ivy support

– New compiler / runtime for Angular
• Bazel support

– Build tool developed and built by Google.
– Build back-end and front-end with same tool

• Router
– Lazy-loading with import() syntax

• Location
– Location services to help migrating from AngularJS

Features of Angular 9
• Requires TypeScript 3.7

– You will need to upgrade.
• Ivy support

– Angular compiles by Ivy by default
• APIs

– Lots on new removed and deprecated APIs
• Migration

– CLI handles many migrations automatically

Features of Angular 10
• Requires TypeScript 3.9

– You will need to upgrade.
• Deprecations

– @angular/core (may be removed in v12)
– IE 9, 10 and IE Mobile (removed in v11)

• Ivy
– Heavily promoted as default rendering engine
– See: https://angular.io/guide/ivy

• Migration
– Automated migration from version 9

Features of Angular 12
• Requires TypeScript 4.2.3 to 4.2.x

– You will need to upgrade.
• Angular CDK and Angular Material

– Use the new SASS module system
• Angular Tooling

– Uses Webpack 5 to build applications
• See

– https://angular.io/guide/updating-to-version-12

RxJS

• Reactive programming is an asynchronous programming paradigm concerned

with data streams and the propagation of change (Wikipedia)

• RxJS is a library for reactive programming. (RxJS Docs)

• Angular2+ use RxJS for asynchronous operation. (Angular RxJS)

• RxJS uses Observables for asynchronous or callback-based code.

– Converting existing code for async operations into observables
– Iterating through the values in a stream
– Mapping values to different types
– Filtering streams
– Composing multiple streams

• See example “Repeat from http request”

https://rxjs-dev.firebaseapp.com/
https://angular.io/guide/rx-library
https://angular.io/guide/observables

Angular 2+ Data Binding Component
Example

form.component.html

form.component.ts
http://csci571.com/examples/Angular/binding_angular2_and_4/index.html

http://csci571.com/examples/Angular/binding_angular2_and_4/index.html

Angular 2+ Repeat with data from static array

http://csci571.com/examples/Angular/populating_data_static_angular_2_and_4/index.html
staff.component.ts

staff.component.html

http://csci571.com/examples/Angular/populating_data_static_angular_2_and_4/index.html

Angular 2+ Repeat from http request

http://csci571.com/examples/Angular/populating_data_external_angular_2_and_4/index.html

Using observable subscription to handle
asynchronized http request

http://csci571.com/examples/Angular/populating_data_external_angular_2_and_4/index.html

Angular 2+ External UI Components

(sorry example broken)

http://csci571.com/examples/Angular/external_plugins_angular_2_and_4/index.html

Angular 2+ Remove and Insert DOM Element

http://csci571.com/examples/Angular/manipulate_dom_angular_2_and_4/index.html

Angular 2+ Sort and Search

• Angular 2+ doesn’t support FilterPipe or OrderByPipe
mainly because they are expensive operations and they
have often been abused in AngularJS apps.

• To learn more about why FilterPipe and OrderByPipe are
not supported and what the alternatives are, see this page:

https://angular.io/guide/pipes#appendix-no-filterpipe-or-
orderbypipe.

Angular Bootstrap : ng-bootstrap

• “Angularized” Bootstrap widgets
• Built such a way that the only external dependency is the

Bootstrap CSS
• Hence, no external JS is needed to run ng-bootstrap
• See: https://ng-bootstrap.github.io/#/home

// installation for Angular CLI (recommended)

ng-bootstrap Dependencies

The only two required dependencies are Angular and Bootstrap
CSS. The supported versions are:

ng-bootstrap Example : Nav

https://stackblitz.com/run?file=app/nav-basic.ts

ng-bootstrap Example : Progress Bar

ng-bootstrap Example : Table

ng-bootstrap Components

TypeScript
• Open-source programming language developed and

maintained by Microsoft
• Syntactical superset of JavaScript
• Developed by Anders Hejlsberg, C# Architect and creator

of Turbo Pascal
• First made public in October 2012 (version 0.8)
• Built-in support for TypeScript in Visual Studio 2013+
• Current version is TypeScript 4.3
• TypeScript program can seamlessly consume JavaScript
• TypeScript compiler written in TypeScript
• See: http://www.typescriptlang.org/

TypeScript Features

• Extensions to ECMAScript 5th Ed.
– Type annotations and compile-time type checking
– Type inference
– Type erasure
– Interfaces
– Enumerated type
– Mixin
– Generic
– Namespaces
– Tuple
– Await

• Backported features from ECMAScript 2015
– Classes
– Modules
– Arrow syntax for anonymous functions
– Optional and default parameters

TypeScript and Angular

• Angular IDE, optimized for Angular 2+
• Commercial product from Webclipse

https://www.genuitec.com/products/angular-ide/
• TypeScript 3.x validation and debugging
• Angular HTML Template Intelligence

– Validation
– Detection of misdefined element tags
– HTML elements auto-complete
– TypeScript expressions auto-complete

• Angular-CLI Integration
• Angular Source Navigation
• TypeScript Debugging
• Live Preview
• Free Trial (for 45 days) download for 64-bit versions of Windows, macOS

and Linux at: https://www.genuitec.com/products/angular-ide/download/

Example usage & Related URLs
Examples
• Hello World: https://angularjs.org/#the-basics
• Todo List: https://angularjs.org/#add-some-control
• Advanced Single Page App: https://angularjs.org/#wire-up-a-backend

Related URLs
• Angular.js website: https://angularjs.org
• Angular.js on Github: https://github.com/angular/angular.js
• Tutorial: https://docs.angularjs.org/tutorial
• Angular.js Course

http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/creating-a-store-module
• Angular 2+: https://angular.io/
• Angular 2+ docs: https://angular.io/docs
• Angular 2+ IDEs, Tools, Libraries, UI Components: https://angular.io/resources
Angular Examples URLs
• Best Examples of Websites and Applications built with Angular: https://clockwise.software/blog/best-angular-

applications/
• Tour of Heroes App : https://stackblitz.com/edit/angular-tour-of-heroes-example
• Ng For Example : https://stackblitz.com/edit/angular-10-ngfor-example
• Angular Forms and Property Binding : https://stackblitz.com/edit/angular-disable-form-field-on-select-value
• Angular Pipes : https://stackblitz.com/edit/angular-simple-examples

https://angularjs.org/
https://angularjs.org/
https://angularjs.org/
https://angularjs.org/
https://github.com/angular/angular.js
https://docs.angularjs.org/tutorial
http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/creating-a-store-module
https://angular.io/
https://angular.io/docs
https://angular.io/resources
https://clockwise.software/blog/best-angular-applications/

Related Posts