CODEWITHSUNDEEP
javascripthtmlangularjs
Avdhesh sharma
Avdhesh sharma

Reputation: 1

data binding is not happening in angular js application

I am not able to do data binding using angularJS application.

The following is the HTML template file as databinding.html and Javascript file as invoice.js.

It is priting {{ fname }} {{ lname }} besides John Doe. 

<!DOCTYPE html
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div ng-app="myApp" ng-controller="InvoiceController">
        First Name :<input type="text" ng-model='fname' /><br />
        Last Name:<input type="text" ng-model='lname' /><br />
        {{ fname }} {{ lname }}
    </div>
    <script type="text/javascript" src="invoice.js"></script>
    <script type="text/javascript" src="angular.min.js"></script>
</body>
</html>

angular.module('myApp', []).controller('InvoiceController', ['$scope', 
function($scope) {
    $scope.fname = 'John';
    $scope.lname = 'Doe';
}]);

Upvotes: 0

Views: 32

Answers (1)

Harshil Shah
Harshil Shah

Reputation: 327

The order of the scripts is wrong. The controller logic won't work because it doesn't know what angular is yet.

Change this:

<script type="text/javascript" src="invoice.js"></script>
<script type="text/javascript" src="angular.min.js"></script>

to this:

<script type="text/javascript" src="angular.min.js"></script>        
<script type="text/javascript" src="invoice.js"></script>

Upvotes: 2

Related Questions