Как создать локальный сервер для запуска проекта AngularJS

103

Я использовал Xampp и JetBrain WebStorm для запуска проекта AngularJS. Но это сложно и малоэффективно. Есть ли другой способ запустить проект на AngularJS?

Фам Минь Тан
источник

Ответы:

225

Если вы используете http-сервер node.js, это очень просто.

cd в папку вашего проекта и

npx http-server -o 

# or, install it separately so you don't need npx
npm install -g http-server
http-server -o 

-oоткрыть браузер на странице. Запустите, http-server --helpчтобы просмотреть другие параметры, например изменить номер порта

Нет node?

эти другие однострочные файлы могут быть проще, если у вас нет node/ npmустановлен.

Например, python предустановлен в большинстве систем, поэтому приведенные ниже серверы Python John Doe будут работать быстрее.

MacOS поставляется с установленным Ruby, так что это еще один простой вариант, если вы используете Mac: ruby -run -ehttpd . -p8000и откройте свой браузер с http://localhost:8000.

Lyjackal
источник
37

Python имеет встроенную команду специально для запуска веб-сервера:

Python3.x:

python -m http.server 8000

Другие версии:

python -m SimpleHTTPServer 8000

Запустил бы веб-сервер на порту 8000

(Python является предварительным условием для этого; если у вас не установлен python, другие ответы могут быть проще)

user70585
источник
2
Стоит отметить, что эта команда обслуживает содержимое текущего каталога
Piyin
3
Да, и для Python 3 это должно бытьpython -m http.server 8000
Piyin
21

Вы можете начать с установки Node.js из терминала или cmd:

apt-get install nodejs-legacy npm

Затем установите зависимости:

npm install

Затем запустите сервер:

npm start
Амар Сила
источник
NodeJS имеет установщик для Windows. Вы можете скачать его на nodejs.org
Амар Сила
есть ли возможность автоматически запустить сервер узлов при включении системы
Винот 05
@AmarSyla, я не знаю про профиль в bash. Подскажите, как это реализовать.
Vinoth 07
5

cd <your project folder>(где находится ваш развертываемый код angularjs)

sudo npm install serve -g

обслуживать

Вы можете перейти на свою страницу по адресу

localhost: 3000 или IP-адрес: 3000

Анандкумар
источник
4

Я использую:

  • экспресс и
  • Морган

Установите Node.js. и npm. npm устанавливается с Node.js

Помещается в корневой каталог проекта

$ cd <your_angularjs_project>

Следующая команда создает package.json

$ npm init

Установите экспресс ==> Быстрый, незамысловатый, минималистичный для узла:

$ npm install express --save

Установите morgan ==> промежуточное ПО регистратора HTTP-запросов для node.js

$ npm install morgan --save

создать файл server.js

добавьте следующий код в файл server.js

// Required Modules
var express    = require("express");
var morgan     = require("morgan");
var app        = express();

var port = process.env.PORT || 3002;

app.use(morgan("dev"));
app.use(express.static("./"));

app.get("/", function(req, res) {
    res.sendFile("./index.html"); //index.html file of your angularjs application
});

// Start Server
app.listen(port, function () {
    console.log( "Express server listening on port " + port);
});

Наконец, запустите свой проект AngularJS на сервере localhost:

$ node server.js
Луис Рикардо Каэтано Эррера
источник
3

Используйте пакет npm для локального веб-сервера.

https://www.npmjs.com/package/local-web-server

$ npm install -g local-web-server
$ cd <your-app-folder>
$ ws

Также вы можете запустить

$ ws -p 8181

-p определяет порт, который вы хотите использовать

После этого просто зайдите в свой браузер и откройте http: localhost: 8181 /

Леонардо Лима
источник
3
  • Бегать
нг подавать

Эта команда запускается в вашем терминале после вашего местоположения в папке проекта, например ~/my-app$

  • Затем запустите команду - она ​​покажет, что сервер URl NG Live Development прослушивает localhost:4200

  • Откройте свой браузер на http: // localhost: 4200

