ag-grid使ってみた
ag-gridとは
JavaScriptのライブラリで表を作成できます。
事前準備
ag-gridを使用するプロジェクトの準備
ng new testでプロジェクトを作成します- 作成した
testフォルダに移動します ng generate component ag-grid-sampleでag-gridを使うコンポーネントを作成しておきます
必要なパッケージのインストール
以下のコマンドでインストールします。
npm install ag-grid npm install ag-grid-angular npm install ag-grid-community
使うまでに準備すること
angular-cli.jsonに以下の2つのCSSファイルを追記します。
"apps": [ { "styles": [ "./node_modules/ag-grid/dist/styles/ag-grid.css", "./node_modules/ag-grid/dist/styles/theme-fresh.css" ],
'app.module.ts'のNgModeleの'imports'に'AgGridModule.withComponents()'を追記します。 ()の中身は特に書かなくても動くみたいなので特に書かないでおきます。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { AgGridSampleComponent } from './ag-grid-sample/ag-grid-sample.component'; import { AgGridModule } from 'ag-grid-angular'; @NgModule({ declarations: [ AppComponent, AgGridSampleComponent ], imports: [ BrowserModule, AppRoutingModule, AgGridModule.withComponents([]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
使ってみた
app.component.ts
【Angular】*ngForとは
最近、Angularのテンプレートとして以下のサンプルコードを見たが、ぱっと分からず戸惑ったので少しまとめようと思う。
<h1>Users</h1> <table> <tr><th>Id</th><th>Name</th><th>Email</th></tr> <tr *ngFor="let user of users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.email}}</td> </tr> </table>
抜粋「Angular入門 - リストを表示する」
https://www.tohoho-web.com/ex/angular.html#display-list
ngForとはテンプレート内で繰り返し処理を行うためのディレクティブです。 ngForではfor-of構文を用いて繰り返し処理を行える。
ついでに
ディレクティブって何やねん
テンプレートから実際のHTMLを作成する際に、HTMLの作成方法を指定するために使うもの。
【Angular】exportとは
exportとは
プログラムを複数のファイルに分割したモジュールと呼ばれるものを作る際に使われるキーワード。 .tsファイルでexportを付けるとモジュール化できる。Exportできるものには以下がある。
- インタフェース
- クラス
- 関数
- 変数
使い方としてはクラスなどを宣言する際に使用し、定義済みのオブジェクトを後からexportするという使い方はしない。
Spring FrameworkのDIとは何か
Dependency Injectionの基本
Springの基本技術の1つ。Springへの理解を深めるならDIは欠かせないぞ。 DIはBeanを利用するための機能なので、理解があやふやな方はBeanの復習から始めましょう。
Beanクラスを作成する
ごく簡単なBeanクラスのサンプルとして「MyBean」を作成することにしましょう。
Spring BootとThymeleafでWebアプリ制作
Spring Bootとは
JavaのフレームワークであるSpring FrameworkでWebアプリを簡単に作成できるように作られたフレームワーク
プロジェクト作成
- 依存性：
- 「Thymeleaf」を選択
- 「Spring Web」を選択（これを選択しないとmvcに必要な機能が使えない。RequestMappingとか）
コントローラとテンプレートの作成
以下2つのファイルを作成します。
package com.sample; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller @RequestMapping("/sample") public class SampleController { @RequestMapping(method = RequestMethod.GET) public String test(Model model) { model.addAttribute("name", "草刈"); model.addAttribute("get", "GET /sample"); model.addAttribute("post", "POST /sample"); return "sample/index"; } }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>top page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h2 th:text="${name}"></h2> <p th:text="${get}" /> <p th:text="${post}" /> </body> </html>
以下のURLにアクセスすると結果がブラウザに表示されます。 http://localhost:8080/sample
Spring Bootで簡単なマイクロサービスを作る
マイクロサービスとは
従来のように一つのアプリケーションに全ての機能を詰め込むやり方ではなく、複数の小さなサービスに分割してそれらのサービスを連携させながら動かす。
Spring Bootとは
JavaのフレームワークであるSpring FrameworkでWebアプリを開発しやすくしたフレームワーク。実行ファイルにWebコンテナ(tomcatやjetty)が含まれるため、別途Webサーバを用意しなくても1つのアプリケーションとして実行することができます。
サービスの作成
プロジェクトの作成
- [Spring Starter Project]を選択します。
- プロジェクトの名前やパッケージを決めたら、「Next」をクリックします。
- Dependenciesの設定へ移るので、「Spring Web」にチェックを入れます。
ソースの編集
生成されたJavaソースファイルを編集します。
package com.microservice; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class TestserviceApplication { public static void main(String[] args) { SpringApplication.run(TestserviceApplication.class, args); } }
ブラウザで以下のURLにアクセスするとjsonが表示されるのが確認できます。 http:/http://localhost:8080/
アクセス後には以下の画面がブラウザに表示されます。
