rich clients with eclipse 4 - jax london · lab 0: build all tutorial labs in the vm when using a...
TRANSCRIPT
![Page 1: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/1.jpg)
Modern Web Appswith Spring Boot, Angular & TypeScript
Kai Tödter
9/20/2019 1© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 2: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/2.jpg)
Who am I?
▪ Principal Key Expertat Siemens Smart Infrastructure
▪ Web Technology Fan
▪ Open Source Lover
▪ E-mail: [email protected]
▪ Twitter: twitter.com/kaitoedter
9/20/2019 2© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 3: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/3.jpg)
Show Hands!
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 3
![Page 4: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/4.jpg)
Spring Boot?Hypermedia?TypeScript?
Angular?Bootstrap?
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 4
![Page 5: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/5.jpg)
After this tutorial I’ll have
an idea how to put it all together!
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 5
![Page 6: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/6.jpg)
Outline▪ Spring Boot
▪ REST & Hypermedia
▪ Spring Data Rest
▪ TypeScript
▪ Angular
▪ Bootstrap
▪ Putting it all together
9/20/2019 6© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 7: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/7.jpg)
What we will create…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 7
![Page 8: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/8.jpg)
Requirements: Labs on local Machine
▪ Your favorite text editor or IDE
▪ Eclipse, IntelliJ IDEA, Sublime, …
▪ Java 8 JDK installed
▪ Optional: Node.js installed
9/20/2019 8© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 9: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/9.jpg)
Requirements: Labs in Virtual Machine▪ VirtualBox installed
▪ See https://www.virtualbox.org/wiki/Downloads
▪ Get the latest Tutorial VM▪ Or install Vagrant and run “vagrant up”
in the vagrant directory
▪ Start VM in VirtualBox
▪ Login in as “vagrant” with password “vagrant”
▪ Type “startx” to start the desktop
9/20/2019 9© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 10: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/10.jpg)
Lab 0: Build all tutorial labs locally
▪ Install the tutorial sources
▪ Clone https://github.com/toedter/webapp-tutorial
▪ Or copy from USB stick
▪ cd into webapp-tutorial
▪ gradlew build
▪ Linux & Mac: ./gradlew instead of gradlew
▪ If the build is successful, you are ready to go!
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 10
![Page 11: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/11.jpg)
Lab 0: Build all tutorial labs in the VM▪ When using a VM created by Kai
▪ Everything is setup already
▪ When having created the VM yourself using Vagrant▪ Open IntelliJ IDEA (you find it in /opt)▪ Configure Java 8 SDK (/usr/lib/jvm/…)▪ Import Gradle project webapp-tutorial (in ~)▪ Install Lombok plugin in IntelliJ IDEA▪ In IntelliJ IDEA enable “Annotation Processing”
▪ In Chromium install extension “JSONView”
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 11
![Page 12: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/12.jpg)
Prepared Tutorial VM
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 12
![Page 13: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/13.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 13
![Page 14: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/14.jpg)
Why Spring Boot?
▪ Fast way to build web applications
▪ Inspects your classpath and beans you have configured
▪ You can focus more on business features and less on infrastructure
▪ Easily deployable as microservice
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 14
![Page 15: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/15.jpg)
What does Spring Boot NOT?
▪ Generate code
▪ Change your configuration
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 15
![Page 16: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/16.jpg)
HelloController
@RestControllerpublic class HelloController {
@RequestMapping("/")public String index() {return "Greetings from Spring Boot!";
} }
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 16
![Page 17: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/17.jpg)
Application@SpringBootApplicationpublic class Application {
public static void main(String[] args) {SpringApplication.run(Application.class, args);
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 17
![Page 18: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/18.jpg)
Controller Test with MockMVC@RunWith(SpringRunner.class)@WebMvcTest(HelloController.class)public class HelloControllerTest {
@Autowiredprivate MockMvc mockMVC;
@Testpublic void shouldGetGreeting() throws Exception {mockMVC.perform(MockMvcRequestBuilders.get("/")
.accept(MediaType.APPLICATION_JSON))
.andExpect(status().isOk())
.andExpect(content().string(equalTo(HelloController.LAB1_GREETINGS_FROM_SPRING_BOOT)));
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 18
![Page 19: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/19.jpg)
Integration Test with Random Port@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class HelloControllerIntegrationTest {
@Autowired
private TestRestTemplate restTemplate;
@Test
public void shouldGetGreeting() throws Exception {
ResponseEntity<String> response =
restTemplate.getForEntity("/", String.class);
assertThat(response.getBody(),
equalTo(HelloController.LAB1_GREETINGS_FROM_SPRING_BOOT));
}
}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 19
![Page 20: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/20.jpg)
Lab 1: Task 1
▪ Open terminal in lab1/complete
▪ Invoke ..\..\gradlew bootrun
▪ On Linux & Mac: sudo ../../gradlew bootrun
▪ Open browser with localhost:8080
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 20
![Page 21: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/21.jpg)
Lab 1: Task 2
▪ Open lab1/initial in your IDE
▪ Create a Spring Boot based web app
▪ Run it and open your browser with localhost:8080
▪ Optional: Write some tests!
▪ Get some ideas from …/complete
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 21
![Page 22: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/22.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 22
REST + HypermediaBasics
![Page 23: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/23.jpg)
Outline
▪ REST Basics
▪ HATEOAS
▪ Hypermedia with HAL
▪ Spring Data Rest
9/20/2019 23© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 24: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/24.jpg)
What is REST?
▪ Stands for Representational State Transfer
▪ Is a Software Architecture Style
▪ was introduced and defined in 2000by Roy T. Fielding in his doctoral dissertation
▪ REST != CRUD via HTTP
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 24
![Page 25: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/25.jpg)
REST Architectural Constraints
▪ Client-Server
▪ Stateless
▪ Cacheable
▪ Layered system
▪ Code on demand (optional)
▪ Uniform interface (see next slide)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 25
![Page 26: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/26.jpg)
Uniform Interface▪ Identification of resources
▪ Manipulation of resources through their representations▪ Create => HTTP POST
▪ Read => HTTP GET
▪ Update => HTTP PUT, HTTP PATCH
▪ Delete => HTTP DELETE
▪ Self-descriptive messages
▪ Hypermedia as the engine of application state (HATEOAS)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 26
![Page 27: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/27.jpg)
Richardson Maturity Model
Level 3: Hypermedia Controls
Level 2: HTTP Verbs
Level 1: Resources
Level 0: The Swamp of POX
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 27
Source: http://martinfowler.com/articles/richardsonMaturityModel.html
![Page 28: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/28.jpg)
Hypermedia APIs
for Services
are like
Web Pages with Links
for Humans9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 28
![Page 29: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/29.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 29
HAL
Image Source: http://wallpoper.com/images/00/26/43/92/hal-9000_00264392.jpg
![Page 30: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/30.jpg)
HAL
▪ Is for Hypertext Application Language
▪ Was created by Mike Kelly
▪ Representations for both JSON and XML
▪ Very popular
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 30
![Page 31: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/31.jpg)
HAL Structure
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 31
Plain oldJSON Properties
Links
Plain oldJSON Properties
Links Plain oldJSON Properties
Links …Embedded Resources
Embedded Resources Embedded Resources
![Page 32: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/32.jpg)
HAL Example{
"id":1,"text":"hello all!","_links": {
"self": {"href":"http://localhost:8080/chatty/api/messages/1"
}},"_embedded": {
"author": {"id":"toedter_k"
}}
}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 32
![Page 33: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/33.jpg)
Spring
▪ Spring Boot
▪ Spring Data Rest
▪ Spring HATEOAS
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 33
![Page 34: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/34.jpg)
Spring Data Rest: Domain@Data@Entity@NoArgsConstructorpublic class User {
@Idprivate String id;private String fullName;private String email;
}9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 34
![Page 35: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/35.jpg)
Spring Data REST: Repository@RepositoryRestResource(
collectionResourceRel = "users",path = "users")
interface UserRepository extends
PagingAndSortingRepository<User, String> {}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 35
![Page 36: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/36.jpg)
Spring Data REST: Repository (2)
@RepositoryRestResource( exported = false )
interface UserRepository extends
PagingAndSortingRepository<User, String> {}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 36
![Page 37: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/37.jpg)
Spring Data Rest: JSON Result{
_links: {self: {href: "http://localhost:8080/chatty/api/users{?page,size,sort}",templated: true
}},_embedded: {
users: [ {fullName: "Jane Doe",email: "[email protected]",_links: {
self: {href: "http://localhost:8080/chatty/api/users/doe_ja",templated: true
},…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 37
![Page 38: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/38.jpg)
HAL Explorer
▪ https://github.com/toedter/hal-explorer
▪ Easy integration through WebJar
▪ Supports custom request headers
▪ Supports theming and responsive design
▪ Included in Spring Data REST
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 38
![Page 39: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/39.jpg)
HAL Explorer
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 39
![Page 40: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/40.jpg)
Robust Clients▪ Start from main API
▪ Find link relations through defined contracts
▪ Follow Links
▪ For navigation
▪ For possible “actions”
=> Clients are robust regarding changes in link URIs
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 40
![Page 41: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/41.jpg)
Controversial Discussion
▪ Are we there yet?
▪ RESTistential Crises
▪ http://www.infoq.com/news/2014/03/rest-at-odds-with-web-apis
▪ DHH, Getting hyper about hypermedia apis
▪ https://signalvnoise.com/posts/3373-getting-hyper-about-hypermedia-apis
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 41
![Page 42: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/42.jpg)
Live Demo + Tests
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 42
![Page 43: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/43.jpg)
Lab 2: Task 1
▪ Open terminal in lab2/complete
▪ Invoke ..\..\gradlew bootrun
▪ Open browser with localhost:8080
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 43
![Page 44: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/44.jpg)
Lab 2: Task 2
▪ Open lab2/initial in your IDE
▪ Add a user repository
▪ Fill the repository with test data
▪ Run the application and open your browser with localhost:8080
▪ Optional: Write some tests!
▪ Get some ideas from ../complete
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 44
![Page 45: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/45.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 45
TypeScript &Angular
![Page 46: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/46.jpg)
Outline
▪ TypeScript Introduction
▪ Angular Introduction
▪ TypeScript + Angular
▪ Demos & Live Coding
9/20/2019 46© Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.
![Page 47: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/47.jpg)
JavaScript?Many Java/OO developers don’t like JavaScript regarding writing larger applications. Some reasons are:
▪ No static typing▪ No reliable code completion (only best guess)▪ Hard to refactor
▪ Not object-oriented, especially▪ No structuring mechanisms like Interfaces, Classes*,
Modules** Before ECMAScript 2015
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 47
![Page 48: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/48.jpg)
Who fixes that?▪ Dart
▪ Great language by Google: dartlang.org▪ Team has to learn new language▪ Either runs on Dart VM or compiles to JavaScript
▪ CoffeeScript▪ Ruby-like, concise syntax▪ Compiles to JavaScript▪ coffescript.org
▪ BabelJS▪ JavaScript compiler▪ babeljs.io
▪ Traceur▪ JavaScript compiler▪ github.com/google/traceur-compiler
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 48
![Page 49: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/49.jpg)
TypeScript: Summary▪ Typed Superset of JavaScript
▪ Almost all valid JavaScript is valid TypeScript*▪ Compiles to JavaScript▪ Provides optional static type checking at compile time
▪ For most existing JavaScript libraries there are type definitions available
▪ Provides Interfaces, Classes, Modules, Enums, Generics, Decorators and more
▪ Open Source: Apache 2.0 License▪ Created by Microsoft
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 49
![Page 50: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/50.jpg)
How to get started?
▪ www.typescriptlang.org
▪ Install Node.js (nodejs.org)
▪ Invoke “npm install –g typescript”
▪ Compile a TypeScript file: “tsc myTypeScript.ts”
▪ Results in “myTypeScript.js”
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 50
![Page 51: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/51.jpg)
www.typescriptlang.org
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 51
![Page 52: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/52.jpg)
Play!
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 52
![Page 53: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/53.jpg)
Definitely Typed
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 53
![Page 54: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/54.jpg)
Namespaces and Interfacesnamespace tutorial.webapp {
export interface User {getId(): string;getEmail(): string;getFullName(): string;
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 54
![Page 55: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/55.jpg)
Classesnamespace tutorial.webapp {export class SimpleUser implements User {
constructor(private id: string,
private email: string,
private fullName: string) { }
getId(): string {return this.id;
}…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 55
![Page 56: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/56.jpg)
Live Demo
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 56
![Page 57: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/57.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 57
JavaScript Dev Tools
![Page 58: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/58.jpg)
JavaScript Dev Tools▪ In JavaScript land, mostly JavaScript based
tools are used for build, dependency management, test, etc.▪ npm for
▪ dependency management (including @types)
▪ Running build/test/server scripts
▪ Jasmine for implementing tests
▪ Karma for running tests
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 58
![Page 59: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/59.jpg)
npm
▪ Package manager for JavaScript
▪ Resolves dependencies
▪ Runs scripts
▪ Is THE JavaScript dev tool
▪ Input file is package.json
▪ Alternative to npm: yarn
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 59
![Page 60: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/60.jpg)
package.json Example (1){
"name": "tutorial-web-client","title": "tutorial web client","version": "1.0.0","description": "tutorial web client","scripts": {
"build": "./node_modules/.bin/tsc","test": "./node_modules/.bin/karma start"
},"author": {
"name": "Kai Toedter","url": "http://toedter.com"
},
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 60
![Page 61: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/61.jpg)
package.json Example (2)"license": "MIT","dependencies": {},"devDependencies": {"jasmine-core": "2.99.1","karma": "4.0.0","karma-jasmine": "1.1.2","karma-chrome-launcher": "2.2.0","typescript": "3.5.3"
}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 61
![Page 62: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/62.jpg)
Jasmine Exampledescribe('User', () => {
it('should create user and get attributes', () => {var user:User =
new SimpleUser("user1", "[email protected]", "User 1");expect(user).toBeDefined();expect(user.getId()).toBe('user1');expect(user.getEmail()).toBe(' [email protected] ');expect(user.getFullName()).toBe('User 1');
});});
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 62
![Page 63: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/63.jpg)
Since TypeScript 2.0: @types
▪ All typings are available as npm modules
▪ Install a typing with
▪ npm install @types/<npm module>
▪ E.g. npm install @types/jasmine
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 63
![Page 64: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/64.jpg)
@types in tsconfig.json{
"compilerOptions": {"module": "commonjs","target": "es5","outDir": "build/dist","rootDir": ".","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"moduleResolution": "node","typeRoots": [
"node_modules/@types"]
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 64
![Page 65: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/65.jpg)
Karma
▪ Test runner for JavaScript
▪ Created by Google
▪ Supports different browsers
▪ Easy configuration
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 65
![Page 66: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/66.jpg)
Karma Config Examplemodule.exports = function(config) {
config.set({basePath: '.',frameworks: [ 'jasmine‘ ],files: [ 'dist/**/*.js' ],reporters: ['progress'],port: 9876,colors: true,autoWatch: false,browsers: ['Chrome'],singleRun: true,concurrency: Infinity
})}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 66
![Page 67: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/67.jpg)
Lab 3: Task 1▪ Open terminal in lab3/complete▪ export CHROME_BIN=/usr/bin/chromium-browser
▪ Invoke npm run build▪ Check that all TypeScript files were transpiled to
JavaScript in the dist directory
▪ Invoke npm test▪ Check that the Karma run was successful
▪ And all Jasmine tests are green
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 67
![Page 68: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/68.jpg)
Lab 3: Task 2▪ Complete initial implementation of
▪ User.ts, SimpleUser.ts, TestData.ts
▪ UserSpec.ts
▪ Open terminal in lab3/initial▪ Invoke npm run build
▪ Check everything builds
▪ Invoke npm test▪ Check that all tests are green
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 68
![Page 69: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/69.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 69
![Page 70: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/70.jpg)
angular.io
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 70
![Page 71: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/71.jpg)
Angular
▪ Angular is a framework for building client applications in HTML
▪ TypeScript, JavaScript, Dart
▪ Modules, Components, Templates, Services
▪ Much more…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 71
![Page 72: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/72.jpg)
Modules
▪ Every Angular app has at least one module, the root module
▪ Conventionally named AppModule
▪ A module is a class with an @NgModule decorator
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 72
![Page 73: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/73.jpg)
@NgModule▪ declarations
▪ view classes (components, directives, and pipes) of this module
▪ exports▪ subset of declarations usable by other modules
▪ imports▪ exported classes of other modules needed by component templates
this module’s templates
▪ providers▪ creators of services (globally accessible in all parts of the app)
▪ bootstrap▪ main application view (root component)▪ Only the root module should set this bootstrap property
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 73
![Page 74: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/74.jpg)
Example Moduleimport {NgModule} from '@angular/core';import {AppComponent} from './app.component';import {BrowserModule} from '@angular/platform-browser';import {LocationStrategy, HashLocationStrategy} from
'@angular/common';
@NgModule({declarations: [AppComponent],imports : [BrowserModule],providers : [{ provide: LocationStrategy,
useClass: HashLocationStrategy }],bootstrap : [AppComponent]
})export class AppModule {}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 74
![Page 75: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/75.jpg)
Angular Libraries▪ Angular ships as a collection of Node.js modules
▪ Can be found in node_modules/@angular▪ common
▪ compiler
▪ core
▪ forms
▪ router
▪ …
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 75
![Page 76: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/76.jpg)
Launching the App
▪ … by bootstrapping its root module
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 76
![Page 77: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/77.jpg)
Components
▪ A component controls a view
▪ In our tutorial, we have 3 components:
▪ AppComponent
▪ UsersComponent
▪ AboutComponent
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 77
![Page 78: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/78.jpg)
@Component▪ Takes configuration to
▪ create and present the component and its view.
▪ A few @Component configuration options:▪ selector
▪ CSS selector for this component▪ Here: <chat-messages></chat-messages>▪ Angular renders the templateURl between those tags
▪ templateUrl▪ address of this component's HTML template
▪ providers▪ array of dependency injection providers for services that the
component requires
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 78
![Page 79: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/79.jpg)
Component Exampleimport {Component} from '@angular/core';import {User} from './user';import {UsersService} from './users.service';
@Component({selector: 'chat-messages',templateUrl: 'app/user/users.component.html',providers: [UsersService],
})export class UsersComponent implements OnInit {
private users: User[];
constructor(private usersService: UsersService) {}
ngOnInit() {this.users = this.usersService.getUsers();
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 79
![Page 80: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/80.jpg)
Templates
▪ A component's view is defined by a template
▪ A template looks like regular HTML,but can use Angular specific things
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 80
![Page 81: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/81.jpg)
User List Template<div><h4>Users</h4><table><tr *ngFor="let user of users"><td>{{user.id}}</td><td>{{user.fullName}}</td><td>{{user.email}}</td>
</tr></table>
</div>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 81
![Page 82: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/82.jpg)
One Way Databinding
▪ Component -> DOM
▪ interpolation: {{user.id}}
▪ Property binding:
▪ <user-detail [user]="selectedUser"></user-detail>
▪ DOM -> Component
▪ <li (click)="selectUser(user)"></li>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 82
![Page 83: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/83.jpg)
Two Way Databinding
▪ Component <-> DOM
▪ <input [(ngModel)]="user.name">
Recommendation:
Prefer one way databinding, since it makes control flows easier to understand
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 83
![Page 84: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/84.jpg)
Dependency Injection▪ Used everywhere in Angular▪ injector is the main mechanism
▪ An injector maintains a container of service instances▪ service instances are created automatically by the injector▪ An injector can create a new service instance from
a provider
▪ A provider is a recipe for creating a service▪ Register providers with injectors
▪ Either in modules▪ Or in components
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 84
![Page 85: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/85.jpg)
Services
▪ Are POTOs (Plain Ole Typescript Objects)
▪ Should encapsulate functionality that can be uses by
▪ Other services
▪ Components
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 85
![Page 86: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/86.jpg)
Example Serviceimport {Injectable} from '@angular/core';import {User} from './user';
@Injectable()export class UsersService {
public getUsers(): User[] {return [
new User('toedter_k', 'Kai Toedter', '[email protected]'),new User('doe_jo', 'John Doe', '[email protected]'),new User('doe_ja', 'Jane Doe', '[email protected]')
];}
}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 86
![Page 87: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/87.jpg)
@Injectable▪ Needed by services, that want to have other
services injected
▪ Recommendation: Use it for every service, even if it would not be necessary. Why?▪ Future proofing:
No need to remember @Injectable() when you add a dependency later
▪ Consistency: All services follow the same rules, and you don't have to wonder why a decorator is missing
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 87
![Page 88: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/88.jpg)
Singleton Service▪ Best practice since Angular 6
▪ Then you don’t have to specify a provider explicitly
@Injectable({providedIn: 'root'
})export class UsersService {
// …}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 88
![Page 89: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/89.jpg)
Routing
▪ Tell the router how to compose navigation URLs, set base in index.html, e.g. <base href="/">
▪ Import RouterModule and Routes in TypeScript
▪ Create a router configuration
▪ Use tag <router-outlet> to display routed components
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 89
![Page 90: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/90.jpg)
Router Configurationimport { Routes } from '@angular/router';
import {UsersComponent} from './user/users.component';import {AboutComponent} from './about/about.component';
export const routerConfig: Routes = [{ path: '', redirectTo: 'users', pathMatch: 'full' },{ path: 'users', component: UsersComponent },{ path: 'about', component: AboutComponent }
];
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 90
![Page 91: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/91.jpg)
Routing HTML<nav><ul>
<li><a [routerLink]="['about']">About</a></li><li><a [routerLink]="['users']">Users</a></li>
</ul></nav>
<router-outlet></router-outlet>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 91
![Page 92: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/92.jpg)
Angular CLI
▪ Installation: npm install -g @angular/cli
▪ Create a new project and run it:ng new <project name>cd <project name>ng serve
▪ Create new component:ng g component <new component>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 92
![Page 93: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/93.jpg)
Live Demo
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 93
![Page 94: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/94.jpg)
Lab 4: Task 1
▪ Open terminal in lab4/complete
▪ Invoke: npm start
▪ builds everything using Angular CLI
▪ Starts a Web server at port 4200
▪ Open http://localhost:4200 in a web browser
▪ You should see the Angular demo app
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 94
![Page 95: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/95.jpg)
Lab 4: Task 2
▪ Work in lab4/initial
▪ Read the README.adoc
▪ Create your own CLI based Angular app
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 95
![Page 96: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/96.jpg)
Building the Angular App
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 96
![Page 97: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/97.jpg)
Angular & TypeScript
▪ Angular is written itself in TypeScript
▪ Angular brings its own type definitions
▪ TypeScript is the recommended language to write Angular apps
▪ But you could also use JavaScript or Dart
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 97
![Page 98: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/98.jpg)
Angular App with no Styling
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 98
![Page 99: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/99.jpg)
Lab 5: Task 1▪ Open terminal in lab5/complete
▪ Invoke: npm start▪ builds everything using the Angular CLI
▪ Starts a Web server at port 4200
▪ Open http://localhost:4200 in a web browser
▪ You should see the web app with no styling
▪ Play around with it
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 99
![Page 100: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/100.jpg)
Lab 5: Task 2
▪ Work in lab5/initial
▪ Implement a small Angular app that displays a list of users and an “About” screen
▪ Add decorators, constructor and method ngOnInitin user.component.ts
▪ Add Angular markup (*ngFor etc.) in user.component.html
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 100
![Page 101: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/101.jpg)
Bootstrap
▪ www.getbootstrap.com
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 101
![Page 102: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/102.jpg)
Bootstrap Summary
▪ By Twitter
▪ HTML, CSS3, JavaScript
▪ Templates
▪ Easy to use
▪ Mobile first
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 102
![Page 103: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/103.jpg)
Bootstrap Live Demo
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 103
![Page 104: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/104.jpg)
Basic Template<!doctype html><html lang="en"><head>
<!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<title>Hello, world!</title></head><body><h1>Hello, world!</h1>
<!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script></body></html>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 104
![Page 105: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/105.jpg)
app.component.html<header>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg"><div class="container"><a class="navbar-brand" href="#">Webapp Tutorial</a><div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"><a class="nav-item nav-link" [routerLink]="['users']">Users</a><a class="nav-item nav-link" [routerLink]="['about']">About</a>
</div></div>
</div></nav>
</header>
<router-outlet></router-outlet>
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 105
![Page 106: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/106.jpg)
user.component.html<div class="container"><h4>Users</h4><table class="table table-striped table-sm">…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 106
![Page 107: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/107.jpg)
Bootstrapped Tutorial Web App
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 107
![Page 108: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/108.jpg)
Lab 6: Task 1▪ Open terminal in lab6/complete
▪ Invoke: npm start
▪ builds everything using the Angular CLI
▪ Starts a Web server at port 4200
▪ Open http://localhost:4200 in a web browser
▪ You should see the web app with Bootstrap styling
▪ Play around with it
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 108
![Page 109: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/109.jpg)
Lab 6: Task 2
▪ Work in lab6/initial
▪ Enhance index.html
▪ Use slate.css for a dark Bootstrap theme
▪ Add bootstrap css classes to
▪ app.component.html
▪ user.component.html
▪ about.component.html
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 109
![Page 110: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/110.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 110
Putting it all together
![Page 111: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/111.jpg)
Cross-Origin Resource Sharing (CORS)
From Wikipedia:
Cross-origin resource sharing (CORS) is a mechanism that enables many resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.[
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 111
![Page 112: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/112.jpg)
CORS with Angular CLI▪ Provide a file proxy.conf.json
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}
▪ Change npm start script:
"start": "ng serve --proxy-config proxy.conf.json",
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 112
![Page 113: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/113.jpg)
Angular HTTPClient
▪ The HTTPClient service uses Observables from rxjs
▪ The user service now makes an asynchronous call to the REST backend and returns an Observable
▪ The user component subscribes for changes and updates its own view model
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 113
![Page 114: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/114.jpg)
User Service with HTTPClient@Injectable()export class UsersService {
constructor(private http: HttpClient) {}
public getUsers(): Observable<User[]> {const uri = '/api/users';
return this.http.get(uri).pipe(map((response: any) => response._embedded['users']),catchError(this.handleError));
}
…
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 114
![Page 115: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/115.jpg)
UsersComponent with Subscriptionexport class UsersComponent {
private users: User[];
constructor(private usersService: UsersService) {}
ngOnInit() {this.usersService.getUsers()
.subscribe((users: User[]) => this.users = users,
error => console.error('UsersComponent: cannot get users'));
}}
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 115
![Page 116: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/116.jpg)
Live Demo
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 116
![Page 117: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/117.jpg)
Lab 7: Task 1▪ Start the Spring Boot app from lab7
▪ Open terminal in lab7/complete
▪ Invoke: npm start▪ builds everything using the Angular CLI
▪ Starts a Web server at port 4200
▪ Open http://localhost:4200 in a web browser
▪ You should see the web app▪ The user list is served by the backend service
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 117
![Page 118: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/118.jpg)
Lab 7: Task 2
▪ Implement the user service using HTTP
▪ Implement the users component with subscription
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 118
![Page 119: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/119.jpg)
Final Application
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 119
![Page 120: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/120.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 120
![Page 121: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/121.jpg)
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 121
Discussion
![Page 122: Rich Clients with Eclipse 4 - JAX London · Lab 0: Build all tutorial labs in the VM When using a VM created by Kai Everything is setup already When having created the VM yourself](https://reader035.vdocuments.site/reader035/viewer/2022070905/5f74ef826798c219656684c5/html5/thumbnails/122.jpg)
License▪ This work is licensed under a Creative Commons
Attribution 4.0 International License. ▪ See http://creativecommons.org/licenses/by/4.0/
9/20/2019 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 122