Установка Angular CLI и запуск нового проекта
Для начала, установим Angular CLI (интерфейс командной строки Angular), который очень поможет нам при подготовке проекта Angular и разработке проекта Angular в целом. Чтобы установить Angular CLI, введите в командной строке следующую команду:
npm install -g @angular/cli
Если у вас уже установлен Angular CLI, убедитесь, что у вас установлена последняя версия. Если нет, обновите его перед запуском проекта. Вы можете найти все инструкции здесь:https://github.com/angular/angular-cli.
После завершения установки мы собираемся создать новый проект.
Откройте код Visual Studio и в окне терминала (CTRL+~) перейдите по пути, по которому вы хотите разместить свой проект, и выполните команду:
ng new AccountOwnerClient
Появятся два вопроса. Первый вопрос - хотим ли мы, чтобы в нашем проекте была создана маршрутизация, а второй - о том, какой стиль мы хотим в нашем проекте. Мы ответим НЕТ (N) на первый вопрос и (CSS - просто нажмите Enter) на второй.
Создание проекта займет некоторое время. После завершения процесса создания мы собираемся открыть папку проекта внутри нашего редактора:
Сторонние библиотеки как часть подготовки проекта Angular
Мы собираемся использовать библиотеку начальной загрузки для стилизации, поэтому давайте установим ее с помощью команды:
npm install --save bootstrap
Он установит библиотеку, но нам также необходимо импортировать ее путь в файл angular.json. Поместите его прямо над styles.css:
После установки библиотеки начальной загрузки мы собираемся установить для нее определения типов. Для установки введите эту команду:
npm install --save @types/bootstrap
Сразу после этого давайте импортируем это определение типа в файл tsconfig.app.json:
Чтобы установить библиотеку JQuery, введите следующую команду:
npm install --save jqueryДля типов JQuery мы должны выполнить:
npm install --save @types/jquery
Вот так должен выглядеть массив скриптов в файле angular.json:
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
И измените импорт для типов:
"types": [
"jquery",
"bootstrap"
]
Для установки JQueryUI выполните:
npm install --save jqueryui
а для типов выполнить:
npm install --save @types/jqueryui
Вот так должны выглядеть стили и массив скриптов:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/jqueryui/jquery-ui.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/jqueryui/jquery-ui.min.js"
],
Импорт для типов должен выглядеть так:
"types": [
"jquery",
"bootstrap",
"jqueryui"
]
На этом установка зависимостей завершается.
Теперь все библиотеки установлены и импортированы в нужные файлы.
Следующим шагом будет добавление наших компонентов в проект.
Компоненты в Angular
Давайте немного поговорим об Angular. Angular - это платформа для создания приложений SPA (одностраничных приложений). Поэтому мы собираемся сгенерировать все наши страницы внутри одной страницы. Поэтому у нас есть только страница index.html. На странице index.html весь контент будет сгенерирован внутри селектора <app-root></app-root> из файла app.component.ts.
Загляните в файл app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AccountOwnerClient';
}
Каждый компонент должен импортировать Component из пакета @angular/core. Мы будем импортировать больше вещей, когда они нам понадобятся. Также вы могли заметить декоратор @Component внутри кода. Это место, где мы создаем наш селектор (он такой же, как тег app-root в файле index.html). Кроме того, мы связываем шаблон HTML для этого компонента с templateUrl и файлы CSS с этим компонентом с помощью styleUrls. StyleUrls - это массив строк, разделенных запятыми. В конце концов, мы создаем наш класс для компонента.
Теперь, если мы посмотрим на файл app.module.ts, который очень важен для подготовки проекта Angular и вообще для разработки, мы заметим этот код:
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 { }
В этом файле мы собираемся импортировать необходимые модули, компоненты и сервисы. Мы собираемся использовать массив объявлений для импорта наших компонентов и массив imports для импорта наших модулей. Также мы собираемся использовать массив провайдеров для регистрации наших сервисов.
Создание нового компонента
Чтобы создать новый компонент с именем Home, давайте выполним следующую команду:
ng g component home --skipTests
С помощью этой команды мы создаем компонент Home с тремя файлами (.ts, .html, .css). А добавляя флаг –skipTests, мы предотвращаем создание тестового файла.
Теперь мы можем проверить Home component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Здесь мы импортируем интерфейс OnInit, который определяет функцию ngOnInit. Эта функция будет выполнять любую внутреннюю логику, как только компонент инициализируется. Обратите внимание на конструктор. Конструктор предназначен только для внедрения сервиса в компонент. Для любого действия, которое необходимо выполнить при инициализации компонента, используйте метод ngOnInit.
Подробнее про App.Module
Если мы проверим файл app.module.ts, мы увидим, что наш новый компонент импортирован с помощью нашей предыдущей команды:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Итак, как мы видим, Angular CLI создает все это за нас.
Хотя одного модуля достаточно для всего приложения, мы все равно хотим создать больше модулей.
Модули проще поддерживать, а также большее количество модулей дает нам преимущество в виде отложенной загрузки контента. Это означает, что наше приложение будет загружать только контент, связанный с этим конкретным модулем, на который мы указываем, а не все приложение.
Дополнительный контент в компоненте Home
Давайте изменим файл компонента Home:
export class HomeComponent implements OnInit {
public homeText: string;
constructor() { }
ngOnInit() {
this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION";
}
Затем добавим новый класс в файл home.component.css:
.homeText{
font-size: 35px;
color: red;
text-align: center;
position: relative;
top:30px;
text-shadow: 2px 2px 2px gray;
}
Чтобы продолжить, изменим файл home.component.html:
<p class="homeText">{{homeText}}</p>
Затем изменим файл app.component.html, просто чтобы проверить, работает ли это:
<div class="container">
<div class="row">
<div class="col">
<app-home></app-home>
</div>
</div>
</div>
Теперь в терминале введите ng serve и дождитесь компиляции приложения. Сразу после этого запустите браузер и перейдите по адресу: localhost:4200. Вы должны увидеть приветственное сообщение на экране из компонента Home.
Заключение
Прямо сейчас у нас есть рабочий компонент и приложение Angular, которое вы можете запустить в своем браузере. Но это только начало. У нас впереди долгий путь, потому что есть еще много важных функций Angular, которые нужно ввести в проект.
Прочитав этот пост, вы узнали:
- Способ установки сторонних библиотек
- Обзор компонентов Angular
- Как создавать компоненты Angular
- И несколько фактов о модулях в Angular
Спасибо за чтение и надеюсь, что вы нашли в нем что-то полезное.
В следующей статье, мы покажем вам, как создать навигацию в проекте, а также как использовать маршрутизацию.