Від автора: існують різні способи створення вашого першого додатка Angular Hello World. Давайте розглянемо у статті створення такого додатка.

Нижче наведені етапи створення демонстраційного програми та запустити його через github.

Крок 1 — Перейдіть за адресою github — https://github.com/angular/quickstart

Крок 2 — Відкрийте командний рядок, створіть каталог проекту. Це може бути порожній каталог. У нашому прикладі ми створили каталог під назвою Project.

Крок 3 — Далі через командний рядок перейдіть в цей каталог і виконайте наступну команду, щоб клонувати репозиторій github у вашу локальну систему. Для цього використовується следующуая команда:

git clone https://github.com/angular/quickstart Demo

Ця команда створить зразок додатка Angular JS на вашому локальному комп’ютері.

Крок 4 — Відкрийте код Visual Studio Code.

Крок 5 — Відкрийте командний рядок, а потім знову в папку проекту і виконайте наступну команду:

npm install

Це дозволить встановити всі пакети, необхідні для роботи програми Angular JS.

Після цього ви повинні побачити на екрані деревоподібну структуру програми з усіма встановленими залежностями.

Крок 6 — Перейдіть Demo — src — app — app.component.ts. Знайдіть у файлі наступні рядки коду:

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: `

Hello {{name}}

`,
})
export class AppComponent { name = ‘Angular’; }

і замініть ключове слово Angular на World, як показано нижче:

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: `

Hello {{name}}

`,
})
export class AppComponent { name = ‘World’; }

Також при створенні програми Angular 2 створюються і інші файли. На даний момент вам не потрібно турбуватися про них, тому що всі вони включені як частина програми Angular 2, і для програми Hello World вносити зміни в інші файли не треба. Ми докладно розглянемо ці файли в наступних главах.

Примітка. Visual Studio Code автоматично скомпилирует всі файли і створить файли JavaScript для всіх файлів typescript.

Крок 7 — Тепер відкрийте командний рядок і введіть команду npm start. У результаті менеджер пакетів Node запустить веб-сервер Lite і відкриє ваш додаток Angular.

Додаток Angular JS буде запущено в браузері, і ви побачите у вікні браузера «Hello World», як показано на наступному скріншоті.

Розгортання

У цьому розділі ми детальніше розглянемо розгортання описаного вище програми Hello world. Оскільки це додаток Angular JS, його можна розгорнути на будь-якій платформі. У нашому випадку ми розгорнемо його на Windows з використанням Visual Studio Code. Тепер давайте розглянемо два варіанти розгортання.

Розгортання на серверах NGNIX в Windows

Зверніть увагу, що для розміщення додатків Angular JS ви можете використовувати будь-який веб-сервер на будь-якій платформі. В нашому випадку ми використовуємо популярний веб-сервер NGNIX.

Крок 1 — Завантажити веб-сервер NGNIX з следующй веб-сторінки http://nginx.org/en/download.html.

Крок 2 — Після вилучення завантажений zip-файлу запустіть компонент nginx exe, який запускає веб-сервер у фоновому режимі. Після цього вам стане доступна сторінка за URL-адресою: http://localhost

Крок 3 — Через провідник Windows перейдіть в папку проекту Angular JS.

Крок 4 — Скопіюйте вміст папки oject — Demo — node-modules.

Крок 5 — Скопіюйте вміст папки Project — Demo — src.

Крок 6 — Вставити скопійовані файли і папки в каталог nginx/html.

Тепер перейдіть за URL-адресою: http://localhost ви побачите сторінку програми Hello World, як показано на наступному скріншоті.

Налаштування на Ubuntu

Тепер давайте подивимося, як розгорнути програми на сервері Ubuntu.

Крок 1 — Введіть на сервері Ubuntu такі команди, щоб встановити nginx.

apt-get update

Наведена вище команда актуалізує дати всіх пакетів в системі.

Після цього система буде оновлена.

Крок 2 — Тепер встановіть GIT на сервер Ubuntu, виконавши наступну команду.

