Angular - Angular.js 未被识别答案

【问题标题】：Angular - Angular.js not being recognizedAngular - Angular.js 未被识别
【发布时间】：2017-02-27 02:36:03
【问题描述】：

我是 Angular 的新手，正在尝试做一个简单的 Hello World。请在下面找到我的源文件：

<html >
  <head>
    <script src="./node_modules/angular/angular.js"></script>

    <title>ngClassifieds</title>
  </head>
  <body ng-app="ngClassifieds">
    <div>
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

..\ngClassifieds\scripts\app.js

angular.module("ngClassifieds",[]);

当前存在的文件结构（使用 npm 创建）

└───ngClassifieds
    │   index.html
    │   package.json
    │
    ├───css
    ├───node_modules
    │   ├───angular
    │   │       angular-csp.css
    │   │       angular.js
    │   │       angular.min.js
    │   │       angular.min.js.gzip
    │   │       angular.min.js.map
    │   │       bower.json
    │   │       index.js
    │   │       LICENSE.md
    │   │       package.json
    │   │       README.md

我目前面临两个问题：

如果我在 index.html 文件中将 ng-app 设置为 ng-app="ngClassifieds"，Angular 将停止工作（请参阅下面的输出）
如果我使用 \ngClassifieds\node_modules\angular\angular.js 文件，而不是 https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js，它将停止工作（见下面的输出）

错误：

而如果我删除 ng-app 参数并改用 https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js，它会按预期工作：

这是有效的index.html：

<html >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

    <title>ngClassifieds</title>
  </head>
  <body ng-app>
    <div>
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

【问题讨论】：

你的ng-controller呢？
我没有。我正在按照这里描述的步骤school.scotch.io/getting-started-with-angularjs-1x/…

标签： javascript angularjs npm

【解决方案1】：

虽然您定义了一个模块，但实际上您并没有将它包含在您的文件中，这就是它给出错误的原因。由于它不包含它试图寻找的模块 (ngClassifieds) 不存在。只需在 angular 之后在标题中包含您的 app.js 文件，它就会运行：

<html>
  <head>
    <script src="./node_modules/angular/angular.js"></script>
    <script src="/ngClassifieds/scripts/app.js"></script> <!-- Include it here-->
    <title>ngClassifieds</title>
  </head>
  <body ng-app="ngClassifieds">
    <div>
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

已编辑

正如所指出的，app.js 文件的路径是错误的。修复后，它工作了。

【讨论】：

抱歉，之前没有： ngClassifieds
Name:

您好{{yourName}}！
我不完全确定app.js 文件的位置。它是否被正确加载（连同角度）？
我的 app.js 文件在 \ngClassifieds\scripts\app.js 下
@user1829136 也可以尝试使用 CDN 代替您的本地目录（路径可能无效或 angular 文件未加载），在那案子行得通吗？
斯宾塞，谢谢！我刚刚意识到 app.js 文件的路径是错误的……很抱歉我错过了那个细节！非常感谢！

您好{{yourName}}！