Angular 2

Шпаргалка по созданию проекта с применением Angular CLI

Создаем проект

npm install -g @angular/cli # установили
ng -v # проверили версию

ng new front-project --routing # создать проект front-project с поддержкой роутинга
cd front-project
ng server

В браузере обращаемся
http://localhost:4200

Добавляем страницу

В консоле вводим:

ng generate component about

Открываем файл роутера:
front-project/src/app/app-routing.module.ts

Текущий код:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', children: [] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Добавляем данные о компоненте about

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent }   from './about/about.component';

const routes: Routes = [
  {
    path: '',
    children: []
  },
  { 
    path: 'about', 
    component: AboutComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В браузере обращаемся
http://localhost:4200/about

Устанавливаем компоненты Material Design

Material — компоненты рекомендуемые Google для построения дизайна. Подробно про саму философию этого дизайна можно почитать на официальной странице.

npm install --save @angular/material
npm install --save
npm install --save hammerjs

  • @angular/material — сам material
  • @angular/animations — поддержка анимации
  • hammerjs — поддержка нажатий

Открываем файл
front-project/.angular-cli.json
Находим раздел app\\scripts и прописываем:

"scripts": [
"../node_modules/hammerjs/hammer.min.js"
]

Для дальнейшего подключения в проект открываем файл
front-project/src/app/app.module.ts

Прописали анимаюцию (BrowserAnimationsModule) и кнопки (MdButtonModule…)

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

@NgModule({
  ...
  imports: [    
    BrowserAnimationsModule,
    MaterialModule
  ],
  ...
})

Открываем файл c глобльными стилями
front-project/src/styles.css
Добавляем:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css'

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *