Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@SOhtsu

Angular Materialを利用するためのAngular5用初期セットプロジェクト

More than 3 years have passed since last update.

ng5-material-initial Angular Materialを利用するためのAngular5用初期セットプロジェクト

MIT License

ng5-material-initial はAngular5でAngular Meterialを利用したいと考えているプログラマのための簡単初期設定プロジェクトです。

ビデオ解説
https://www.youtube.com/watch?v=ttLh47qv9pk&index=5&list=PLnz0htr2-sW-ybtqrAhSskPqxic7hjxOa

全ソース(追加モジュールなし)
https://github.com/Ohtsu/ng5-material-initial

全ソース(ボタンモジュールのみを追加したもの)
https://github.com/Ohtsu/ng5-material-button-demo

概要

まず、以下の Agular Material サイトのGetting started ページを参照してください。

本プロジェクトは、このページで解説されている手順に基づいています。

以下の Step 番号はこのページの Step 番号に対応しています。ただし、step 3については、含まれていません。これは必要とされる Agular Material のモジュールによって変化するからです。

インストール設定されたライブラリおよび設定

  • @angular/material (Step 1)

  • @angular/cdk (Step1)

  • @angular/animations (Step2)

  • デフォルト・テーマ(indigo.pink.css)のstyles.cssファイルへの追加 (step4)

  • hammerjs ('src/main.ts'ファイルの変更をふくむ) (step5)

  • 公式のMaterial Design Iconsの追加 ('index.html'ファイルの変更) (Step6)

もちろん、インストールするライブラリなどについては以下のような Package.json ファイルの内容を変更することによって構成を変えることができます。


  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "gulp": "^3.9.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }


必要環境

  • Git
  • Node.js
  • TypeScript2
  • Angular5
  • Angular/cli

インストール方法

このプログラムをインストールするには:

  • まずインストール用のディレクトリを作成し、その中に入ります。
$ mkdir mydir
$ cd mydir
  • 以下のように Git によりクローンを作成します。
$ git clone https://github.com/Ohtsu/ng5-material-initial.git
  • ng5-material-initial ディレクトリに入り、"npm install"を実行します。
$ cd ng5-material-initial
$ npm install 

プログラムのチェック

インストールが終了しましたら、この段階でプログラムの稼働をチェックします。以下のようにローカルサーバを起動し、ブラウザから http://localhost:4200 にアクセスし、Angularの初期画面が表示されるかをチェックします。

$ ng serve
  • 初期画面

ローカルサーバの停止

ローカルサーバを停止するには、コマンドラインから Ctrl+C と打ち、メッセージが出てきましたら、y+Return で停止します。

バージョン

  • ng5-material-initial : 0.1
  • Angular5 : 5.0.0
  • @angular/cdk : 5.0.0-rc0
  • @angular/material : 5.0.0-rc0,
  • hammerjs : 2.0.8
  • @angular/cli : 1.5.0

参考文献

変更履歴

  • 2017.11.15 version 0.1.1 アップロード

著作権

copyright 2017 by Shuichi Ohtsu (DigiPub Japan)

ライセンス

MIT © Shuichi Ohtsu

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?