Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular 2 for Java
Developers
Yakov Fain, Farata Systems
March 10, 2016
Angular 2
• Complete re-write of AngularJS
• Component-based
• Better performance
• No controllers, scopes
• Streamlined D...
An app is a tree of components
HTML
A TypeScript class
HTML
Importing
modules
Class annotations
Project Structure
Config files
App dependencies
App code
{
Project Structure
SystemJS
transpiles
TS and
loads JS
bootstrap(ApplicationComponent)
Project Structure
bootstrap(ApplicationComponent)
Navigation with Router
import {Component} from 'angular2/core';

import {Product, ProductService} from 'app/services/product-service';
import Car...
Dependency
Injection
HomeComponent
import {Component} from 'angular2/core';

import {Product, ProductService} from 'app/se...
import {Component} from 'angular2/core';

import {Product, ProductService} from 'app/services/product-service';
import Car...
A Sample Toolbox
Intro to TypeScript
http://www.typescriptlang.org
What’s TypeScript?
• An open-source language developed by Microsoft
• Designed by Anders Hejlsberg, the creator of C#, Del...
Benefits of Writing in TypeScript
• Increases your productivity in producing JavaScript
• Supports types, classes, interfac...
Transpiling TypeScript Interactively

http://www.typescriptlang.org/Playground
TypeScript JavaScript (E5)
Classes
TypeScript JavaScript (E5)
A Class With Constructor
TypeScript JavaScript (E5)
Inheritance
Classical syntax Prototypal
Generics
Error
No Errors
Arrow Function Expressions (lambdas)
var getName = () => 'John Smith';
console.log(`The name is ` + getName());
Interfaces as Custom Types
Interfaces and implements
TypeScript Compiler: tsc
• Install the typescript compiler with npm (comes with Node.js):



npm install -g typescript
• C...
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'hell...
SystemJS: a Universal Module Loader
• ES6 defines modules, but not the loader
• ES7 should include the System object for lo...
Index.html Take 1
<!DOCTYPE html>
<html>
<head>
<script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2-polyfills....
Starting a new project with npm
1. Generate package.json for your project:

npm init -y
2. Add Angular dependencies to pac...
package.json
{
"name": "walkthrough5",
"version": "1.0.0",
"description": “A sample package.json for the Angular app”,
"sc...
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node...
Templates
• A place to write HTML
• Rendering is separated from the core framework
• Angular team works with Telerik on re...
Unidirectional Binding
From code to template:
<h1>Hello {{ name }}!</h1>
<span [hidden]=“isZipcodeValid”>Zip code is not v...
Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty" 

(input)=“onInputEvent($event)>
<input...
Dependency Injection
• Angular can create services; no need to use the new
operator
• Angular injects objects into compone...
product-service.ts
export class Product {

constructor(

public id: number,

public title: string,

public price: number,
...
Injecting ProductService
import {Component, bind} from 'angular2/core';

import {ProductService, Product} from "../service...
Injecting Dependencies of Dependencies
Injecting Dependencies of Dependencies
import {Http} from 'angular2/http';
@Injectable
export class ProductService {
const...
Routing Bulding Blocks
• RouterOutlet (<router-outlet>) - where the router should render the component
• @RouteConfig - map...
@Component({

selector: ‘basic-routing',


template: `<a [routerLink]="['/Home']">Home</a>

<a [routerLink]="['/ProductDet...
@Component({

selector: 'basic-routing',

template: `<a [routerLink]="['/Home']">Home</a>

<a [routerLink]="['/ProductDeta...
@Component({

selector: ‘product',


template: `<h1 class="product">Product Detail for Product: 

{{productID}}</h1>`,


s...
Reactive Programming
• Angular comes with RxJS library of reactive extensions

• A observable stream emits the data over t...
Observable Streams
• Emit the next element
• Throw an error
• Send a signal that the streaming is over
An observable strea...
Observers
• A function to handle streaming object
• Error handling
• End-of-stream handling
An observer provides:
Transforming the stream
Observables vs Promises
• Observable can return multiple values
• Observables can be cancelled
• Observables allow to hand...
Observable Events@Component({

selector: "app",

template: `

<h2>Observable events demo</h2>

<input type="text" placehol...
Http and Observables


class AppComponent {



products: Array<string> = [];



constructor(private http: Http) {



this....
Deployment
• We use Webpack bundler for packaging
• npm scripts for running the build scripts
The app
index.html
Frameworks
Preparing deployment with Webpack
• Input: the entry point(s) of your app
• Output: transpiled bundle (a .js file)
• Resour...
Webpack Loaders & Plugins
• Loaders operate on a single file (e.g. transpile TS into JS)
• Plugins can operate on multiple ...
…
module.exports = {

debug: false,

devtool: 'source-map',

entry: {

'main' : './src/main.ts',

'vendor': './src/vendor....
npm scripts in package.json
"scripts": {



"clean": "rimraf dist",



"postinstall": "typings install",



"prebuild": "n...
Links
• A two-day Angular 2 workshop, March 28-29, 2016, New York,

http://bit.ly/1R0FAhN 

discount code: jugmember
• Ang...
Upcoming SlideShare
Loading in …5
×

94

Share

Download to read offline

Angular 2 for Java Developers

Download to read offline

This presentation was delivered at Princeton Java Users Group.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Angular 2 for Java Developers

  1. 1. Angular 2 for Java Developers Yakov Fain, Farata Systems March 10, 2016
  2. 2. Angular 2 • Complete re-write of AngularJS • Component-based • Better performance • No controllers, scopes • Streamlined Dependency Injection • Integrated RxJS • Can write apps in TypeScript, 
 Dart, or JavaScript (ES5 or ES6)
  3. 3. An app is a tree of components
  4. 4. HTML
  5. 5. A TypeScript class HTML
  6. 6. Importing modules Class annotations
  7. 7. Project Structure Config files App dependencies App code {
  8. 8. Project Structure SystemJS transpiles TS and loads JS bootstrap(ApplicationComponent)
  9. 9. Project Structure bootstrap(ApplicationComponent)
  10. 10. Navigation with Router
  11. 11. import {Component} from 'angular2/core';
 import {Product, ProductService} from 'app/services/product-service'; import CarouselComponent from '../carousel/carousel';
 import ProductItemComponent from '../product-item/product-item';
 import {ProductService} from '../../services/product-service';
 
 @Component({
 selector: 'auction-home-page',
 directives: [
 CarouselComponent,
 ProductItemComponent
 ],
 styleUrls: ['app/components/home/home.css'],
 template: `
 <div class="row carousel-holder">
 <div class="col-md-12">
 <auction-carousel></auction-carousel>
 </div>
 </div>
 <div class="row">
 <div *ngFor="#product of products" class="col-sm-4 col-lg-4 col <auction-product-item [product]="product"></auction-product-i </div>
 </div>
 `
 })
 export default class HomeComponent {
 products: Product[] = [];
 
 constructor(private productService: ProductService) {
 this.products = this.productService.getProducts();
 }
 }
 Exporing a
 module HomeComponent Importing
 Modules
  12. 12. Dependency Injection HomeComponent import {Component} from 'angular2/core';
 import {Product, ProductService} from 'app/services/product-service'; import CarouselComponent from '../carousel/carousel';
 import ProductItemComponent from '../product-item/product-item';
 import {ProductService} from '../../services/product-service';
 
 @Component({
 selector: 'auction-home-page',
 directives: [
 CarouselComponent,
 ProductItemComponent
 ],
 styleUrls: ['app/components/home/home.css'],
 template: `
 <div class="row carousel-holder">
 <div class="col-md-12">
 <auction-carousel></auction-carousel>
 </div>
 </div>
 <div class="row">
 <div *ngFor="#product of products" class="col-sm-4 col-lg-4 col <auction-product-item [product]="product"></auction-product-i </div>
 </div>
 `
 })
 export default class HomeComponent {
 products: Product[] = [];
 
 constructor(private productService: ProductService) {
 this.products = this.productService.getProducts();
 }
 }

  13. 13. import {Component} from 'angular2/core';
 import {Product, ProductService} from 'app/services/product-service'; import CarouselComponent from '../carousel/carousel';
 import ProductItemComponent from '../product-item/product-item';
 import {ProductService} from '../../services/product-service';
 
 @Component({
 selector: 'auction-home-page',
 directives: [
 CarouselComponent,
 ProductItemComponent
 ],
 styleUrls: ['app/components/home/home.css'],
 template: `
 <div class="row carousel-holder">
 <div class="col-md-12">
 <auction-carousel></auction-carousel>
 </div>
 </div>
 <div class="row">
 <div *ngFor="#product of products" class="col-sm-4 col-lg-4 col <auction-product-item [product]="product"></auction-product-i </div>
 </div>
 `
 })
 export default class HomeComponent {
 products: Product[] = [];
 
 constructor(private productService: ProductService) {
 this.products = this.productService.getProducts();
 }
 }
 Looping with *ngFor
  14. 14. A Sample Toolbox
  15. 15. Intro to TypeScript http://www.typescriptlang.org
  16. 16. What’s TypeScript? • An open-source language developed by Microsoft • Designed by Anders Hejlsberg, the creator of C#, Delphi, and Turbo Pascal • A superset of JavaScript • Well supported by IDEs
  17. 17. Benefits of Writing in TypeScript • Increases your productivity in producing JavaScript • Supports types, classes, interfaces, generics, annotations • Compiles into a human-readable JavaScript • Easy to learn by Java developers • Supports most of the ES6 and some ES7 syntax
  18. 18. Transpiling TypeScript Interactively
 http://www.typescriptlang.org/Playground TypeScript JavaScript (E5)
  19. 19. Classes TypeScript JavaScript (E5)
  20. 20. A Class With Constructor TypeScript JavaScript (E5)
  21. 21. Inheritance Classical syntax Prototypal
  22. 22. Generics Error No Errors
  23. 23. Arrow Function Expressions (lambdas) var getName = () => 'John Smith'; console.log(`The name is ` + getName());
  24. 24. Interfaces as Custom Types
  25. 25. Interfaces and implements
  26. 26. TypeScript Compiler: tsc • Install the typescript compiler with npm (comes with Node.js):
 
 npm install -g typescript • Compile main.ts into main.js specifying target language syntax:
 
 tsc —t ES5 main.ts • Usually the compiler’s options are set in tsconfig.json file • The watch mode allows to auto-compile as files change:
 
 tsc -w *.ts
  27. 27. import {bootstrap} from 'angular2/platform/browser'; import {Component} from 'angular2/core'; @Component({ selector: 'hello-world', template: '<h1>Hello {{ name }}!</h1>' }) class HelloWorldComponent { name: string; constructor() { this.name = ‘World!'; } } bootstrap(HelloWorldComponent); HelloWorldComponent in Angular In HTML:
 
 <hello-world></hello-world>
  28. 28. SystemJS: a Universal Module Loader • ES6 defines modules, but not the loader • ES7 should include the System object for loading modules • SystemJS is a polyfill that loads modules
  29. 29. Index.html Take 1 <!DOCTYPE html> <html> <head> <script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2-polyfills.js"></script> <script src="//npmcdn.com/typescript@1.7.5/lib/typescript.js"></script> <script src="//npmcdn.com/systemjs@0.19.22/dist/system.src.js"></script> <script src="//npmcdn.com/rxjs@5.0.0-beta.2/bundles/Rx.js"></script> <script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2.dev.js"></script> 
 <script> System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true} }); System.import('main.ts'); </script> </head> <body> <hello-world></hello-world> </body> </html> Angular from CDN SystemJS HelloWorldComponent
  30. 30. Starting a new project with npm 1. Generate package.json for your project:
 npm init -y 2. Add Angular dependencies to package.json 3. Download dependencies into the dir node_modules: 
 npm install 4. Install live-server
 npm install live-server -g
  31. 31. package.json { "name": "walkthrough5", "version": "1.0.0", "description": “A sample package.json for the Angular app”, "scripts": { "start": "live-server" }, "dependencies": { "es6-shim": "0.33.13", "es6-promise": "^3.0.2", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "systemjs": "0.19.23", "zone.js": "0.5.15", "angular2": "2.0.0-beta.9" }, 
 "devDependencies": { "live-server": "^0.9.0", "typescript": "^1.7.5" } }
  32. 32. <!DOCTYPE html> <html> <head> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/typescript/lib/typescript.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script> System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true} }); System.import('main.ts'); </script> </head> <body> <hello-world></hello-world> </body> </html> Index.html Take 2 Angular’s local (after npm install)
  33. 33. Templates • A place to write HTML • Rendering is separated from the core framework • Angular team works with Telerik on rendering for iOS and Android using NativeScript @Component({
 selector: 'auction-home-page',
 …
 styleUrls: ['app/components/home/home.css'],
 template: `
 <div class="row carousel-holder">
 <div class="col-md-12">
 <auction-carousel></auction-carousel>
 </div>
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="form-group">
 <input placeholder="Filter products by title” type="text">
 </div>
 </div>
 </div>
 `
 })
  34. 34. Unidirectional Binding From code to template: <h1>Hello {{ name }}!</h1> <span [hidden]=“isZipcodeValid”>Zip code is not valid</span> From template to code: <button (click)="placeBid()">Place Bid</button> <input placeholder= "Product name" (input)="onInputEvent()">
  35. 35. Two-way Binding Synchronizing Model and View: <input [value]="myComponentProperty" 
 (input)=“onInputEvent($event)> <input [(ngModel)] = "myComponentProperty">
  36. 36. Dependency Injection • Angular can create services; no need to use the new operator • Angular injects objects into components via constructors only • Each component has an injector • Providers specify how to inject • If a component has no provider defined, Angular checks its parent
  37. 37. product-service.ts export class Product {
 constructor(
 public id: number,
 public title: string,
 public price: number,
 public description: string) {
 }
 }
 
 export class ProductService {
 getProduct(): Product {
 return new Product( 0, "iPhone 7", 249.99, "The latest iPhone, 7-inch screen");
 }
 }
  38. 38. Injecting ProductService import {Component, bind} from 'angular2/core';
 import {ProductService, Product} from "../services/product-service";
 
 @Component({
 selector: 'di-product-page',
 template: `<div>
 <h1>Product Details</h1>
 <h2>Title: {{product.title}}</h2>
 <h2>Description: {{product.description}}</h2>
 <h2>Price: ${{product.price}}</h2>
 </div>`,
 providers:[ProductService]
 })
 
 export default class ProductComponent {
 product: Product;
 
 constructor( productService: ProductService) {
 
 this.product = productService.getProduct();
 }
 }
 A provider can be a class, factory, or a value Injection
  39. 39. Injecting Dependencies of Dependencies
  40. 40. Injecting Dependencies of Dependencies import {Http} from 'angular2/http'; @Injectable export class ProductService { constructor(private http:Http){ let products = http.get('products.json'); } … }
  41. 41. Routing Bulding Blocks • RouterOutlet (<router-outlet>) - where the router should render the component • @RouteConfig - map URLs to components to be rendered inside the <router-outlet> • RouterLink ([routerLink]) - a link to a named route. • RouteParams - a map of key-value pairs to pass parameters to the route • RouteData - a map of key-value pairs used to pass additional data from @RouteConfig to a route
  42. 42. @Component({
 selector: ‘basic-routing', 
 template: `<a [routerLink]="['/Home']">Home</a>
 <a [routerLink]="['/ProductDetail']">Product Details</a>
 <router-outlet></router-outlet>`,
 directives: [ ROUTER_DIRECTIVES]
 })
 
 @RouteConfig([
 {path: '/', component: HomeComponent, as: 'Home'},
 {path: '/product', component: ProductDetailComponent, as: 'ProductDetail'}
 ])
 class RootComponent{
 }
 
 bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy,
 {useClass: HashLocationStrategy})]); Basic Routing
  43. 43. @Component({
 selector: 'basic-routing',
 template: `<a [routerLink]="['/Home']">Home</a>
 <a [routerLink]="['/ProductDetail', {id:1234}]">Product Details</a>
 <router-outlet></router-outlet>`,
 directives: [ ROUTER_DIRECTIVES]
 })
 @RouteConfig([
 {path: '/', component: HomeComponent, as: 'Home'},
 
 {path: '/product/:id', component: ProductDetailComponent, 
 as: 'ProductDetail'}
 
 ])
 class RootComponent{}
 
 bootstrap(RootComponent, [ROUTER_PROVIDERS,
 provide(LocationStrategy, {useClass: HashLocationStrategy})]); Passing Data to a Route
  44. 44. @Component({
 selector: ‘product', 
 template: `<h1 class="product">Product Detail for Product: 
 {{productID}}</h1>`, 
 styles: ['product {background: cyan}']
 }) 
 export class ProductDetailComponent {
 productID: string; constructor(params: RouteParams){
 
 this.productID = params.get('id');
 }
 } Receiving Data in a Route 1 2 3
  45. 45. Reactive Programming • Angular comes with RxJS library of reactive extensions
 • A observable stream emits the data over time to the subscriber. • Supports multiple operators to transform the stream’s data
 • Stream samples: 
 - UI events
 - HTTP responses
 - Data arriving over websockets
  46. 46. Observable Streams • Emit the next element • Throw an error • Send a signal that the streaming is over An observable stream can:
  47. 47. Observers • A function to handle streaming object • Error handling • End-of-stream handling An observer provides:
  48. 48. Transforming the stream
  49. 49. Observables vs Promises • Observable can return multiple values • Observables can be cancelled • Observables allow to handle end-of-stream
  50. 50. Observable Events@Component({
 selector: "app",
 template: `
 <h2>Observable events demo</h2>
 <input type="text" placeholder="Enter stock" [ngFormControl]="searchInput">
 `
 })
 class AppComponent {
 
 searchInput: Control;
 
 constructor(){
 this.searchInput = new Control('');
 
 this.searchInput.valueChanges
 .debounceTime(500)
 .subscribe(stock => this.getStockQuoteFromServer(stock));
 }
 
 getStockQuoteFromServer(stock) {
 
 console.log(`The price of ${stock} is ${100*Math.random().toFixed(4)}`);
 }
 } Observable
  51. 51. Http and Observables 
 class AppComponent {
 
 products: Array<string> = [];
 
 constructor(private http: Http) {
 
 this.http.get(‘http://localhost:8080/products')
 .map(res => res.json())
 .subscribe(
 data => {
 
 this.products=data;
 },
 
 err =>
 console.log("Can't get products. Error code: %s, URL: %s ",
 err.status, err.url),
 
 () => console.log('Product(s) are retrieved')
 );
 }
 } DI O b s e r v e r
  52. 52. Deployment • We use Webpack bundler for packaging • npm scripts for running the build scripts The app index.html Frameworks
  53. 53. Preparing deployment with Webpack • Input: the entry point(s) of your app • Output: transpiled bundle (a .js file) • Resources (css, images, html) can be inlined in the bundle • Usually, the app will have at least two bundles:
 
 - your code (e.g. bundle.js)
 
 - frameworks and libraries (e.g. vendor.bundle.js)
  54. 54. Webpack Loaders & Plugins • Loaders operate on a single file (e.g. transpile TS into JS) • Plugins can operate on multiple files and be invoked at different stages of the Webpack lifecycle
  55. 55. … module.exports = {
 debug: false,
 devtool: 'source-map',
 entry: {
 'main' : './src/main.ts',
 'vendor': './src/vendor.ts'
 },
 metadata: metadata,
 module: {
 loaders: [
 {test: /.css$/, loader: 'to-string!css'},
 {test: /.html$/, loader: 'raw'},
 {test: /.ts$/, loader: 'ts'}
 ],
 noParse: [path.join(__dirname, 'node_modules', 'angular2', 'bundles')]
 },
 output: {
 path : './dist',
 filename: 'bundle.js'
 },
 plugins: [
 new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity}),
 new CompressionPlugin({regExp: /.css$|.html$|.js$|.map$/, threshold: 1500}),
 new CopyWebpackPlugin([{from: './src/index.html', to: 'index.html'}]),
 new DedupePlugin(),
 new DefinePlugin({'webpack': {'ENV': JSON.stringify(metadata.ENV)}}),
 new OccurenceOrderPlugin(true),
 new UglifyJsPlugin({
 compress : {screw_ie8 : true},
 mangle: {
 screw_ie8 : true,
 except: ['RouterLink'] // TODO: Remove after #6678 fixed
 }
 })
 ],
 resolve: {
 extensions: ['', '.ts', '.js']
 }
 webpack.config.js
  56. 56. npm scripts in package.json "scripts": {
 
 "clean": "rimraf dist",
 
 "postinstall": "typings install",
 
 "prebuild": "npm run clean",
 "build": "webpack --config webpack.prod.config.js --progress —profile --display-cached",
 
 "start": "webpack-dev-server --inline --progress --display-cached --port 8080",
 
 "preserve:dist": "npm run build",
 "serve:dist": "static dist -z"
 } To run a script from the command line:
 
 npm start or npm run build or npm run serve:dist
  57. 57. Links • A two-day Angular 2 workshop, March 28-29, 2016, New York,
 http://bit.ly/1R0FAhN 
 discount code: jugmember • Angular consulting/training: faratasystems.com • Blog: yakovfain.com • Our book: http://bit.ly/1QYeqL0
 

  • DineshChoudhary46

    Mar. 22, 2018
  • KoletiPrashanth

    Jan. 22, 2018
  • andesiva

    Dec. 26, 2017
  • AndersonFerreiraCane

    Dec. 15, 2017
  • nagasama

    Oct. 15, 2017
  • SleymanAkay1

    Oct. 12, 2017
  • mikepham12

    Jul. 6, 2017
  • DubaiEscortBunniesUAE

    May. 30, 2017
  • lovemine

    Apr. 26, 2017
  • ss1875

    Mar. 31, 2017
  • MarioSergio26

    Mar. 15, 2017
  • AdeebQambrani

    Mar. 8, 2017
  • luv2code

    Mar. 7, 2017
  • KSIVA123

    Mar. 6, 2017
  • RomeoIIICordova

    Feb. 27, 2017
  • ssashidhar

    Feb. 4, 2017
  • DoronMarcus

    Feb. 2, 2017
  • ChakravarthyYekkiral

    Jan. 15, 2017
  • SreeragM

    Jan. 6, 2017
  • KhaireddineHamdi

    Dec. 19, 2016

This presentation was delivered at Princeton Java Users Group.

Views

Total views

25,690

On Slideshare

0

From embeds

0

Number of embeds

258

Actions

Downloads

748

Shares

0

Comments

0

Likes

94

×