index.html:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="./assets/namesController.js"></script>
<body ng-app="myApp">
<!-- Method call from external JS files -->
<br>
<div ng-controller="ryanContrler">
My first name : <input type="text" ng-model="ryanFirstname">
<br> My last name : <input type="text" ng-model="austinLastname">
<br> My full name : {{fullName()}}
</div>
</body>
</html>
namesController.js:
angular.module('myApp').controller('ryanContrler', ['$scope', function ($scope{
$scope.ryanFirstname = "Ryan",
$scope.austinLastname = "Austin",
$scope.fullName = function() {
return $scope.ryanFirstname + " " + $scope.austinLastname;
}
}]);
嘿伙计们，
我尝试在我的 AngularJS 项目中使用外部 JS 文件，但无论我尝试什么，它似乎都无法识别该 JS 文件。 代码样本是复制的，但我理解它们，但我无法让它们运行。
我将JS粘贴到assets文件夹中。 html 文件位于 src 文件夹中。
感谢您的帮助和想法!
Chrome 中的错误代码: here new Errors
最佳答案
你的 Controller
var agentApp = angular.module('myApp',[]);
agentApp.controller('ryanContrler',function ($scope){
$scope.ryanFirstname = "Ryan",
$scope.austinLastname = "Austin",
$scope.fullName = function() {
return $scope.ryanFirstname + " " + $scope.austinLastname;
}
});
您的 HTML 应如下更改
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="angular/angular.js"></script>
<script src="assets/namesController.js"></script>
</head>
<body >
<!-- Method call from external JS files -->
<br>
<div ng-controller="ryanContrler">
My first name : <input type="text" ng-model="ryanFirstname">
<br> My last name : <input type="text" ng-model="austinLastname">
<br> My full name : {{fullName()}}
</div>
</body>
</html>
关于javascript - 在 AngularJS 项目中使用外部 JS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46320546/