Angular js Controller not working well

Question

function studentController($scope) {
		$scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
	}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<html><title>AngularJS First Application</title>
	<body><h1>Sample Application</h1>
		<div ng-app="" ng-controller="studentController">
			<p>
				Enter your Name:<input type="text" ng-model="data">
			</p>
			<p>
				Hello <span ng-bind="data"></span>!
			</p>
		</div>

		<br />
		<table border="1px">
		<tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
		<tr><td>student.firstName</td><td>student.lastName</td><td>student.fullName</td></tr>

		</table>
		<script src="angular.min.js"></script>
	</body>
</html>

<script>
	
</script>

I am new in Angular js and start to make program but ng-controller not working,When I added a ng-controller="studentController" normal angular ng-bind="data" program also not working so Please anyone help me out what's wrong in it.

Thanks

Priyanka Sankhala

Possible Duplicate of - stackoverflow.com/questions/26602883/… — Utkarsh Dubey
– Utkarsh Dubey, Commented Jun 10, 2017 at 11:47

Sajeetharan · Accepted Answer · 2017-06-10 11:47:36Z

There are many issues with your code!

(i) Your angular version and the way you've defined the controller. You should have a module name declared as follows,

ngular.module('myApp',[])

(ii) Use the expression {} with the model name in your HTML, example,

{{student.firstName}}

(iii) fullName is a function so you need to call like,

<td>{{student.fullName()}}</td>

DEMO

angular.module('myApp',[]).controller('studentController', function($scope){
  $scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
          
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<title>AngularJS First Application</title>
<body>
    <h1>Sample Application</h1>
    <div ng-app="myApp" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>
        <br />
        <table border="1px">
            <tr>
                <th>Fisrt Name</th>
                <th>Last Name</th>
                <th>Full Name</th>
            </tr>
            <tr>
                <td>{{student.firstName}}</td>
                <td>{{student.lastName}}</td>
                <td>{{student.fullName()}}</td>
            </tr>
        </table>
    </div>
</body>

abdoutelb · Accepted Answer · 2017-06-10 11:47:41Z

0

you should define an app for the angular and add a controller under it

    angular.module('app', []).controller('studentController', function($scope) {
  $scope.student = {
        firstName : "Mahesh",
        lastName : "Parashar",
        fullName : function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
        }
    };
});

Then add the app name in ng-app

answered Jun 10, 2017 at 11:47

abdoutelb

1,0631 gold badge15 silver badges34 bronze badges

Comments

Rakesh Burbure · Accepted Answer · 2017-06-11 18:58:31Z

I have tried to modify this program little bit to get it working and code is as below.

JavaScript.js

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

    function studentController($scope) {
    $scope.student = {
        firstName: "Mahesh",
        lastName: "Parashar",
    };
    $scope.getFullName = function () {
        var studentObject;
        studentObject = $scope.student;
        //return studentObject.firstName + " " + studentObject.lastName;
        $scope.student.fullName = studentObject.firstName + " " + studentObject.lastName;
    }
}

HtmlPage

<html>
<head>
    <title>AngularJS First Application</title>
</head>
<body>
    <h1>Sample Application</h1>
    <div ng-app="app" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>


        <br />
        <table border="1px">
            <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
            <tr><td>{{student.firstName}}</td><td>{{student.lastName}}</td><td>{{student.fullName}}</td></tr>
            <tr> <input type="button" value="Get Full Name" ng-click="getFullName()"/> </tr>
        </table>
    </div>
    <script src="../angular.js"></script> <!--This is the angularJS libyrary file-->
    <script src="JavaScript.js"></script> <!--This is your java script file-->
</body>
</html>

Please let me know if you need if it works for you or not.

Collectives™ on Stack Overflow

Angular js Controller not working well

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related