This document provides an overview of Angular 2 for Java developers. It discusses that Angular 2 is a complete rewrite of AngularJS with a focus on components, better performance, and streamlined dependency injection. It also covers key aspects of Angular 2 like project structure, templates, data binding, dependency injection, routing, and use of reactive programming with RxJS. Sample code examples are provided to demonstrate concepts like components, services, dependency injection, routing, and use of observables.
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
Learn all the essentials of building Angular 2 applications right here.
https://www.udemy.com/angular-2-training/?couponCode=UANGULAR2
This is a beginner level course aimed at those new to Angular 2 and Typescript. No previous knowledge of either is required before starting this course.
This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.
You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data, and managing user and system events.
Using JHipster 4 for generating Angular/Spring Boot appsYakov Fain
JHipster 4 is an open-source code generator that allows you to automate generation and configuration of the Web project that uses the latest version of Angular on the front and Spring framework on the back. Over the next year, Angular/Spring combination will become a valuable addition to the skill set of any enterprise Java developer. In this presentation, you’ll see how to jump-start a Web project with JHipster.
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
Learn all the essentials of building Angular 2 applications right here.
https://www.udemy.com/angular-2-training/?couponCode=UANGULAR2
This is a beginner level course aimed at those new to Angular 2 and Typescript. No previous knowledge of either is required before starting this course.
This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.
You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data, and managing user and system events.
Using JHipster 4 for generating Angular/Spring Boot appsYakov Fain
JHipster 4 is an open-source code generator that allows you to automate generation and configuration of the Web project that uses the latest version of Angular on the front and Spring framework on the back. Over the next year, Angular/Spring combination will become a valuable addition to the skill set of any enterprise Java developer. In this presentation, you’ll see how to jump-start a Web project with JHipster.
Single Page Applications (SPA) 2.0
- Push the limits of what’s possible on the web
AngularJS, RequireJS , Polymer, AMD, ES6 , Gulp, Dependency Injection, JavaScript Patterns, Functional Reactive Programming, OAuth, Promises ,Generators
Quick introduction to Angular 4 for AngularJS 1.5 developersPaweł Żurowski
Quick and dirty introduction to main concepts of Angular Web applications. These slides where accompanied by a workshop that took place in Decerto for fellow professionals.
Angular is an open source JavaScript framework that is used to build single page based web applications.A detailed overview of Angular 4, Its features, development environment and components.
Angular elements - embed your angular components EVERYWHERENadav Mary
My lecture about angular elements, a new feature released in angular version 6 which allows us to transform angular components into custom elements and use them outside angular's scope.
This fast-paced overview for beginners discusses some aspects of AngularJS 1.x and 2.x, which versions to learn (and why), and the technologies that you need to learn. We'll delve into examples of combining AngularJS with other technologies (such as BackboneJS and D3.js), and also address the +/- of AngularJS.
Developing a Demo Application with Angular 4 - J2INader Debbabi
Introduction to Angular Material, Angular Router and Angular Http with RxJS library.
Fake REST API set up using json-server.
Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
Learn about Angular best practices to improve the performance of your existing Angular application. Tried and tested clean code checklist for your Angular app.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Single Page Applications (SPA) 2.0
- Push the limits of what’s possible on the web
AngularJS, RequireJS , Polymer, AMD, ES6 , Gulp, Dependency Injection, JavaScript Patterns, Functional Reactive Programming, OAuth, Promises ,Generators
Quick introduction to Angular 4 for AngularJS 1.5 developersPaweł Żurowski
Quick and dirty introduction to main concepts of Angular Web applications. These slides where accompanied by a workshop that took place in Decerto for fellow professionals.
Angular is an open source JavaScript framework that is used to build single page based web applications.A detailed overview of Angular 4, Its features, development environment and components.
Angular elements - embed your angular components EVERYWHERENadav Mary
My lecture about angular elements, a new feature released in angular version 6 which allows us to transform angular components into custom elements and use them outside angular's scope.
This fast-paced overview for beginners discusses some aspects of AngularJS 1.x and 2.x, which versions to learn (and why), and the technologies that you need to learn. We'll delve into examples of combining AngularJS with other technologies (such as BackboneJS and D3.js), and also address the +/- of AngularJS.
Developing a Demo Application with Angular 4 - J2INader Debbabi
Introduction to Angular Material, Angular Router and Angular Http with RxJS library.
Fake REST API set up using json-server.
Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
Learn about Angular best practices to improve the performance of your existing Angular application. Tried and tested clean code checklist for your Angular app.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/
At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.
Scala.js is a compiler that compiles Scala source code to equivalent Javascript code. It can be seen as the start of a revolution in developing web application. In this talk, I'll present Scala.js project, common libraries for having a pleasure web development (such as scalatags, autowire and upickle) and integration with well known javascript libraries such as AngularJS and React.js.
Developing Lightning Components for Communities.pptxDmitry Vinnik
Discover tips and tricks for developing Lightning Components for communities. We'll cover customizing Self-Service templates, including overriding the default header with a custom theme, allowing community administrators to control the look and feel of your custom components with design tokens, and best practices, such as utilizing Lightning Component inheritance.
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...Codemotion
Scala is the only language that can be used to produce code that can be "trans/compiled" for the JVM, in Javascript and in native binary. This allows to write libraries that are usable in JVM and JS using the power of functional programming (i.e. cats, scalaz), generic programming (i.e. shapeless) and macro/scalameta available in Scala. In this talk, we will see how to write a Scala application backend and a SPA (scala.js/scala-js-react) that share the same code as a business logic, datamodels and transparent API call (JVM/JS) in Scala (via autowire/akka-http/circe).
The aim of these series is exploring Angular 2 and it's amazing features. with the simplest way and the meaningful examples and labs to be practiced. Good Luck in Exploring :D
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
Migrating Angular 1 to Angular 2: I can summarize my experience in migration in one phrase: Angular 1 and Angular 2 are very different. To help navigate through these differences, I have chosen an existing Angular 1 application and ported it over to Angular 2. This is not any old existing application but an application that has been around for almost a decade originally developed my Microsoft in Silverlight.
I will walk you through the steps of migration as well as sharing insights and problems I faced along the way. Additionally, with Google recommending developers use TypeScript, I will walk you through core concepts such as type safety, encapsulation, and MVVM development patterns. You will find side by side code comparisons for each topic.
About me : As a Developer Relations Engineer at ComponentOne, a division of GrapeCity, Ross Dederer has spent his entire professional life helping others navigate the complex technology environment. Ross works closely with clients and developer teams to provide solutions that impact software development experiences. Traveling to code camps, conferences and meeting with corporate clients, Ross is able to pursue his passion of helping the community grow.
This presentation will show the latest Web Components technologies and examples, and whether you should be using Web Components now. (spoiler alert: you should be!)
Integrating consumers IoT devices into Business WorkflowYakov Fain
From the software development perspective IoT is about programming "things", connecting them with each other and integrating them with existing applications. This presentation will demonstrate how IoT-enabled devices from multiple manufacturers can be integrated into a workflow of a business application. You'll see a live demo of using commercial consumer devices as a part of an application that utilizes such technologies such as REST API, OAuth, Websockets, and Java. This presentation will give you an idea of how to go about integration of new devices as they become available on the market.
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
Surviving as a Professional Software DeveloperYakov Fain
This presentation was made in Kiev, Ukraine at JEEConf, May 2013 as a sequel to this one: http://www.slideshare.net/yfain/yakov-fain-enterprisedeveloperkiev.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
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. 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
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. 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. 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
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
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. 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. Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty"
(input)=“onInputEvent($event)>
<input [(ngModel)] = "myComponentProperty">
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. 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. 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
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. 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
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. 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. Observable Streams
• Emit the next element
• Throw an error
• Send a signal that the streaming is over
An observable stream can:
47. Observers
• A function to handle streaming object
• Error handling
• End-of-stream handling
An observer provides:
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. Deployment
• We use Webpack bundler for packaging
• npm scripts for running the build scripts
The app
index.html
Frameworks
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. 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
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. 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