Лакшмана Рао Куна
источник
5
Человек, эта команда предназначена для angular2, а не для angular1.x, также для этой команды пользователь должен установить angular
cli
3

Приложение Angular можно развернуть с помощью любого веб-сервера на localhost. Приведенные ниже параметры содержат инструкции по развертыванию для нескольких возможных развертываний веб-серверов в зависимости от требований к развертыванию.


Информационные службы Интернета Microsoft (IIS)

  1. Windows IIS должен быть включен

    1.1. В Windows откройте панель управления и нажмите «Установка и удаление программ».

    1.2. В окне «Установка и удаление программ» щелкните «Установка и удаление компонентов Windows».

    1.3. Установите флажок Internet Information Services (IIS), нажмите «Далее», затем нажмите «Готово».

    1.4. Скопируйте и извлеките Zip-файл приложения Angular в корневой каталог веб-сервера: C: \ inetpub \ wwwroot

  2. Теперь к приложению Angular можно получить доступ по следующему URL-адресу: http: // localhost: 8080

Облегченный веб-сервер NPM

  1. Установка легкого веб-сервера 1.1. Загрузите и установите npm с: https://www.npmjs.com/get-npm 1.2. После установки npm откройте командную строку и введите: npm install -g http-server 1.3. Распакуйте файл Angular Zip
  2. Чтобы запустить веб-сервер, откройте командную строку и перейдите в каталог, в который вы ранее извлекли Angular, и введите: http-server
  3. Теперь к приложению Angular Application можно получить доступ по следующему URL-адресу: http: // localhost: 8080

Веб-сервер Apache Tomcat

  1. Установка Apache Tomcat версии 8 1.1. Загрузите и установите Apache Tomcat с https://tomcat.apache.org/ 1.2. Скопируйте и извлеките Zip-файл приложения Angular в корневой каталог веб-сервера C: \ Program Files \ Apache Software Foundation \ Tomcat 7.0 \ webapps.
  2. Теперь к приложению Angular можно получить доступ по следующему URL-адресу: http: // localhost: 8080
Четан Ладдха
источник
2

«Предполагая, что у вас установлен nodejs»,

mini-http - это довольно простой инструмент командной строки для создания http-сервера,
установки пакета глобально, а npm install mini-http -g
затем с помощью вашего cmd (терминала) запустить mini-http -p=3000в каталоге вашего проекта И бум! вы создали сервер на порту 3000, теперь проверьте http: // localhost: 3000

Примечание: указывать порт не требуется, вы можете просто запустить mini-httpили mhзапустить сервер

Абдельменем Мохамед
источник
2

Если вы java-парень, просто поместите свою папку angular в папку веб-содержимого вашего веб-приложения и разверните на своем сервере tomcat. Супер просто!

Суяш Тиляри
источник
1

Предполагая, что у вас уже установлен node.js, вы можете использовать синхронизацию браузера для синхронизированного тестирования браузера.

Шабир Хайдер
источник
1

Если вы использовали Visual Studio Community или любую другую версию для своего проекта angular, перейдите в папку проекта, сначала введите

C: \ Project Folder> npm install -g http-server Вы увидите следующее: + http-server@0.11.1 добавил 25 пакетов за 4.213s.

Затем введите C: \ Project Folder> http-server –o.

Вы увидите, что ваше приложение автоматически открывается по адресу http://127.0.0.1:8080/

Arupjbasu
источник
0

Вы также можете настроить среду в коде Visual Studio. Запустите Ctrl + Shift + P, затем введите ctr в появившемся поле и выберите задачи: Configure Task Runner, Затем измените файл task.json на это:, { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }сохраните изменения, затем выберите файл index.html и введите Ctrl + Shift + B. Это откроет проект в вашем браузере по умолчанию.

Чинеду Это
источник