Angular 4 Material. .io HelloWorld- , . Angular 4 Material , . , , , Angular Angular Material, . , . .
1.
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
NodeJS NVM .
nmp
npm NodeJS, NodeJS, .
npm:
sudo apt-get install npm
, , , , Angular, , Angular CLI:
sudo npm install -g @angular/cli
2.
, , , :
- ().
Angular . .
Material Angular Angular . :
ng new mySoul
mySoul . , , , . , . , , ?
:
cannot find module 'abbrev'
node :
sudo ln -s /usr/bin/nodejs /usr/bin/node
.
cd mySoul
ng serve --open
,
, , :
localhost:4200.
4200 . , .
.
mySoul/src/app/app.component.html . , , . : .
.. Angular Material, .
! (
mySoul)
Angular Material:
npm install --save @angular/material
Angular CDK:
npm install --save @angular/cdk
, . Material , :
npm install --save @angular/animations
, ( , .. , ), .
.
mySoul/src/styles.css :
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.
Material . Material
Material Angular
- , .
Material Angular -> Components -> Button . , , .
, <> ( )
button md-button> Click me! code>
( )
HTML. mySoul/src/app/app.component.html. , , .
. Material Design? , : . 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';
, , , , , , . : .
Angular Material . , .
https://habrahabr.ru/post/335318/
