2. By the end of this presentation you
wonât become an Angular expert,
but youâll start being dangerous!
The Legal Slide
3. About myself
⢠Work for Farata Systems â¨
Angular practice lead
⢠Java Champion
⢠Latest book:â¨
âAngular Development with TypeScriptâ
ctwdevoxxusâ¨
40% off
4. Agenda
⢠High-level overview of the Angular framework and TypeScript
⢠Generating and bundling a project with Angular CLI
⢠Start a Java REST service with Spring Boot
⢠Create an Angular REST client and deploy it under Spring
Boot
⢠Demo of a sample Angular app that uses REST and
WebSockets
5. Angular Framework
⢠Component-based (not MVC)
⢠Dependency Injection
⢠Router
⢠Integrated RxJS
⢠Can write apps in TypeScript, Dart, or JavaScript
⢠UI components: Angular Material 2
⢠The rendering engine
17. Whatâs Angular CLI
⢠Scaffolding the project and creating a basic app
⢠Generating components, services, modules, etc.
⢠Serving the app to the browser
⢠Bundling apps for dev and prod deployments
⢠Generates boilerplate unit tests and conďŹgures test
runners
20. Routerâs features
- Pass data to routes
- Child component can have their routes
- Multiple router outlets
- Guarding routes
- Lazy loading of modules
21. Dependency Injection
⢠Angular injects values into components via constructors
⢠Each component has its own injector
⢠You specify a provider so Angular knows what to inject
22. A sample injectable service
@Injectable()
export class ProductService{
â¨
getProducts(): Product {â¨
// An HTTP request can go here â¨
â¨
return new Product( 0, "iPhone 7", 249.99, "The latest iPhone, 7-inch screen");â¨
}â¨
}
24. Reactive Programming: Push
Subscribe to messages from Observable and handle them by Observer
Observer
Subscriber
Observer
Subscriber
push
push
push
Observer
Subscriber
Observable
Dataâ¨
Source
25. Reactive programming in Angular
- Routerâ¨
- Reactive Formsâ¨
- EventEmitter (a subclass of Subject)
- Handling HTTP responsesâ¨
- WebSockets
26. Http and Observables
â¨
class AppComponent implements OnInit{â¨
â¨
products: Array = [];â¨
â¨
constructor(private http: Http) {}
ngOnInit() {â¨
this.http.get(â/api/productsâ)â¨
.map(res => res.json()) // Turn JSON from HTTP response into JS objâ¨
.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')â¨
);â¨
}â¨
}
O
b
s
e
r
v
e
r
40. Thank you!
⢠The book code samples:â¨
https://github.com/Farata/angular2typescript
⢠Training inquiries: â¨
training@faratasystems.com
⢠My blog:â¨
yakovfain.com
⢠Twitter: @yfainâ¨
ctwdevoxxusâ¨
40% off