title: Failed to load resource: the server responded with a status of 405 (Method Not Allowed) from Angularjs to WebApi
body: <p>I am using AngularJS to call my webAPI and getting below error...</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://localhost:52240/api/PcpEnvironment/
  XMLHttpRequest cannot load http://localhost:52240/api/PcpEnvironment/. Invalid HTTP status code 405 
  </code></pre>
  
  <p>Here is my call to webapi...</p>
  
  <pre><code>    angular.module('PcPortal')
  
  .controller('UpdateEnvironmentController', UpdateEnvironmentController);
  
  UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];
  
  function UpdateEnvironmentController($scope, $rootScope, $http) {
  
      $scope.selectedEnv = $rootScope.selectedEnv;
  
      $scope.updateEnv = function () {
          alert('Updating env');
          var envData = angular.toJson($rootScope.selectedEnv);
  
          var config = {
              method: 'POST',
              url: 'http://localhost:52240/api/PcpEnvironment/Post/',
              headers: {
                  "Content-Type": "application/json"
              },
              data: { env: envData }
          };
  
          $http(config)
              .then(function successCallback(response) {
                  alert(response);
              },
                  function errorCallback(response) {
                      alert('Failed: ' + response);
                  });
  
      }
  };
  </code></pre>
  
  <p>WebApI method...</p>
  
  <pre><code> [HttpPost]
          public bool Post(PcpEnvironment env)
          {
              return _service.UpdateEnvironment(env);
          }
  </code></pre>
  
  <p>in my webapiconfig file... I have added below,...</p>
  
  <pre><code>System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
              config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());
  </code></pre>
  
  <p>f I remove one <code>$http</code> ... my bindings stop working... and for <code>var webadmin = angular.module('PcPortal',[]);</code> I have separate bootstrap file to do that... here I am just getting the reference of same app.</p>
  
  <p>In order to get my binding working... I need to change the order of input like below...</p>
  
  <pre><code>UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];
  
  function UpdateEnvironmentController($scope, $rootScope, $http) 
  </code></pre>
  
  <p>With new definition of controller as suggeted... I am getting below error...</p>
  
  <pre><code>TypeError: object is not a function
  </code></pre>
  
  <p>This error is for using $http to make call to server.
  Can help what's wrong here.</p>