Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularとSpring bootで遊んでみる

AngularとSpring bootで遊んでみる

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

50a1ae3d2f81998c69a579daeb59f055?s=128

masanori_msl

June 24, 2017
Tweet

Transcript

  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!