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: 5.555 }, {…} ] });

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 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 @EnableAutoConfiguration @Controller public class ApplicationReady { @RequestMapping("/") @ResponseBody String home() { return "Hello World!"; } public static void main(String[] args) { SpringApplication.run(ApplicationReady.class, args); } }

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

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

20 BAZA DANCYH @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; } 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 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")); @RunWith(SpringJUnit4ClassRunner.class) @SpringApplicationConfiguration(classes = ApplicationReady.class) public class TaskRepositoryTest { @Autowired TaskRepository repository; @Test 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', 100.00, 1); Insert into task(name, description, budget, done) values('Task 2', 'Description of task 2 Do', 100.00, 1); Insert into task(name, description, budget, done) values('Task 3', 'Description of task 3 Do', 50.00, 0);

22 REST WS @org.springframework.web.bind.annotation.RestController @RequestMapping("/task") public class RestController { @Autowired TaskRepository taskRepository; @RequestMapping(method = RequestMethod.GET) @ResponseBody public Iterable getAllTasks() { return taskRepository.findAll(); } @RequestMapping(method = RequestMethod.POST) @ResponseBody public Task addTask(@RequestBody Task task) { return taskRepository.save(task); } @RequestMapping(value="{id}", method = RequestMethod.GET) @ResponseBody public Task getTasks(@PathVariable("id") Long id) { return taskRepository.findOne(id); } @RequestMapping(value="{id}", method = RequestMethod.DELETE) @ResponseBody public void deleteTasks(@PathVariable("id") Long id) { taskRepository.delete(id); } }

23 REST WS II @RunWith(SpringJUnit4ClassRunner.class) @SpringApplicationConfiguration(classes = ApplicationReady.class) @WebAppConfiguration @IntegrationTest("server.port:0") 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 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