如何使用AngularJS设置开发环境？我无法启动并运行基本的AngularJS应用程序

问题描述 投票：0回答：1

我还是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包的，所以如果有人知道这个的目的和/或我如何得到它会很棒。

当我从testProgram目录运行npm start时，终端进入一个有点无限的循环并显示这个不间断：

> [email protected] start /Users/Me/AngularJS/testProgram
> npm run start


> [email protected] start /Users/Me/AngularJS/testProgram
> npm run start


> [email protected] start /Users/Me/AngularJS/testProgram
> npm run start


> [email protected] start /Users/Me/AngularJS/testProgram
> npm run start

所以我想知道如何才能获得适当的开发环境，以便能够看到我的编辑/更改。我希望能够在任何localhost或http-server上运行我的应用程序。我该怎么做呢？此外，关于设置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
});
angularjs npm localhost httpserver
1个回答
0
投票

如果没有看到你的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",
  }
}

您会注意到我的脚本/开始启动'lite-server'，这是我在全球安装的本地http服务器。详情是enter link description here。

您需要在index.html文件中包含依赖项，并且显然有一个正常工作的app.js文件（在脚本标记中最后引用）。

你可能还有其他一百万件事，但我希望这会有所帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.