Angular 4 Material. Part 1 - Creating and Configuring a Project

Foreword

Faced the need to use Angular 4 Material. I downloaded HelloWorld projects from .io sites, followed the guidelines. But the lessons on Angular 4 Material are few and it seems that they are written for people who already know it. Therefore, I decided to write several articles in which I will tell how to make the Angular Material project out of the usual Angular project, as well as about the unexpected problems of using some components and their solutions. A couple of times I even had to write my own components based on the existing ones, which will also be covered. But about everything in order.

Stage 1. OS preparation

The lessons use Ubuntu 16.04.

Install NodeJS

First you need to install NodeJS. Use the Ubuntu package manager:

sudo apt-get install nodejs 

For those who are not suited to the Ubuntu package manager, use the Node Version Manager (if NodeJS was successfully using the Ubuntu package manager, skip this step).
')

Install Node Version Manager

Run:

 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 

Who cURL is not worth, put the following command:

 sudo apt-get update sudo apt-get install curl 

Restart your terminal and complete the NVM installation:

 nvm install stable 

Installing NodeJS using NVM is complete.

Npm installation

Now you need to install npm - package manager for NodeJS, which is supposedly standard and should be installed automatically with NodeJS, but this did not happen to me.

Install npm:

 sudo apt-get install npm 

And finally, the last and important thing for us is a tool for initializing, developing and supporting Angular applications, that is, Angular CLI:

 sudo npm install -g @angular/cli 

Stage 2. Basic Application

Before we go any further, let's make sure that we speak the same language:

A component is an element or collection of elements of a web page (display).
Module - the entire application on Angular consists of modules. There must be at least one root module.

We will make a Material Angular project based on the usual generated Angular project. To create a new project, use the command:

 ng new mySoul 

mySoul is the name of my new project. In these lessons I will do a project intended for collecting films, books, individual quotes and other things. Such resources already exist, but each has its own drawbacks. And yet, why not create a convenient resource for yourself, an ideal resource?

And here is the first mistake when creating the project:

 cannot find module 'abbrev' 

To eliminate it, I created a link to the node for compatibility:

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

Now the project has been successfully created. Go to the project folder

 cd mySoul 

And run it

 ng serve --open 

The page in the browser will automatically open, where you will see



If you have closed the page, and the server is still running, then in the address bar write:
localhost: 4200 . 4200 is the default port. How to change it, I will tell in the next part.

Let's remove the excess. Open the file mySoul / src / app / app.component.html and you can delete everything from the file. Save the file, go to your page and see that there is nothing on it. One of the convenience: when editing a project, you can immediately see the changes. Since we are doing the project Angular Material, we need to install additional components.

Attention! Installing additional packages should be done in the root directory of the project (in our case in the mySoul folder)

Install Angular Material:

 npm install --save @angular/material 

Angular CDK:

 npm install --save @angular/cdk 

And the package needed to display the animation. Some Material components use animation, so installing this package is desirable:

 npm install --save @angular/animations 

And one more important step that is not described on the official site (or I am very blind, because I re-read everything on the official site several times, but did not see it), but it is necessary. Need to connect style. To do this, open the file mySoul / src / styles.css and connect the style:

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

More styles can be found on the official website.

Now we can add the Material component. All Material components can be found on the Material Angular website.

Virtually any web page has buttons, so add a button. Go to the Material Angular website → Components tab → in the menu on the left, look for the Button and click on it. On the open page you can see how this element works, and all the necessary code to add an element to your project.

First you have to click "<>" (top right) and copy the code.

button md-button> Click me! </button
(add opening and closing tags)
from the tab "HTML". Paste this code into the mySoul / src / app / app.component.html file . After you have saved the file, you will see a button on your page.



The button is the most common. And where is the Material Design? To see it, you need to do the following: import the module for this component into your project. Click the API tab (above).

You will see:

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

Open the file mySoul / src / app / app.modul.ts and connect the required module. Prior to editing, the app.modul.ts file looked like this:

 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 { } 

After connecting the module, it should look like this:

  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 { } 

Save the file. Wait until the required module is loaded and on your page you will see:



Tip: for the correct display of some components, right now connect the animation:

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

I am against when the project connects too much, but more than once it happened that when adding a component that requires animation, it was displayed, I spent a lot of time searching for a solution to the problem. And the solution is simple: you need to import the animation.

Now you have an Angular project with a single Material component. In the next part I will tell in detail about the structure of the project, how to create and correctly connect several components and write the service.