Angular 4マテリアル。 パート1-プロジェクトの作成と設定

まえがき

Angular 4マテリアルを使用する必要に直面しました。 .ioサイトのHelloWorldプロジェクトからダウンロードされ、その後にガイドが続きます。 しかし、Angular 4マテリアルに関するレッスンはほとんどなく、すでに知識のある人向けに書かれているようです。 したがって、通常のAngularプロジェクトからAngular Materialプロジェクトを作成する方法、およびいくつかのコンポーネントとそのソリューションの使用に関する予期しない問題について説明する記事をいくつか書くことにしました。 数回、既存のコンポーネントに基づいて独自のコンポーネントを作成する必要がありましたが、これも強調表示されます。 しかし、まず最初に。

ステージ1. OSの準備

チュートリアルではUbuntu 16.04を使用します。

NodeJSをインストールする

まず、NodeJSをインストールする必要があります。 Ubuntuパッケージマネージャーを使用します。

sudo apt-get install nodejs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Ubuntuパッケージマネージャーに適していない人は、Node Version Managerを使用してください（NodeJSがUbuntuパッケージマネージャーの使用に成功した場合は、この手順をスキップしてください）。

Node Version Managerをインストールする

実行：

 sudo apt-get install build-essential checkinstall sudo apt-get install libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

cURLを持っていない人は、次のコマンドを入力します。

 sudo apt-get update sudo apt-get install curl
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ターミナルを再起動して、NVMをインストールします。

 nvm install stable
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、NVMを使用したNodeJSのインストールが完了しました。

Npmインストール

ここで、npm-NodeJSのパッケージマネージャーをインストールする必要があります。これは理論上は標準であり、NodeJSと共に自動的にインストールする必要がありますが、これは私には起こりませんでした。



Npmインストール：

 sudo apt-get install npm
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして最後に、私たちにとって最後の重要なことは、Angularアプリケーションの初期化、開発、サポートのためのツール、つまり、Angular CLIです。

 sudo npm install -g @angular/cli
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステージ2.基本的なアプリケーション

先に進む前に、同じ言語を話せることを確認しましょう。



コンポーネントは、Webページ（表示）の要素または要素のセットです。

モジュール -Angularアプリケーション全体はモジュールで構成されています。 少なくとも1つのルートモジュールが必要です。



定期的に生成されるAngularプロジェクトに基づいて、Material Angularプロジェクトを作成します。 新しいプロジェクトを作成するには、次のコマンドを使用します。

 ng new mySoul
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

mySoulは私の新しいプロジェクトの名前です。 これらのレッスンでは、映画、本、個々の引用などを収集するように設計されたプロジェクトを行います。 このようなリソースは既に存在しますが、それぞれに欠点があります。 しかし、ところで、便利なリソース、理想的なリソースを作成してみませんか？



プロジェクトを作成するときの最初の間違いは次のとおりです。

 cannot find module 'abbrev'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それを修正するために、互換性のためにノードへのリンクを作成しました：

 sudo ln -s /usr/bin/nodejs /usr/bin/node
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これでプロジェクトが正常に作成されました。 プロジェクトフォルダに行きましょう

 cd mySoul
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてそれを実行する

 ng serve --open
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザのページが自動的に開き、表示されます







ページを閉じてもサーバーがまだ実行されている場合は、アドレスバーに次のように記述します。

ローカルホスト：4200 。 4200がデフォルトのポートです。 それを変更する方法は、次の部分で説明します。



余分なものを削除しましょう。 ファイルmySoul / src / app / app.component.htmlを開くと、ファイルからすべてを削除できます。 ファイルを保存し、ページに移動して、ファイルが何もないことを確認します。 設備の1つ：プロジェクトを編集するとき、すぐに変更を確認できます。 なぜなら Angular Materialプロジェクトを行っているので、追加のコンポーネントをインストールする必要があります。



注意！ 追加パッケージのインストールは、プロジェクトのルートディレクトリ（この場合はmySoulフォルダー）で行う必要があります



角度材料をインストールします。

 npm install --save @angular/material
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

角度CDK：

 npm install --save @angular/cdk
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、アニメーションを表示するために必要なパッケージ。 マテリアルの一部のコンポーネントはアニメーションを使用するため、このパッケージをインストールすることが望ましいです。

 npm install --save @angular/animations
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてもう1つの重要なステップは、公式Webサイトには記載されていません（または、公式Webサイトのすべてを何度も読み直しましたが、見ていませんでしたので、非常に盲目です）。 スタイルを接続する必要があります。 これを行うには、ファイルmySoul / src / styles.cssを開き、スタイルを接続します。

 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

公式ウェブサイトでより多くのスタイルを見つけることができます。



これで、Materialコンポーネントを追加できます。 すべてのマテリアルコンポーネントは、 Material Angular Webサイトで見つけることができます。



ほとんどすべてのWebページにボタンがあるため、ボタンを追加します。 Material Angular Webサイト→コンポーネントタブ→左側のメニューに移動し、ボタンを探してクリックします。 開いているページで、この要素の仕組みと、プロジェクトに要素を追加するために必要なすべてのコードを確認できます。



まず、「<>」（右上）を押してコードをコピーする必要があります



button md-button> Click me! </button





（開始タグと終了タグを追加）

[HTML]タブから。 このコードをmySoul / src / app / app.component.htmlファイルに貼り付けます 。 ファイルを保存すると、ページにボタンが表示されます。







ボタンは最も一般的です。 材料設計はどこですか？ 確認するには、次を実行する必要があります。このコンポーネントのモジュールをプロジェクトにインポートします。 [API]タブ（上部）をクリックします。



表示されます：

 import {MdButtonModule} from '@angular/material';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルmySoul / src / app / app.modul.tsを開き 、必要なモジュールを接続します。 編集する前、 app.modul.tsファイルは次のようになりました。

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュールを接続すると、次のようになります。

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {MdButtonModule} from '@angular/material'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MdButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルを保存します。 必要なモジュールがロードされ、ページに以下が表示されるまで待ちます。







ヒント：一部のコンポーネントを正しく表示するには、今すぐアニメーションを接続します。

 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトに接続しすぎると反対になりますが、アニメーションを必要とするコンポーネントを追加して表示すると、問題の解決策を探すのに多くの時間を費やしました。 解決策は簡単です。アニメーションをインポートする必要があります。



これで、単一のMaterialコンポーネントを持つAngularプロジェクトができました。 次のパートでは、プロジェクトの構造、複数のコンポーネントを作成して正しく接続し、サービスを作成する方法について詳しく説明します。