sudo apt-get install git

Після цього буде встановлено GIT.

Крок 3 — Щоб перевірити версію git, виконайте наступну команду.

sudo git –version

Крок 4 — Встановіть на Ubuntu npm, vенеджер пакетів Node. Для цього виконайте наступну команду.

sudo apt-get install npm

Після цього буде встановлено npm.

Крок 5 — Щоб перевірити версію npm, виконайте наступну команду.

sudo npm -version

Крок 6 — Потім встановіть nodejs. Це можна зробити за допомогою наступної команди.

sudo nodejs –version

Крок 7 — Щоб побачити версію Node.js просто виконайте наступну команду.

sudo nodejs –version

Крок 8 — Створіть папку проекту і за допомогою наступної команди git завантажте проект github starter.

git clone https://github.com/angular/quickstart Demo

В локальну систему будуть завантажені всі файли.

Ви можете переглянути папки, щоб переконатися в тому, що файли були успішно завантажені з github.

Крок 9 — Далі запустіть наступну команду npm.

npm install

Дана команда встановить всі пакети, необхідні для роботи програми Angular JS.

Після цього ви побачите всі залежності, встановлені в системі.

Крок 10 — Перейдіть в Demo — src — app — app.component.ts. При необхідності використовуйте редактор vim. Знайдіть наступні рядки коду:

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘

Hello {{name}}

‘;
})
export class AppComponent { name = ‘Angular’; }

І замініть ключове слово Angular на World, як показано нижче.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘

Hello {{name}}

‘;
})
export class AppComponent { name = ‘World’; }

Також при створенні програми Angular 2 створюються і інші файли. На даний момент вам не потрібно турбуватися про них, тому що всі вони включені як частина програми Angular 2, і для програми Hello World вносити зміни в інші файли не треба. Ми докладно розглянемо ці файли в наступних главах.

Крок 11 — Потім встановіть сервер Lite, який можна використовувати для запуску програми Angular 2. Ви можете зробити це за допомогою наступної команди:

sudo npm install –save-dev lite-server

Після цього ви побачите статус установки. Вам не потрібно турбуватися про попередження.

Крок 12 — Створіть за допомогою наступної команди символічне посилання на папку node . Це дасть можливість менеджеру пакетів node знайти встановлений nodejs.

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

Крок 13 — Тепер настав час запустити додаток Angular 2 за допомогою команди npm start. Спочатку будуть створені файли, а потім додаток Angular запускається на сервері Lite, який був встановили раніше. Виконайте наступну команду:

sudo npm start

Після цього вам буде надано URL-адресу.

Якщо ви перейдете за цим URL-адресою, ви побачите в браузері додаток Angular 2.

Розгортання NGNIX на Ubuntu

Примітка. Для розміщення додатків Angular JS ви можете використовувати будь-який веб-сервер на будь-якій платформі. В даному випадку ми використовуємо популярний веб-сервер NGNIX.

Крок 1 — Виконайте на сервері Ubuntu наступну команду, щоб встановити nginx в якості веб-сервера.

sudo apt-get update

Ця команда задає оновлення всіх пакетів в системі.

Після цього система буде оновлена.

Крок 2 — Тепер виконайте наступну команду для установки nginx.

apt-get install nginx

Після завершення nginx буде запущено у фоновому режимі.

Крок 3 — Запустіть наступну команду, щоб перевірити, що служби nginx запущені.

ps –ef | grep nginx

Тепер за замовчуванням файли для nginx зберігатимуться у теці /var/www/html. Отже, вам потрібно встановити відповідні права доступу для копіювання файлів Hello World в цю папку.

Крок 4 — Виконайте наступну команду.

sudo chmod 777 /var/www/html

Крок 5 — Скопіюйте файли проекту в папку /var/www/html.

Тепер, якщо ви перейдете за URL-адресою http://192.168.1.200/index.html ви побачите додаток Angular JS Hello World.