在AngularJS项目中使用外部JS文件

Question

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粘贴到资源文件夹中。 html文件位于src文件夹中。

感谢您的帮助和想法！

Chrome中的错误代码：此处为新错误

Answer 1

您的控制器

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>

在AngularJS项目中使用外部JS文件

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-20 11:27:30

在AngularJS项目中使用外部JS文件

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-20 11:27:30

解决方案1
0 已采纳 2017-09-20 11:27:30