Руководство для начинающих: запуск приложения Angular на локальном хосте - Fcodenotes

Привет! Итак, вы хотите запустить приложение Angular на своем локальном хосте? Без проблем! В этой статье блога я расскажу вам о нескольких методах запуска вашего приложения Angular локально. Мы рассмотрим различные подходы и попутно предоставим несколько примеров кода. Давайте погрузимся!

Метод 1: Angular CLI

Интерфейс командной строки Angular (CLI) — это самый популярный и удобный способ запуска приложения Angular на локальном хосте. Если вы еще не установили его, откройте терминал и выполните следующую команду:

npm install -g @angular/cli

После установки Angular CLI перейдите в каталог, в котором вы хотите создать проект, и выполните следующую команду:

ng new my-angular-app

При этом будет создан новый проект Angular с именем «my-angular-app». Чтобы запустить приложение на локальном хосте, перейдите в корневой каталог проекта и выполните следующую команду:

ng serve

Метод 2. Ручная настройка

Если вы предпочитаете настройку вручную, вы можете запустить приложение Angular на локальном хосте, выполнив следующие действия:

Шаг 1. Создайте новый каталог для своего проекта и перейдите в него.

Шаг 2. Создайте новый файл с именем index.htmlв корневом каталоге проекта. Откройте файл и добавьте базовую структуру HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Angular App</title>
</head>
<body>
</body>
</html>

Шаг 3. Создайте еще один файл с именем app.js(или любым другим именем, которое вы предпочитаете) в том же каталоге. Этот файл будет содержать ваш код Angular. Например:

// app.js
angular.module('myApp', [])
  .controller('MainController', function($scope) {
    $scope.message = 'Hello, Angular!';
  });

Шаг 4. Свяжите библиотеку Angular и файл app.jsс файлом index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My Angular App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
  <h1>{{ message }}</h1>
</body>
</html>

Шаг 5. Откройте файл index.htmlв веб-браузере, и вы увидите, что ваше приложение Angular работает на локальном хосте.

Метод 3: использование локального сервера разработки

Другой способ запустить приложение Angular на локальном хосте — использовать локальный сервер разработки, такой как XAMPP, WAMP или MAMP. Вот как это можно сделать:

Шаг 1. Установите и настройте предпочитаемый вами локальный сервер разработки (например, XAMPP).

Шаг 2. Скопируйте папку проекта Angular в веб-каталог сервера.

Шаг 3. Запустите локальный сервер разработки.

Шаг 4. Откройте веб-браузер и перейдите к http://localhost/my-angular-app(замените my-angular-appименем папки вашего проекта).

Вот и все! Ваше приложение Angular должно быть запущено на локальном хосте.

Заключение

Запустить приложение Angular на локальном хосте можно разными способами. Самый популярный метод — использование Angular CLI, который упрощает разработку. Однако, если вы предпочитаете более ручной подход или хотите использовать локальный сервер разработки, вы можете выполнить шаги, описанные выше. Приятного кодирования!