От автора: существуют различные способы создания вашего первого приложения Angular Hello World. Давайте рассмотрим в статье создание такого приложения.
Один из них — сделать все с нуля. Это довольно сложно и не является предпочтительным вариантом. Так как Angular 2 содержит много зависимостей, настроить все правильно довольно проблематично.
Другой способ — использовать быстрый запуск на Angular Github. Вы получаете пакет, который уже содержит код, необходимый для начала работы. Обычно этот вариант выбирают все разработчики. И именно этот подход мы используем для создания приложения Hello World.
Последний способ — использовать Angular CLI. Мы рассмотрим его подробно в отдельной главе.
Ниже приведены этапы создания демонстрационного приложения и запуска его через github.
Шаг 1 — Перейдите по адресу github — //github.com/angular/quickstart
Шаг 2 — Перейдите в командную строку, создайте каталог проекта. Это может быть пустой каталог. В нашем примере мы создали каталог под названием Project.
Шаг 3 — Далее через командную строку перейдите в этот каталог и выполните следующую команду, чтобы клонировать репозиторий github в вашу локальную систему. Для этого используется следующуая команда:
|
1 |
git clone //github.com/angular/quickstart Demo |
Данная команда создаст образец приложения Angular JS на вашем локальном компьютере.
Шаг 4 — Откройте код в Visual Studio Code.
Шаг 5 — Перейдите в командную строку, а затем снова в папку проекта и выполните следующую команду:
|
1 |
npm install |
Это позволит установить все пакеты, необходимые для работы приложения Angular JS.
После этого вы должны увидеть на экране древовидную структуру приложения со всеми установленными зависимостями.
Шаг 6 — Перейдите Demo — src — app — app.component.ts. Найдите в файле следующие строки кода:
|
1 2 3 4 5 6 7 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; } |
и замените ключевое слово Angular на World, как показано ниже:
|
1 2 3 4 5 6 7 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) 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 со следующй веб-страницы //nginx.org/en/download.html.
Шаг 2 — После извлечения загруженного zip-файла запустите компонент nginx exe, который запускает веб-сервер в фоновом режиме. После этого вам станет доступна страница по URL-адресу: //localhost
Шаг 3 — Через проводник Windows перейдите в папку проекта Angular JS.
Шаг 4 — Скопируйте все содержимое из папки oject — Demo — node-modules.
Шаг 5 — Скопируйте все содержимое из папки Project — Demo — src.
Шаг 6 — Вставьте скопированные файлы и папки в каталог nginx/html.
Теперь перейдите по URL-адресу: //localhost, вы увидите страницу приложения Hello World, как показано на следующем скриншоте.
Настройка на Ubuntu
Теперь давайте посмотрим, как развернуть то же приложение на сервере Ubuntu.
Шаг 1 — Введите на сервере Ubuntu следующие команды, чтобы установить nginx.
|
1 |
apt-get update |
Приведенная выше команда актуализирует даты всех пакетов в системе.
После этого система будет обновлена.
Шаг 2 — Теперь установите GIT на сервер Ubuntu, запустив следующую команду.
|
1 |
sudo apt-get install git |
После этого будет установлен GIT.
Шаг 3 — Чтобы проверить версию git, выполните следующую команду.
|
1 |
sudo git –version |
Шаг 4 — Установите на Ubuntu npm, vенеджер пакетов Node. Для этого выполните следующую команду.
|
1 |
sudo apt-get install npm |
После этого будет установлено npm.
Шаг 5 — Чтобы проверить версию npm, выполните следующую команду.
|
1 |
sudo npm -version |
Шаг 6 — Затем установите nodejs. Это можно сделать с помощью следующей команды.
|
1 |
sudo nodejs –version |
Шаг 7 — Чтобы увидеть версию Node.js, просто выполните следующую команду.
|
1 |
sudo nodejs –version |
Шаг 8 — Создайте папку проекта и с помощью следующей команды git загрузите проект github starter.
|
1 |
git clone //github.com/angular/quickstart Demo |
В локальную систему будут загружены все файлы.
Вы можете просмотреть папки, чтобы убедиться в том, что файлы были успешно загружены с github.
Шаг 9 — Далее запустите следующую команду npm.
|
1 |
npm install |
Данная команда установит все пакеты, необходимые для работы приложения Angular JS.
После этого вы увидите все зависимости, установленные в системе.
Шаг 10 — Перейдите в Demo — src — app — app.component.ts. При необходимости используйте редактор vim. Найдите следующие строки кода:
|
1 2 3 4 5 6 7 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<h1>Hello {{name}}</h1>'; }) export class AppComponent { name = 'Angular'; } |
И замените ключевое слово Angular на World, как показано ниже.
|
1 2 3 4 5 6 7 8 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<h1>Hello {{name}}</h1>'; }) export class AppComponent { name = 'World'; } |
Также при создании приложения Angular 2 создаются и другие файлы. На данный момент вам не нужно беспокоиться о них, потому что все они включены как часть приложения Angular 2, и для приложения Hello World вносить изменения в другие файлы не нужно. Мы подробно рассмотрим эти файлы в последующих главах.
Шаг 11 — Затем установите сервер Lite, который можно использовать для запуска приложения Angular 2. Вы можете сделать это с помощью следующей команды:
|
1 |
sudo npm install –save-dev lite-server |
После этого вы увидите статус установки. Вам не нужно беспокоиться о предупреждениях.
Шаг 12 — Создайте с помощью следующей команды символическую ссылку на папку node . Это даст возможность менеджеру пакетов node найти установленный nodejs.
|
1 |
sudo ln -s /usr/bin/nodejs /usr/bin/node |
Шаг 13 — Теперь пришло время запустить приложение Angular 2 с помощью команды npm start. Сначала будут созданы файлы, а затем приложение Angular запустится на сервере Lite, который был установили ранее. Выполните следующую команду:
|
1 |
sudo npm start |
После этого вам будет предоставлен URL-адрес.
Если вы перейдете по этому URL-адресу, вы увидите в браузере приложение Angular 2.
Развертывание NGNIX на Ubuntu
Примечание. Для размещения приложений Angular JS вы можете использовать любой веб-сервер на любой платформе. В данном случае мы используем популярный веб-сервер NGNIX.
Шаг 1 — Выполните на сервере Ubuntu следующую команду, чтобы установить nginx в качестве веб-сервера.
|
1 |
sudo apt-get update |
Эта команда задает обновление всех пакетов в системе.
После этого система будет обновлена.
Шаг 2 — Теперь выполните следующую команду для установки nginx.
|
1 |
apt-get install nginx |
После завершения nginx будет запущен в фоновом режиме.
Шаг 3 — Запустите следующую команду, чтобы проверить, что службы nginx запущены.
|
1 |
ps –ef | grep nginx |
Теперь по умолчанию файлы для nginx будут храниться в папке /var/www/html. Следовательно, вам нужно установить соответствующие права доступа для копирования файлов Hello World в эту папку.
Шаг 4 — Выполните следующую команду.
|
1 |
sudo chmod 777 /var/www/html |
Шаг 5 — Скопируйте файлы проекта в папку /var/www/html.
Теперь, если вы перейдете по URL-адресу //192.168.1.200/index.html, вы увидите приложение Angular JS Hello World.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
