HTML 不导入 Angular.js 函数答案

【问题标题】：HTML not importing Angular.js functionsHTML 不导入 Angular.js 函数
【发布时间】：2015-09-20 13:49:09
【问题描述】：

我正在使用 HTML 页面通过 $scope 从 Angular.js 页面调用函数。无论我做什么，我的结果都会显示为 {{heading + message}} 而不是 Hello (+) 用户名。（见下面的代码）。我觉得这是无法从我的 js 文件调用，或者根本无法调用 Angular 库的问题。

我从 Angular.js 网站测试了一个示例，它运行良好，所以我认为它无法调用该文件。我尝试过相对路径和直接路径，但似乎都不适用于调用 first.js 文件。

不运行node.js服务器会不会是个问题？

这是 HTML 和 JS 代码（我的代码在 Stackflow 的测试仪上完美运行，但在我的计算机上却不行）

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
	$scope.first = 'Some';
	$scope.last = 'One';
	$scope.heading = 'Message: ';
	$scope.updateMessage = function() {
		$scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
	};
});

<!doctype html>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
		<script scr="C:\Users\Administrator\Documents\AngularTesting\js\first.js"></script>
		<title>Name App</title>
	</head>
	<body ng-app="firstApp">
		<div ng-controller="FirstController">
			<span>Name:</span>
			<input type="text" ng-model="first">
			<input type="text" ng-model="last">
			<button ng-click='updateMessage()'>Message</button>
			<hr>
			{{heading + message}}
		</div>
		<!--<script scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>-->

	</body>
</html>

【问题讨论】：

angular 并不意味着在没有服务器的情况下从本地浏览器窗口运行。
打开控制台出现错误说明您的问题
@dfsq 你是什么意思？命令提示符还是 node.js shell？抱歉，我对这些东西真的很陌生
我的意思是浏览器开发者工具。在 chrome 中按 F12 进入 javascript 控制台。
正如许多人所提到的，该页面需要从服务器提供。如果您使用的是 Windows，请查看一些 Microsoft 免费开发工具：WebMatrix 或 VisualStudio Express 两者都带有 IIS Express 作为开发 Web 服务器。

标签： javascript html angularjs node.js

【解决方案1】：

如果您不在服务器上运行 AngularJS，它就无法完成它的工作。如果您不熟悉在服务器上运行网页，请按照以下步骤操作：

下载 WampServer
开始运行 WampServer
将文件复制到以下文件夹：“C:\wamp\www\”
将 HTML 页面中脚本文件的“src”更改为新位置。
打开浏览器并转到http://localhost/app.html（假设您的 HTML 文件名为 app.html）

AngularJS 现在可以完成它的工作，就像在 StackOverflow 上一样。

【讨论】：

我只是这样做了，它显示了我的页面，但没有做任何与我运行 html 文档不同的事情，所以它仍然无法工作：/ 谢谢你的提议
UPDATE 它托管我的 html 文件，但不是我的 js 文件的 Angular。有什么想法吗？
好的。我发现了问题。一旦你看到它，你可能会一根一根地拔掉你头上的每一根头发。但是当你发现问题时，通常是这样的。查看头部的 HTML 文件。您使用“scr”而不是“src”来导入您自己的 JavaScript 文件。我刚刚测试了你的代码，它确实不起作用（即使在服务器上）。但是在将“scr”更改为“src”后它确实有效。这里的错误只是一个错字。 ;)

【解决方案2】：

任何 http 服务器都应该可以工作。我能想到的最简单的解决方案是运行 Python http 服务器。

假设您有一个具有以下结构的文件夹：

角度测试

|_ index.html

|_ first.js

在 AngularTesting 目录中运行此命令：

python -m SimpleHTTPServer 8000

看来您使用的是 Windows。因此，如果尚未设置，这可能对您有所帮助：Set up Python simpleHTTPserver on Windows

您可以通过在浏览器中访问此地址来尝试该网站。另外，使用相对链接导入 index.html 中的 js 文件。

http://localhost:8000/

另一个值得学习的解决方案是使用grunt 或gulp 等开发工具。他们有很多有趣的模块，比如自动重新加载、jslint、minify 等。

【讨论】：