I am trying to build my first AngularJS app but it is not working, i am unable to find the problem why it is not working. It is not showing the name and result of sayHello function on the html page.
This is my js and html file.
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]);
.controller('myFirstController', function($scope){
// body...
$scope.name = "Isha";
$scope.sayHello = function() {
// body...
return "Hello";
}
});
})();<html>
<head>
<title>My First AngularJS App</title>
<script src=".4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>I am trying to build my first AngularJS app but it is not working, i am unable to find the problem why it is not working. It is not showing the name and result of sayHello function on the html page.
This is my js and html file.
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]);
.controller('myFirstController', function($scope){
// body...
$scope.name = "Isha";
$scope.sayHello = function() {
// body...
return "Hello";
}
});
})();<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>- Could you offer a fiddle? – binariedMe Commented Mar 23, 2017 at 19:12
- 1 angular.module('myFirstApp',[]); remove the ; from this line of code – Rajan Patil Commented Mar 23, 2017 at 19:12
-
1
Remove the semicolon after
angular.module('myFirstApp',[])– Nikhil Bhandari Commented Mar 23, 2017 at 19:13 -
Did you not see
Uncaught SyntaxError: Unexpected token .in the console? Eliminate any issues that aren't relevant to the problem. If your question isn’t about a piler error, ensure that there are no pile-time errors. – georgeawg Commented Mar 24, 2017 at 4:51
4 Answers
Reset to default 5Just remove the ; after the Module, and add the controller. Otherwise you need to declare as
var app = angular.module('myFirstApp',[]);
then
app.controller('myFirstController', function($scope){
DEMO
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]).controller('myFirstController', function($scope){
$scope.name = "Isha";
$scope.sayHello = function() {
return "Hello";
}
});
})();<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>You have a semicolon too much
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]) // <= note I removed the ;
.controller('myFirstController', function($scope){
// body...
$scope.name = "Isha";
$scope.sayHello = function() {
// body...
return "Hello";
}
});
})();<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>Remove the semi-colon after:
angular.module('myFirstApp',[]); // <-- Remove this semi-colon
You can do it by two ways:
1: Assign your module in a variable
var app = angular.module('myFirstApp',[]);
app.controller('myFirstController', function($scope){
// body...
});
2: You can directly take the reference of your module in your controller
angular.module('myFirstApp',[])
.controller('myFirstController', function($scope){
//body.....
});