Why AngularJs load error when just referencing ng-app and ng-controller

Question

Why do I get error in console for:

  <!DOCTYPE html>
  <html ng-app="MyApp" ng-controller="myCtrl">
  <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
  </head>
  <body>

  </body>
  </html>

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MyApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3DMyApp%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A24%3A66%0A%20%20%20%20at%20a%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A109)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A352%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A381%0A%20%20%20%20at%20m%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A7%3A322)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A229)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A40%3A503)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A19%3A339)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A20%3A151) at angular.js:38 at angular.js:4385 at m (angular.js:336) at g (angular.js:4346) at eb (angular.js:4272) at d (angular.js:1630) at Ac (angular.js:1651) at Zd (angular.js:1545) at angular.js:28359 at HTMLDocument.a (angular.js:2996)

Sajeetharan Sajeetharan · Accepted Answer · 2018-02-23T01:23:21

You need to declare the module and controller under the script or in a separate file

<!DOCTYPE html>
  <html ng-app="MyApp" ng-controller="myCtrl">
  <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
 </head>
 <body>
 <h1>{{text}}</h1>
 <script>
   var app = angular.module('MyApp',[]);
   app.controller('myCtrl',function($scope){
       $scope.text = "Works";
   });
 </script>
 </body>
 </html>

Why AngularJs load error when just referencing ng-app and ng-controller

2 Answers