Как настроить среду разработки с AngularJS?У меня проблемы с запуском основного приложения AngularJS - PullRequest
0 голосов
/ 02 апреля 2019

Я все еще новичок в AngularJS и пытаюсь выяснить, как мне начать / начать создавать приложения.Сначала я создал два файла index.html и app.js, затем перешел к использованию команды npm init для создания файла package.json, внутри которого выглядит (я добавил свойство start в скриптах):

{
      "name": "app",
      "version": "1.0.0",
      "description": "idk",
      "main": "app.js",
      "scripts": {
            "start": "npm run start",
            "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Me",
      "license": "ISC",
      "dependencies": {
        "http-server": "^0.11.1"
      }
    }

И мой каталог файлов выглядит примерно так:

testProgram -> app.js
testProgram -> index.html
testProgram -> package.json
testProgram -> package-lock.json
testProgram -> node_modules -> angular

Я выполнил несколько случайных команд для этого и не уверен, как именно я получил пакет node_modules, так что если кто-то знаетцель этого и или как я получил это было бы замечательно.

Когда я запускаю npm start из каталога testProgram, терминал идет по несколько бесконечному циклу и отображает этот безостановочно:

> app@1.0.0 start /Users/Me/AngularJS/testProgram
> npm run start


> app@1.0.0 start /Users/Me/AngularJS/testProgram
> npm run start


> app@1.0.0 start /Users/Me/AngularJS/testProgram
> npm run start


> app@1.0.0 start /Users/Me/AngularJS/testProgram
> npm run start

И поэтому мне было интересно, как мне создать надлежащую среду разработки, чтобы я мог видеть мои изменения / изменения.Я хочу иметь возможность запускать мое приложение на любом локальном хосте или http-сервере.Как мне это сделать?Кроме того, любые советы (желательно общее пошаговое объяснение), касающиеся установки приложений angularJS, будут чрезвычайно полезны, так как я не уверен в том, как я это делаю.(Я просмотрел много учебных пособий, и есть много способов приблизиться к этому, но этот способ кажется наиболее распространенным и простым.)

Вот мой index.html:

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="utf-8">
        <title>Angular Test</title>
    </head>
    <body ng-controller="mainCtrl">
        {{7 + 17}}
    </body>
</html>

Вот мойapp.js:

var modone = angular.module("App",['main']);
var modtwo =  angular.module("main", []);
modtwo.controller("mainCtrl", function($scope) {
        // no code yet
});

1 Ответ

0 голосов
/ 02 апреля 2019

Нельзя комментировать гораздо больше, не видя ваш app.js или index.html, но это может помочь вам начать ...

Я думаю, что ваша главная проблема - это раздел скриптов в вашем package.jsonфайл должен быть:

"scripts": {
    "start": "http-server"
  }

Это должно запустить ваш http-сервер, а не застрять в цикле.

Также, глядя на файл пакета, который вам нужно установить (и сохранить вфайл) намного больше файлов в первую очередь.Мой выглядит примерно так для AngularJS (я вырезал много специфических вещей, которые я использую):

{
  "name": "AngularJS App",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "lite-server",
    "gulp": "gulp"
  },
  "dependencies": {
    "angular": "^1.7.8",
    "bootstrap-sass": "^3.4.1",
    "jquery": "^3.3.1",
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "angular-mocks": "^1.7.8",
    "del": "^4.0.0",
    "gulp": "^4.0.0",
    "jasmine": "^3.3.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-jasmine": "^2.0.1",
    "karma-ng-html2js-preprocessor": "^1.0.0",
    "karma-spec-reporter": "0.0.32",
  }
}

Вы заметите, что мои скрипты / start запускают 'lite-server', который является локальнымhttp-сервер у меня установлен глобально.Подробности введите описание ссылки здесь .

Вам нужно будет включить зависимости в ваш файл index.html и, очевидно, иметь правильный рабочий файл app.js (на который ссылается последний раз втеги вашего скрипта).

Возможно, вам не хватает миллиона других вещей, но я надеюсь, что это поможет!

...