Uncaught TypeError: app.all is not a function

Question

I have a very simple angular page here

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <p>Today's welcome message is:</p>
  <h1>{{myData}}</h1>

</div>

<script>

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

  app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

  }

  ]);


  // Added all header request and response.
  app.all('/*', function (request, response, next) {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "X-Requested-With");
    response.header("Access-Control-Allow-Methods", "GET, POST", "PUT", "DELETE");
    next();
  });



  app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});


</script>

---

I kept getting this in my console.

Uncaught TypeError: app.all is not a function

How do I prevent that ?

I'm following this :

https://stackoverflow.com/a/21455819/4480164

Answer 1

Just pointing this out because I cannot comment due to low rep, but you are also calling ng-app="myApp" which is looking for a module call for myApp and you do not have a module call for myApp so your controller will not fire correctly either maybe re-word your myApp to app?