Angular 2 — Hello World

Angular 2 — Hello World

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

 

Один из них — сделать все с нуля. Это довольно сложно и не является предпочтительным вариантом. Так как Angular 2 содержит много зависимостей, настроить все правильно довольно проблематично.

Другой способ — использовать быстрый запуск на Angular Github. Вы получаете пакет, который уже содержит код, необходимый для начала работы. Обычно этот вариант выбирают все разработчики. И именно этот подход мы используем для создания приложения Hello World.

Последний способ — использовать Angular CLI. Мы рассмотрим его подробно в отдельной главе.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Ниже приведены этапы создания демонстрационного приложения и запуска его через github.

Шаг 1 — Перейдите по адресу github — https://github.com/angular/quickstart

Angular 2 — Hello World

Шаг 2 — Перейдите в командную строку, создайте каталог проекта. Это может быть пустой каталог. В нашем примере мы создали каталог под названием Project.

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

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

Angular 2 — Hello World

Данная команда создаст образец приложения Angular JS на вашем локальном компьютере.

Шаг 4 — Откройте код в Visual Studio Code.

Angular 2 — Hello World

Шаг 5 — Перейдите в командную строку, а затем снова в папку проекта и выполните следующую команду:

npm install

Это позволит установить все пакеты, необходимые для работы приложения Angular JS.

Angular 2 — Hello World

После этого вы должны увидеть на экране древовидную структуру приложения со всеми установленными зависимостями.

Angular 2 — Hello World

Шаг 6 — Перейдите Demo — src — app — app.component.ts. Найдите в файле следующие строки кода:

import { Component } from '@angular/core';

@Component ({
 selector: 'my-app',
 template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

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

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 2 — Hello World

Angular 2 — Hello World

Приложение Angular JS будет запущено в браузере, и вы увидите в окне браузера «Hello World», как показано на следующем скриншоте.

Angular 2 — Hello World

Развертывание

В этом разделе мы подробнее рассмотрим развертывание описанного выше приложения Hello world. Поскольку это приложение Angular JS, его можно развернуть на любой платформе. В нашем случае мы развернем его на Windows с использованием Visual Studio Code. Теперь давайте рассмотрим два варианта развертывания.

Развертывание на серверах NGNIX в Windows

Обратите внимание, что для размещения приложений Angular JS вы можете использовать любой веб-сервер на любой платформе. В нашем случае мы используем популярный веб-сервер NGNIX.

Шаг 1 — Загрузите веб-сервер NGNIX со следующй веб-страницы http://nginx.org/en/download.html.

Angular 2 — Hello World

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

Angular 2 — Hello World

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

Шаг 4 — Скопируйте все содержимое из папки oject — Demo — node-modules.

Angular 2 — Hello World

Шаг 5 — Скопируйте все содержимое из папки Project — Demo — src.

Angular 2 — Hello World

Шаг 6 — Вставьте скопированные файлы и папки в каталог nginx/html.

Angular 2 — Hello World

Теперь перейдите по URL-адресу: http://localhost, вы увидите страницу приложения Hello World, как показано на следующем скриншоте.

Angular 2 — Hello World

Настройка на Ubuntu

Теперь давайте посмотрим, как развернуть то же приложение на сервере Ubuntu.

Шаг 1 — Введите на сервере Ubuntu следующие команды, чтобы установить nginx.

apt-get update

Приведенная выше команда актуализирует даты всех пакетов в системе.

Angular 2 — Hello World

После этого система будет обновлена.

Angular 2 — Hello World

Шаг 2 — Теперь установите GIT на сервер Ubuntu, запустив следующую команду.

sudo apt-get install git

Angular 2 — Hello World

После этого будет установлен GIT.

Angular 2 — Hello World

Шаг 3 — Чтобы проверить версию git, выполните следующую команду.

sudo git –version

Angular 2 — Hello World

Шаг 4 — Установите на Ubuntu npm, vенеджер пакетов Node. Для этого выполните следующую команду.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
sudo apt-get install npm

Angular 2 — Hello World

После этого будет установлено npm.

Angular 2 — Hello World

Шаг 5 — Чтобы проверить версию npm, выполните следующую команду.

sudo npm -version

Angular 2 — Hello World

Шаг 6 — Затем установите nodejs. Это можно сделать с помощью следующей команды.

sudo nodejs –version

Angular 2 — Hello World

Шаг 7 — Чтобы увидеть версию Node.js, просто выполните следующую команду.

sudo nodejs –version

Angular 2 — Hello World

Шаг 8 — Создайте папку проекта и с помощью следующей команды git загрузите проект github starter.

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

Angular 2 — Hello World

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

Angular 2 — Hello World

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

Angular 2 — Hello World

Шаг 9 — Далее запустите следующую команду npm.

npm install

Данная команда установит все пакеты, необходимые для работы приложения Angular JS.

Angular 2 — Hello World

После этого вы увидите все зависимости, установленные в системе.

Angular 2 — Hello World

Шаг 10 — Перейдите в Demo — src — app — app.component.ts. При необходимости используйте редактор vim. Найдите следующие строки кода:

import { Component } from '@angular/core'; 

@Component ({ 
 selector: 'my-app', 
 template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

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

import { Component } from '@angular/core'; 

@Component ({ 
 selector: 'my-app', 
 template: '<h1>Hello {{name}}</h1>'; 
})

export class AppComponent { name = 'World'; }

Angular 2 — Hello World

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

Шаг 11 — Затем установите сервер Lite, который можно использовать для запуска приложения Angular 2. Вы можете сделать это с помощью следующей команды:

sudo npm install –save-dev lite-server

Angular 2 — Hello World

После этого вы увидите статус установки. Вам не нужно беспокоиться о предупреждениях.

Angular 2 — Hello World

Шаг 12 — Создайте с помощью следующей команды символическую ссылку на папку node . Это даст возможность менеджеру пакетов node найти установленный nodejs.

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

Angular 2 — Hello World

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

sudo npm start

Angular 2 — Hello World

После этого вам будет предоставлен URL-адрес.

Angular 2 — Hello World

Если вы перейдете по этому URL-адресу, вы увидите в браузере приложение Angular 2.

Angular 2 — Hello World

Развертывание NGNIX на Ubuntu

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

Шаг 1 — Выполните на сервере Ubuntu следующую команду, чтобы установить nginx в качестве веб-сервера.

sudo apt-get update

Эта команда задает обновление всех пакетов в системе.

Angular 2 — Hello World

После этого система будет обновлена.

Angular 2 — Hello World

Шаг 2 — Теперь выполните следующую команду для установки nginx.

apt-get install nginx

Angular 2 — Hello World

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

Angular 2 — Hello World

Шаг 3 — Запустите следующую команду, чтобы проверить, что службы nginx запущены.

ps –ef | grep nginx

Angular 2 — Hello World

Теперь по умолчанию файлы для nginx будут храниться в папке /var/www/html. Следовательно, вам нужно установить соответствующие права доступа для копирования файлов Hello World в эту папку.

Шаг 4 — Выполните следующую команду.

sudo chmod 777 /var/www/html

Angular 2 — Hello World

Шаг 5 — Скопируйте файлы проекта в папку /var/www/html.

Angular 2 — Hello World

Теперь, если вы перейдете по URL-адресу http://192.168.1.200/index.html, вы увидите приложение Angular JS Hello World.

Angular 2 — Hello World

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree