AngularとSpring bootで 遊んでみる 2017.06.24 @KANJAVA PARTY

Who? Name: Masui Masanori Twitter: @masanori_msl Blog: vaguely http://mslgt.hatenablog.com/ GitHub: https://github.com/masanori840816

やりたいこと 前：Angular 後ろ：Spring boot(+Doma2+PostgreSQL) で、Webページを作る。 (情報の定期更新、ログイン、お問い合わせetc.)

Demo

Routing ボタンクリックでページ(Component)切り替え

Routing ①app.component ②main-page.component ③top-banner.component ③top-news.component ②を切り替える

app.routing.ts const appRoutes: Routes = [ { path: '', component: MainPageComponent }, { path: 'menulist', component: MenulistPageComponent }, { path: 'contact', component: ContactPageComponent }]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

ページ遷移 Home ● 「location.href=“/”」でも遷移可能だが、 ページがリロードされてしまう

サーバー側のRouting @Controller public class MainController { @RequestMapping(value = {"/", "/menulist", "/contact"}) public View redirect() { return new InternalResourceView("/index.html"); } }

Demo サーバー側からJSONを受け取って表示

サーバー側からJSONを受け取って表示 @RestController public class CrudController { @GetMapping(value = {"/topnewslist"}) public List topNewsList() { List topNewsItems = new ArrayList<>(); // 値をセット return topNewsItems;

サーバー側からJSONを受け取って表示 export class TopNewsComponent implements OnInit { newsList: TopNews[]; constructor(private http_: Http) { http_.get("/topnewslist") .map(response => response.json()) .subscribe(gotNews => this.newsList = gotNews); } }

サーバー側からJSONを受け取って表示 アイテム数分枠内の部分が繰り返し表示される

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

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; } 〜省略〜

課題 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

課題 IEがgrid-row、grid-columnのセル指定方法の 一部を対応していないため、 それを使っている箇所全てに対して警告が 表示される／(^o^)＼ (tslint.jsonをいじればいけそうだけど、ﾁｮｯﾄｷﾓﾁﾜﾙｲ)

● Typescriptなので型型してて馴染みやすい ● HTML、Script、CSS、テストが Component単位で分けられるのでシンプル ● 半年に一度のメジャーバージョン更新は不安 (ただしver.4は2018年までサポート予定) Angularを触ってみた感想

まとめ あれこれ考えず、 興味のあるものを好きなだけ取り入れて遊ぶのは 　　楽しい！

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) 参考

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) 参考

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) 参考

Thank you!