{"id":20031072,"url":"https://github.com/yosh1/angular-material-pwa","last_synced_at":"2026-05-13T19:34:04.150Z","repository":{"id":92918173,"uuid":"177434867","full_name":"yosh1/angular-material-pwa","owner":"yosh1","description":"This is the angular application that uses angular-material and pwa.","archived":false,"fork":false,"pushed_at":"2020-01-11T07:54:20.000Z","size":147,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-02T05:24:27.575Z","etag":null,"topics":["angular","angular-material","pwa","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yosh1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-24T15:43:38.000Z","updated_at":"2019-03-26T11:06:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"f9125ab6-2346-4b79-aee2-e9ddcd592a3b","html_url":"https://github.com/yosh1/angular-material-pwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yosh1/angular-material-pwa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosh1%2Fangular-material-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosh1%2Fangular-material-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosh1%2Fangular-material-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosh1%2Fangular-material-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yosh1","download_url":"https://codeload.github.com/yosh1/angular-material-pwa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosh1%2Fangular-material-pwa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32997719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","pwa","typescript"],"created_at":"2024-11-13T09:30:19.054Z","updated_at":"2026-05-13T19:34:04.133Z","avatar_url":"https://github.com/yosh1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular\n\n---\n\n## Run\n\n```\n$ git clone {url}\n$ cd {project_dir}\n$ npm install -g @angular/cli\n$ npm install\n$ ng serve\n```\n\n---\n\n## 使用ライブラリ、フレームワーク\n\n```\n\nPackage                           Version\n------------------------------------------------\nangular CLI                       7.1.4\nnode                              10.11.0\nangular                           7.1.4\n@angular-devkit/architect         0.11.4\n@angular-devkit/build-angular     0.13.6\n@angular-devkit/build-optimizer   0.13.6\n@angular-devkit/build-webpack     0.13.6\n@angular-devkit/core              7.1.4\n@angular-devkit/schematics        7.1.4\n@angular/cdk                      7.3.5\n@angular/compiler                 7.2.10\n@angular/compiler-cli             7.2.10\n@angular/flex-layout              7.0.0-beta.24\n@angular/material                 7.3.5\n@ngtools/webpack                  7.3.6\n@schematics/angular               7.1.4\n@schematics/update                0.11.4\nrxjs                              6.3.3\ntypescript                        3.1.6\nwebpack                           4.29.0\n```\n\n---\n\n## 手順\n### Angularをグローバルインストール\n\n```\n$ npm install -g @angular/cli\n```\n\n### プロジェクトを作成\n\n```\n$ ng new {project_name} --routing\n$ cd {project_name}\n```\n\n###  Angular Materialをインストール\n\n```\n$ npm install --save @angular/material \\\n                     @angular/cdk \\\n                     @angular/animations\n```\n\n### Angular Materialをインポート\n\n`./src/app/app.module.ts` に\n\n```\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatButtonModule,\n         MatCheckboxModule,\n         MatSidenavModule,\n         MatToolbarModule,\n         MatIconModule,\n         MatListModule,\n         MatCardModule,\n         MatTableModule } from '@angular/material';\n```\n\nBrowserAnimationModule,\n[MatButtonModule](https://material.angular.io/components/button/overview)、[MatCheckboxModule](https://material.angular.io/components/checkbox/overview)をインポート。\nngModuleには\n\n```\nBrowserAnimationsModule,\nMatButtonModule,\nMatCheckboxModule,\nMatSidenavModule,\nMatToolbarModule,\nMatIconModule,\nMatListModule,\nMatCardModule,\nMatTableModule\n```\n\nを追加。\n\n### SCSSをインポート\n\n`./src/styles.scss` に\n```\n@import \"~@angular/material/prebuilt-themes/indigo-pink.css\";\n```\n\nを追加。\n\n[prebuilt-themes](https://material.angular.io/guide/theming#defining-a-custom-theme)から選ぶことも、自分でテーマをビルドすることもできる。\n\n### [Hammer.js](http://hammerjs.github.io/) をインストール\n\n```\n$ npm install --save hammerjs\n```\n\n### Hammer.jsをインポート\n\nこれは `./src/app/app.module.ts` ではなく、 `./src/main.ts` に\n\n```\nimport 'hammerjs';\n```\n\nを追加。\n\n### マテリアルアイコンを読み込み\n\n`./src/index.html` にMaterial IconをCDNで読み込む。\n\n```:CSS\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\n### Angular Flexboxを追加\n\n```\n$ npm install @angular/flex-layout \\\n              rxjs-compat \\\n              @angular/compiler@7.2.10 \\\n              ajv@^6.9.1\n```\n\n### Angular Flexboxを読み込み\n`./src/app/app.module.ts` に\n\n```\nimport { FlexLayoutModule } from '@angular/flex-layout';\n```\n\nをインポート。NgModuleには\n\n```\nFlexLayoutModule\n```\n\nを追加。\n\n### Normalize.cssをインストール\n\n```\n$ npm install normalize.css\n```\n\n### Normalize.cssを読み込み\n`angular.json`の`styles`で`style.scss`を読み込んでいる部分の上に\n\n```\n\"node_modules/normalize.css/normalize.css\"\n```\nを追加。\n\n\n### コンポーネントを作成\n\nコンポーネント `HelloComponent` と `BoardComponent` をアプリケーションに定義する。\n\n```\n$ ng g c hello --module app.module\n$ ng g c board --module app.module\n```\n\nなぜ `--module app.module` をつけるかというと、Angular CLIがターゲットのモジュールを自動的に識別できないようにする`material.module`という別のモジュールがあるため。\n\n### Hello.component.html を編集\n\n```\n\u003cdiv style=\"text-align:center\"\u003e\n  \u003ch1\u003eHi!\u003c/h1\u003e\n  \u003cp\u003e\n    This is the HelloComponent!\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### ルートを作成\n\n複数のコンポーネントにアクセスできるように、ルートを定義する必要がある。\n\n`src/app` に `app.routes.ts` を作成し、\n\n```\nimport { NgModule} from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { HelloComponent } from './hello/hello.component';\nimport { BoardComponent } from './board/board.component';\n\nconst routes: Routes = [\n  {path: '', component: HelloComponent},\n  {path: 'board', component: BoardComponent}\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRouters {}\n```\n\nを追加する。\n\nここでは`HelloComponent`,`BoardComponent`を定義している。\n\nこれにより、`http://localhost:4200`にアクセスすると`HelloComponent`を表示し、`http://localhost:4200/board`にアクセスすると`BoardComponent`を表示する。\n\n### `app.component.html` からコンポーネントへのリンクを追加する。\n\n該当アイテムに対して `routerLink=\"/\"`、`routerLink=\"/board\"`を追加。\n\n### AppRouterをインポート\n\n`app.module.ts` に\n\n```\nimport {AppRouters} from './app.routes';\n```\n\nを。importsに`AppRouters`を追加する。\n\n\n### インスタンスを表すインターフェースを定義\n`src/app/Post.ts` を作成し、\n\n```\nexport interface Post {\n  title: string;\n  category: string;\n  date_posted: Date;\n  position: number;\n  body: string;\n}\n```\n\nを追加する。\n\nこれで、このインタフェースを使ってデータサービスを構築する。\n\n### サービスを作成する\n\n```\n$ ng g s data/data --module app.module\n```\n\nを実行する。\n作成した`data.service.ts`を\n\n```\nimport {Injectable} from '@angular/core';\nimport {Post} from '../Post';\nimport {Observable, of} from 'rxjs';\n\n@Injectable()\nexport class DataService {\n\n  ELEMENT_DATA: Post[] = [\n    {position: 0, title: 'Post One', category: 'Web Development', date_posted: new Date(), body: 'Body 1'},\n    {position: 1, title: 'Post Two', category: 'Android Development', date_posted: new Date(), body: 'Body 2'},\n    {position: 2, title: 'Post Three', category: 'IOS Development', date_posted: new Date(), body: 'Body 3'},\n    {position: 3, title: 'Post Four', category: 'Android Development', date_posted: new Date(), body: 'Body 4'},\n    {position: 4, title: 'Post Five', category: 'IOS Development', date_posted: new Date(), body: 'Body 5'},\n    {position: 5, title: 'Post Six', category: 'Web Development', date_posted: new Date(), body: 'Body 6'},\n  ];\n  categories = [\n    {value: 'Web-Development', viewValue: 'Web Development'},\n    {value: 'Android-Development', viewValue: 'Android Development'},\n    {value: 'IOS-Development', viewValue: 'IOS Development'}\n  ];\n\n  constructor() {\n  }\n\n  getData(): Observable\u003cPost[]\u003e {\n    return of\u003cPost[]\u003e(this.ELEMENT_DATA);\n  }\n\n  getCategories() {\n    return this.categories;\n  }\n\n  addPost(data) {\n    this.ELEMENT_DATA.push(data);\n  }\n\n  deletePost(index) {\n    this.ELEMENT_DATA = [...this.ELEMENT_DATA.slice(0, index), ...this.ELEMENT_DATA.slice(index + 1)];\n  }\n\n  dataLength() {\n    return this.ELEMENT_DATA.length;\n  }\n}\n```\nに置き換える。\n\n### データサービスの確認\n\nデータサービスには、2つの異なる配列がある。\nそれは、投稿のカテゴリを格納するための配列とブログの投稿を格納するための配列。\n\nまた、 `app.module.ts`ファイルの新しいProviderにDataServiceクラスを含まなければならない。\nまずDataServiceをインポートし、\n```\nimport {DataService} from './data/data.service';\n```\n\nngModuleには\n```\nproviders: [DataService],\n```\nを追加する。\n\nこれでデータサービスを利用してデータを表示、ボードを更新することができる。\n\n`Board.component.ts`を次のコードに置き換える。\n\n```\nimport {Component} from '@angular/core';\nimport {DataService} from '../data/data.service';\nimport {Post} from '../Post';\nimport {DataSource} from '@angular/cdk/table';\nimport {Observable} from 'rxjs/Observable';\n\n@Component({\n  selector: 'app-board',\n  templateUrl: './board.component.html',\n  styleUrls: ['./board.component.scss']\n})\nexport class BoardComponent {\n  constructor(private dataService: DataService) {\n  }\n\n  displayedColumns = ['date_posted', 'title', 'category', 'delete'];\n  dataSource = new PostDataSource(this.dataService);\n}\n\nexport class PostDataSource extends DataSource\u003cany\u003e {\n  constructor(private dataService: DataService) {\n    super();\n  }\n\n  connect(): Observable\u003cPost[]\u003e {\n    return this.dataService.getData();\n  }\n\n  disconnect() {\n  }\n}\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosh1%2Fangular-material-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyosh1%2Fangular-material-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosh1%2Fangular-material-pwa/lists"}