1 Sabre academy Wstęp do Angular.js I Spring BootMichał Łoza

2 O mnie Sabre Student Softwaree Engineer in Test Projekt Intel ExchangePracuję od 1,5 roku Student Na wydziale IET AGH Informatyka i Telekomunikacja Aktualnie na V roku

3 Agenda Technologie – szybki wstęp Angular.JS Spring BootDyrektywy, filtry, data binding Moduły i kontrolery Widoki i Routing Spring Boot MVC Baza danych, modele i repozytoria REST webservice Przykład połączenia tych technologii Podumowanie, Q&A Technologie: maven, rest, ioc, di

4 Wstęp

5 ANGULAR.JS Framework JS OpenSource: https://github.com/angular/angular.js Pozwala oddzielić warstwę logiki od prezentacji

6 Spring Framework Java Wiele komponentów ułatwiających programowanieMVC Spring JPA REST Webservices Testing Wiele innych… Udostępnia wiele rzeczy. Kontener IoC. Dodatkowy przykład: systemy autoryzacji. Różne implementacje zależnie od konfiguracji możemy wstrzyknąć inną implementację. Pozostałe wymienić i powiedzieć że pokażę jak wygląda użycie ich w spring boocie.

7 Spring boot Brak XML Szybki start Embedded Tomcat Autokonfiguracja

8 MAVEN Automatyzacja budowania aplikacji w JAVIEAutomatyczne pobieranie bibliotek Wtyczki rozszerzające możliwości Mavena Definicja właściwości projektu w pom.xml (project object model) Podobne: ant, make

9 Angular.js

10 Przykład I – Data Binding

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/3641300/11/images/10/Przyk%C5%82ad+I+%E2%80%93+Data+Binding.jpg", "name": "Przykład I – Data Binding", "description": " Angular example 1 Task list! Search: {{searchPhrase}} ", "width": "800" }

11 Przykład II - Filtry

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/3641300/11/images/11/Przyk%C5%82ad+II+-+Filtry.jpg", "name": "Przykład II - Filtry", "description": " Angular example 1 Task list! Search: {{ searchPhrase }} {{ task }} ", "width": "800" }

12 Przykład III – Moduły i kontroleryvar app = angular.module('taskListApp', []); app.controller('taskListController', function($scope) { this.taskList = [ {id: 1, name: "Do shopping", description: "Buy milk & coffe", done: false, budget: }, {…} ] });

13 Przykład III – Moduły i kontrolery

{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/3641300/11/images/13/Przyk%C5%82ad+III+%E2%80%93+Modu%C5%82y+i+kontrolery.jpg", "name": "Przykład III – Moduły i kontrolery", "description": " Done Id Name Description {{ task.id }} {{ task.name }} {{ task.description }} {{ task.budget | currency }} ", "width": "800" }

14 Przykład IV – Widoki i routerapp.config(function ($routeProvider) { $routeProvider.when("/", { controller: 'taskListController', templateUrl: 'views/task-ready.html' }).when("/details/:id", { controller: 'taskDetailsController', templateUrl: 'views/details-ready.html' }) });

15 Spring Boot

16 Plik POM org.springframework.boot spring-boot-starter-parent 1.1.9.RELEASE org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-actuator org.springframework.boot spring-boot-maven-plugin

17 Hello World public class ApplicationReady { @RequestMapping("/") @ResponseBody String home() { return "Hello World!"; } public static void main(String[] args) { SpringApplication.run(ApplicationReady.class, args); } }

18 Hello World public class ApplicationReady { @RequestMapping("/") @ResponseBody String home() { return "Hello World!"; } public static void main(String[] args) { SpringApplication.run(ApplicationReady.class, args); } } Pokazać endpointy z actuatora: trace beans health dump

19 Widoki com.lyncode jtwig-spring 2.1.7 @Configuration public class AppConf { @Bean public ViewResolver viewResolver() { JtwigViewResolver viewResolver = new JtwigViewResolver(); viewResolver.setPrefix("classpath:views/"); viewResolver.setSuffix(".twig"); return viewResolver; } } @EnableAutoConfiguration public class ApplicationReady { @RequestMapping("/") public ModelAndView home() { ModelAndView modelAndView = new ModelAndView("index"); modelAndView.addObject("greetings", "Hello World!"); return modelAndView; } } Dodać przykład z listą i iteracją

20 Baza dancyh org.springframework.boot spring-boot-starter-data-jpa com.h2database h2 org.springframework.boot spring-boot-starter-test @Entity public class Task implements Serializable { @GeneratedValue @Id private Long id; @Column private String name; @Column @Lob private String description; @Column private Double budget; @Column private Boolean done; } Dla prostoty h2, w pamięci, czyszczona po restarcie. Spring data jpa do operacji związanych z bazą, test do testowania, pokazane będzie za chwilę

21 Baza danych II Insert into task(name, description, budget, done) values('Task 1', 'Description of task 1', , 1); Insert into task(name, description, budget, done) values('Task 2', 'Description of task 2 Do', , 1); Insert into task(name, description, budget, done) values('Task 3', 'Description of task 3 Do', 50.00, 0); public interface TaskRepository extends CrudRepository { public List findByDone(Boolean done); @Query("select t from Task t where t.description like %?1%") public List getByDescriptionLike(String search); } Task task = new Task().withBudget(123.00).withDone(true).withName("Added task").withDescription("Description"); taskRepository.save(task); modelAndView.addObject("allTasks", taskRepository.findAll()); modelAndView.addObject("allDoneTasks", taskRepository.findByDone(true)); modelAndView.addObject("allTasksWithDo", taskRepository.getByDescriptionLike("Do")); Wstawiamy jakieś dane do bazy, Budujemy repozytorium z tymi danymi, użycie tych danych, test który pokazuje jak tego użyć. = ApplicationReady.class) public class TaskRepositoryTest { @Autowired TaskRepository repository; @Test public void testFindEntitiesWithDoInDescription() throws Exception { List aDo = repository.getByDescriptionLike("Do"); assertThat(aDo.size(), equalTo(2)); } }

