Sabre academy Wstęp do Angular.js I Spring Boot Michał Łoza
O mnie Sabre Student Softwaree Engineer in Test Projekt Intel Exchange Pracuję od 1,5 roku Student Na wydziale IET AGH Informatyka i Telekomunikacja Aktualnie na V roku
Agenda Technologie – szybki wstęp Angular.JS Spring Boot 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 Technologie: maven, rest, ioc, di
Wstęp
ANGULAR.JS Framework JS OpenSource: https://github.com/angular/angular.js Pozwala oddzielić warstwę logiki od prezentacji
Spring Framework Java Wiele komponentów ułatwiających programowanie MVC 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.
Spring boot Brak XML Szybki start Embedded Tomcat Autokonfiguracja
MAVEN Automatyzacja budowania aplikacji w JAVIE Automatyczne pobieranie bibliotek Wtyczki rozszerzające możliwości Mavena Definicja właściwości projektu w pom.xml (project object model) Podobne: ant, make
Angular.js
Przykład I – Data Binding <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Angular example 1</title> <script src="../common/js/angular.min.js"></script> </head> <body> <div> <h1>Task list!</h1> <label>Search:</label> <input type="text" ng-model="searchPhrase"/>{{searchPhrase}} <br><br> <ul> <li></li> </ul> </div> </body> </html>
Przykład II - Filtry <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Angular example 1</title> <script src="../common/js/angular.min.js"></script> </head> <body ng-init="taskList=['Show presentation', 'Learn Angular', 'Do shopping']"> <div> <h1>Task list!</h1> <label>Search:</label> <input type="text" ng-model="searchPhrase"/> {{ searchPhrase }} <br><br> <ul> <li ng-repeat="task in taskList | filter:searchPhrase">{{ task }}</li> </ul> </div> </body> </html>
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 }, {…} ] });
Przykład III – Moduły i kontrolery <html ng-app="taskListApp"> <script src="../common/js/angular-locale_pl-pl.js"></script> <div ng-controller="taskListController as tlc"> <input type="text" ng-model="searchPhrase.name"/> <table> <tr> <th>Done</th> <th>Id</th> <th>Name</th> <th>Description</th> </tr> <tr ng-repeat="task in tlc.taskList | filter:searchPhrase"> <td><input type="checkbox" ng-checked="task.done"/></td> <td>{{ task.id }}</td> <td>{{ task.name }}</td> <td>{{ task.description }}</td> <td>{{ task.budget | currency }}</td> </tr> </table> </div>
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' }) });
Spring Boot
Plik POM <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.1.9.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
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); } }
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); } } Pokazać endpointy z actuatora: trace beans health dump
Widoki <dependency> <groupId>com.lyncode</groupId> <artifactId>jtwig-spring</artifactId> <version>2.1.7</version> </dependency> @Configuration public class AppConf { @Bean public ViewResolver viewResolver() { JtwigViewResolver viewResolver = new JtwigViewResolver(); viewResolver.setPrefix("classpath:views/"); viewResolver.setSuffix(".twig"); return viewResolver; } } @EnableAutoConfiguration @Controller @ComponentScan 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ą
Baza dancyh <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> @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ę
Baza danych II 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); public interface TaskRepository extends CrudRepository<Task, Long> { public List<Task> findByDone(Boolean done); @Query("select t from Task t where t.description like %?1%") public List<Task> 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ć. @RunWith(SpringJUnit4ClassRunner.class) @SpringApplicationConfiguration(classes = ApplicationReady.class) public class TaskRepositoryTest { @Autowired TaskRepository repository; @Test public void testFindEntitiesWithDoInDescription() throws Exception { List<Task> aDo = repository.getByDescriptionLike("Do"); assertThat(aDo.size(), equalTo(2)); } }
REST WS @org.springframework.web.bind.annotation.RestController @RequestMapping("/task") public class RestController { @Autowired TaskRepository taskRepository; @RequestMapping(method = RequestMethod.GET) @ResponseBody public Iterable<Task> 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); } }
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<Task> 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())); } }
Angular.js + Spring Boot
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ą
Podsumowanie
Aplikacja Podsumowanie Dodać przykład z listą i iteracją Spring Boot Backend 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ą
Dziękuję! Pytania?