tech_boy February 2016

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.

Answers


RIYAJ KHAN February 2016

Please do following changes

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

JS

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

app.controller("nameController",nameController)

Please check updated fiddle


gtlambert February 2016

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


ashfaq.p February 2016

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">


Mhand7 February 2016

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>

Post Status

Asked in February 2016
Viewed 3,827 times
Voted 10
Answered 4 times

Search




Leave an answer