AngularとSpring bootで遊んでみる

2017.06.24のKANJAVA PartyのLT用資料です。

1. AngularとSpring bootで 遊んでみる 2017.06.24 @KANJAVA PARTY
2. Who? Name: Masui Masanori Twitter: @masanori_msl Blog: vaguely http://mslgt.hatenablog.com/ GitHub: https://github.com/masanori840816
3. やりたいこと 前：Angular 後ろ：Spring boot(+Doma2+PostgreSQL) で、Webページを作る。 (情報の定期更新、ログイン、お問い合わせetc.)
4. Demo
5. Routing ボタンクリックでページ(Component)切り替え
6. Routing ①app.component ②main-page.component ③top-banner.component ③top-news.component ②を切り替える
7. app.routing.ts const appRoutes: Routes = [ { path: '', component: MainPageComponent }, { path: 'menulist', component: MenulistPageComponent }, { path: 'contact', component: ContactPageComponent }]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
8. ページ遷移 <button routerLink="/" class="header- button">Home</button> • 「location.href=“/”」でも遷移可能だが、 ページがリロードされてしまう
9. サーバー側のRouting @Controller public class MainController { @RequestMapping(value = {"/", "/menulist", "/contact"}) public View redirect() { return new InternalResourceView("/index.html"); } }
10. Demo サーバー側からJSONを受け取って表示
11. サーバー側からJSONを受け取って表示 @RestController public class CrudController { @GetMapping(value = {"/topnewslist"}) public List<TopNews> topNewsList() { List<TopNews> topNewsItems = new ArrayList<>(); // 値をセット return topNewsItems;
12. サーバー側からJSONを受け取って表示 export class TopNewsComponent implements OnInit { newsList: TopNews[]; constructor(private http_: Http) { http_.get("/topnewslist") .map(response => response.json()) .subscribe(gotNews => this.newsList = gotNews); } }
13. サーバー側からJSONを受け取って表示 <section id='top-news-area' *ngFor='let news of newsList'> <div class='top-news-item-area'> <div class='top-news-item-date'>{{news.createdDate}}</div> <div class='top-news-item-title'>{{news.title}}</div> <div class='top-news-item-article'>{{news.article}}</div> </div> </section> アイテム数分枠内の部分が繰り返し表示される
14. CSS Grid Layout .top-news-item-area{ display: grid; /* Grid layoutを有効にする */ /* 左から順に1行目、2行目の高さを指定 */ grid-template-rows: 50px 100px; /* 左から順に1列目、2列目の幅を指定 */ grid-template-columns: 20% 1fr; }
15. CSS Grid Layout .top-news-item-date{ /* 1行目から3行目まで(つまり2行全て)を指定する */ grid-row: 1 / 3; /* 1列目から2列目まで(つまり1列目)を指定する */ Grid-column: 1 / 2; border: 1px solid #000; } 〜省略〜
16. 課題 WARNING in ./src/app/top-news/top-news.component.css (Emitted value instead of an instance of Error) autoprefixer: /home/XXX/AnimeCrudSample/anime-crud-sample/src/app/top- news/top-news.component.css:20:5: IE supports only grid-row with / and span. You should add grid: false option to Autoprefixer and use some JS grid polyfill for full spec support @ ./src/app/top-news/top-news.component.ts 33:17-52 @ ./src/app/app.module.ts @ ./src/main.ts @ multi ./src/main.ts
17. 課題 IEがgrid-row、grid-columnのセル指定方法の 一部を対応していないため、 それを使っている箇所全てに対して警告が 表示される／(^o^)＼ (tslint.jsonをいじればいけそうだけど、ﾁｮｯﾄｷﾓﾁﾜﾙｲ)
18. • Typescriptなので型型してて馴染みやすい • HTML、Script、CSS、テストが Component単位で分けられるのでシンプル • 半年に一度のメジャーバージョン更新は不安 (ただしver.4は2018年までサポート予定) Angularを触ってみた感想
19. まとめ あれこれ考えず、 興味のあるものを好きなだけ取り入れて遊ぶのは 　　楽しい！
20. Angular Tutorial: Tour of Heroes with Angular-CLI (https://github.com/ng-japan/hands-on/tree/master/courses/tutorial) Angular 2 Cookbook - O'Reilly Media (http://shop.oreilly.com/product/9781785881923.do) Routing & Navigation -Angular (https://angular.io/guide/router) 参考
21. Spring bootr はじめての Spring Boot (https://www.kohgakusha.co.jp/books/detail/978-4-7775-1969-9) InternalResourceView (Spring Framework 4.3.9.RELEASE API) (http://docs.spring.io/spring-framework/docs/current/javadoc- api/org/springframework/web/servlet/view/InternalResourceView.html) Natural routes with path variables in spring-boot modular project does not work · Issue #68 · spring-guides/tut-spring-security-and-angular-js · GitHub (hhttps://github.com/spring-guides/tut-spring-security-and-angular- js/issues/68#issuecomment-187675742) 参考
22. CSS Grid Layout CSS グリッドレイアウト - CSS – MDN (https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout) グリッド レイアウト (Windows) - msdn.aspx (https://msdn.microsoft.com/ja-jp/library/hh673533(v=vs.85).aspx) CSS Grid Layout Module Level 1 (https://www.w3.org/TR/css-grid-1/) CSS Grid Layout を極める！（基礎編） - Qiita (http://qiita.com/kura07/items/e633b35e33e43240d363) 参考
23. Thank you!