CODEWITHSUNDEEP
angularjs
tech_boy
tech_boy

Reputation: 195

Initializing the Angular Model using an Angular Controller

<!doctype html>
<html lang="en" data-ng-app>
<head>
    <meta charset="utf-8">
    <title>AngulasJS Demo3</title>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
        function nameController($scope){
            $scope.firstname = 'John';
            $scope.lastname = 'Smith';
        }
    </script>
</head>
<body data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"></input> 
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"></input> 
<br />
<br />
Hello {{ firstname }} {{lastname}}

</body>
</html>

Initialized the model with an global function where I have declare Scope object and using it I am passing the firstname and lastname to the view.

Output :

Here the firstname and lastname values are not getting reflected.

enter image description here

JSFiddle Link here

Edit : I found this code here, and the output.

Upvotes: 0

Views: 96

Answers (3)

Mhand7
Mhand7

Reputation: 537

here is a running fiddler for you code running Code

you need always to have a defind app for the angular to work and the controller should be part of that app.

	<title>AngulasJS Demo3</title>
	<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
	<script>
  var myApp = angular.module("myApp",[]);
  myApp.controller("nameController", ['$scope', function($scope) {
     $scope.firstname = 'John';
			$scope.lastname = 'Smith';
   }]);
	</script>

<body ng-app="myApp" data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"/> 
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"/>
<br />
<br />
Hello {{ firstname }} {{lastname}}

</body>

Upvotes: 0

ashfaq.p
ashfaq.p

Reputation: 5487

For an angular application to work, you need to define the module. Which you have not done.

define a app like this: 

var myapp = angular.module('myapp', []);

then refrence this app in your html like this:

<html lang="en" data-ng-app="myapp">

Upvotes: 0

gtlambert
gtlambert

Reputation: 11971

I would usually reference my app directly by declaring it as a variable in the JavaScript, and then referencing the name of the app in the declaration in the html tag. The following will work:

<html lang="en" data-ng-app="myapp">
<head>
    <title>AngulasJS Demo3</title>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
        var myapp = angular.module('myapp', []);
        myapp.controller('nameController', ['$scope', function($scope){
            $scope.firstname = 'John';
            $scope.lastname = 'Smith';
        }]);
    </script>
</head>
<body data-ng-controller="nameController">
    First Name : <input type = "text" data-ng-model="firstname"></input> 
    Last Name : <input type = "text" data-ng-model="lastname"></input> 
    Hello {{ firstname }} {{lastname}}
</body>
</html>

JSFiddle

Upvotes: 0

Related Questions