AngularとSpring bootで遊んでみる

2017.06.24 @KANJAVA PARTY

Who?Name: Masui MasanoriTwitter: @masanori_mslBlog: 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.tsconst appRoutes: Routes = [ { path: '', component: MainPageComponent }, { path: 'menulist', component: MenulistPageComponent }, { path: 'contact', component: ContactPageComponent }];export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

ページ遷移

<button routerLink="/" class="header-button">Home</button>

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

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

Demo

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

サーバー側からJSONを受け取って表示@RestControllerpublic class CrudController { @GetMapping(value = {"/topnewslist"}) public List<TopNews> topNewsList() { List<TopNews> 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を受け取って表示<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>アイテム数分枠内の部分が繰り返し表示される

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を触ってみた感想

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

　　楽しい！

AngularTutorial: 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 LayoutCSS グリッドレイアウト - 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!