Question

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

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

没有运行node.js服务器会出现问题吗？

这是HTML和JS代码（我的代码完全适用于Stackflow＆＃39的测试人员，但不适用于我的计算机）

＆＃13;

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 + '!';
	};
});

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

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

Answer 2

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

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

<强> AngularTesting

| _ 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等。

HTML不导入Angular.js函数

2 个答案: