2016-07-13 20 views
0

私はデモを作成していますが、私はscript.jsファイルのコントローラを使用していますが、動作していません。角度コントローラ機能が動作していません。エラー:[ng:areq]

HTMLコード:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body ng-app> 
    <div ng-controller="simpleController"> 
    <strong>First name:</strong> {{firstName}}<br /> 
    <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> 
    <strong>Full name:</strong> {{getFullName()}}<br />  
    </div> 
</body> 
</html> 

script.jsコンソールで

var simpleController = function ($scope) 
{ 
    // Initialize the model variables 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 

    // Define utility functions 
    $scope.getFullName = function() 
    { 
    return $scope.firstName + " " + $scope.lastName; 
    }; 
}; 

エラー:あなたが好きなアプリを定義する必要があります

Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined 
O/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:22:508 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:23:78 
gf/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:273 


https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js 
Line 117 
+0

スニペットが正常に機能している場合は、「回答済み」とマークしてください。 –

答えて

2

をお読みください。

var app = angular.module("app",[]); 
 
app.controller("simpleController",simpleController); 
 

 

 
simpleController.$inject = ["$scope"]; 
 
function simpleController ($scope) 
 
{ 
 
    // Initialize the model variables 
 
    $scope.firstName = "John"; 
 
    $scope.lastName = "Doe"; 
 

 
    // Define utility functions 
 
    $scope.getFullName = function() 
 
    { 
 
    return $scope.firstName + " " + $scope.lastName; 
 
    }; 
 
};
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="simpleController"> 
 
    <strong>First name:</strong> {{firstName}}<br /> 
 
    <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> 
 
    <strong>Full name:</strong> {{getFullName()}}<br />  
 
    </div> 
 
</body> 
 
</html>

0

以下

var app = angular.module('app', []); 
app.controller('simpleController', simpleController); 

var simpleController = function ($scope) 
{ 
    // Initialize the model variables 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 

    // Define utility functions 
    $scope.getFullName = function() 
    { 
    return $scope.firstName + " " + $scope.lastName; 
    }; 
}; 

そして、あなたのコードに詳しく

var app = angular.module('app', []); 
app.controller('simpleController', ['$scope', function($scope){ 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 

    // Define utility functions 
    $scope.getFullName = function(){ 
     return $scope.firstName + " " + $scope.lastName; 
    }; 
}]); 

これを追加し、この

<body ng-app="app"> 
+0

まだ動作していません – Amit

+0

プランナーやスニペットを投稿できますか? – Srijith

0

ようなあなたのindex.htmlでアプリを使用するには、次のコードを実行しdependecy Injection

+0

まだ動作していません – Amit

+0

この方法でコントローラに宣言してください –

関連する問題