Need help in the Angular js beginner

Question

I am a beginner in Angular js. I have written the code but I am getting the below output. Could you correct my code.

This is index.html:

<body>
  <div ng-controller="MainController">
    {{ value }}
    <h1>Hello, world</h1>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <script type="text/javascipt" src="app.js"></script>
</body>

</html>

This is code in the App.js:

angular.module('app',[]); 
var MainController = function($scope){ $scope.value="This is Angular" }

But I am getting this output: {{ $scope.value }} Hello, world

I have verified the console but I got the Error message.Click [here(https://docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2Fundefined%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:6:453%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:20:119%0A%20%20%20%20at%20a%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:19:353)%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:20:14%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:28:434%0A%20%20%20%20at%20Array.forEach%20(%3Canonymous%3E)%0A%20%20%20%20at%20q%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:7:261)%0A%20%20%20%20at%20e%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:28:374)%0A%20%20%20%20at%20Xb%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:32:427)%0A%20%20%20%20at%20c%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:17:315)!

(As an aside: if you link the un-minified version of angular into your project, you'll get readable error messages instead of those ridiculous URLs. Took me about a year to figure that one out. Just remember to switch back to the minified version before deploy!) — Daniel Beck

Sajeetharan Sajeetharan · Accepted Answer · 2017-08-10T15:51:52

Change your app.js code as follows,

 var app = angular.module('app',[]);
 app.controller('MainController',function($scope){
     $scope.value="This is Angular";
 });

DEMO

 var app = angular.module('app',[]);
app.controller('MainController',function($scope){
   $scope.value="This is Angular";
});

 <html ng-app="app">
  <body>
            <div ng-controller="MainController">
            {{ value }}
            <h1>Hello, world</h1>
            </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
      
</body></html>

Need help in the Angular js beginner

1 Answers