在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