22 REST WS public class RestController { @Autowired TaskRepository taskRepository; @RequestMapping(method = RequestMethod.GET) @ResponseBody public Iterable getAllTasks() { return taskRepository.findAll(); } @RequestMapping(method = RequestMethod.POST) @ResponseBody public Task Task task) { return taskRepository.save(task); } @RequestMapping(value="{id}", method = RequestMethod.GET) @ResponseBody public Task Long id) { return taskRepository.findOne(id); } @RequestMapping(value="{id}", method = RequestMethod.DELETE) @ResponseBody public void Long id) { taskRepository.delete(id); } }

23 REST WS II public class TaskRepositoryTest { @Autowired TaskRepository repository; @Value("${local.server.port}") int port; String endpoint; RestTemplate restTemplate = new RestTemplate(); @Before public void before() { repository.deleteAll(); endpoint = "http://localhost:"+port+"/task"; } @Test public void testCreateEntity() throws Exception { Task request = new Task().withBudget(100.3).withName("Task 1").withDone(true).withDescription("Task 1 description"); Task response = restTemplate.postForObject(endpoint, request, Task.class); Iterable all = repository.findAll(); assertThat(Iterables.size(all), equalTo(1)); Task fromDb = Iterables.getOnlyElement(all); assertThat(response.getId(), equalTo(fromDb.getId())); assertThat(response.getName(), equalTo(fromDb.getName())); assertThat(response.getName(), equalTo(request.getName())); } }

24 Angular.js + Spring Boot

25 Servisy Angular.JS app.factory('taskService', function ($http) { return { getAllTasks: function () { return $http.get("/task"); }, getTask: function (id) { return $http.get("/task/" + id); }, deleteTask: function (id) { return $http.delete("/task/" + id); }, createTask: function (task) { return $http.post("/task", task); } } }); app.controller('taskDetailsController', ['$scope', '$routeParams', 'taskService', function ($scope, $routeParams, taskService) { var id = $routeParams.id; taskService.getTask(id).success(function(data) { $scope.task = data; }); }]); Dodać przykład z listą i iteracją

26 Podsumowanie

27 Aplikacja Podsumowanie Dodać przykład z listą i iteracją Spring BootBackend Rest WS MVC Komunikacja z bazą danych Angular.JS Frontend Data Binding Filtry, Routing Widoki, Kontrolery Komunikacja RestWS WebSockets Aplikacja Dodać przykład z listą i iteracją

28 Dziękuję! Pytania?