Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

M ICHAŁ Ł OZA SABRE ACADEMY WSTĘP DO ANGULAR.JS I SPRING BOOT.

Podobne prezentacje


Prezentacja na temat: "M ICHAŁ Ł OZA SABRE ACADEMY WSTĘP DO ANGULAR.JS I SPRING BOOT."— Zapis prezentacji:

1 M ICHAŁ Ł OZA SABRE ACADEMY WSTĘP DO ANGULAR.JS I SPRING BOOT

2 S ABRE Softwaree Engineer in Test Projekt Intel Exchange Pracuję od 1,5 roku S TUDENT Na wydziale IET AGH Informatyka i Telekomunikacja Aktualnie na V roku O MNIE

3 AGENDA Technologie – szybki wstęp Angular.JS – Dyrektywy, 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

4 W STĘP

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

6 SPRING Framework Java Wiele komponentów ułatwiających programowanie – MVC – Spring JPA – REST Webservices – Testing – Wiele innych…

7 B RAK XML S ZYBKI START E MBEDDED T OMCAT A UTOKONFIGURACJA SPRING BOOT

8 A UTOMATYZACJA BUDOWANIA APLIKACJI W JAVIE A UTOMATYCZNE POBIERANIE BIBLIOTEK W TYCZKI ROZSZERZAJĄCE MOŻLIWOŚCI M AVENA D EFINICJA WŁAŚCIWOŚCI PROJEKTU W POM. XML ( PROJECT OBJECT MODEL ) MAVEN

9 A NGULAR. JS

10 PRZYKŁAD I – DATA BINDING

11 PRZYKŁAD II - FILTRY

12 PRZYKŁAD III – MODUŁY I KONTROLERY var 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 Done Id Name Description {{ task.id }} {{ task.name }} {{ task.description }} {{ task.budget | currency }}

14 PRZYKŁAD IV – WIDOKI I ROUTER app.config(function ($routeProvider) { $routeProvider.when("/", { controller: 'taskListController', templateUrl: 'views/task-ready.html' }).when("/details/:id", { controller: 'taskDetailsController', templateUrl: 'views/details-ready.html' }) });

15 S PRING B OOT

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

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

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

19 WIDOKI com.lyncode jtwig-spring public class AppConf public ViewResolver viewResolver() { JtwigViewResolver viewResolver = new JtwigViewResolver(); viewResolver.setPrefix("classpath:views/"); viewResolver.setSuffix(".twig"); return viewResolver; } }

20 BAZA public class Task implements private Long private private String private Double private Boolean done; } org.springframework.boot spring-boot-starter-data-jpa com.h2database h2 org.springframework.boot spring-boot-starter-test

21 BAZA DANYCH II public interface TaskRepository extends CrudRepository { public List findByDone(Boolean 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)); = ApplicationReady.class) public class TaskRepositoryTest TaskRepository public void testFindEntitiesWithDoInDescription() throws Exception { List aDo = repository.getByDescriptionLike("Do"); assertThat(aDo.size(), equalTo(2)); } } 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);

22 public class RestController TaskRepository = public Iterable getAllTasks() { return taskRepository.findAll(); = public Task Task task) { return taskRepository.save(task); method = public Task Long id) { return taskRepository.findOne(id); method = public void Long id) { taskRepository.delete(id); } }

23 REST public class TaskRepositoryTest TaskRepository int port; String endpoint; RestTemplate restTemplate = new public void before() { repository.deleteAll(); endpoint = "http://localhost:"+port+"/task"; 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 A NGULAR. JS + S PRING B OOT

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; }); }]);

26 P ODSUMOWANIE

27 Spring Boot Backend Rest WS MVC Komunikacja z bazą danych Angular.JS Frontend Data Binding Filtry, Routing Widoki, Kontrolery Komunikacja RestWS WebSocketsAplikacja

28 DZIĘKUJĘ! Pytania?


Pobierz ppt "M ICHAŁ Ł OZA SABRE ACADEMY WSTĘP DO ANGULAR.JS I SPRING BOOT."

Podobne prezentacje


Reklamy Google