Umbraco cannot find the route in backoffice

Question

I've used Umbraco 7.3 in my project. I created a custom data type but when I want to call a Surfacecontroller in here is HelloSurfaceController or Hello2SurfaceController, I got an error in umbraco backoffice that said Request error: The URL returned a 404 (not found):

I studied some articles about routing but I couldn't solve my problem. I don't know that where I did wrong.

How can I solve this problem?

Reply.controller.js:

angular.module("umbraco")
.controller("Reply.controller", function ($scope, $http) {
    $scope.SendReply = function () {
        var sendTo = $("#Email").val();
        var textMessage = $("#TextMessage").val();

        $scope.xxx = "I'm here!";
        var data = { SendTo: sendTo, TextMessage: textMessage };
        //   ~/Hello2Surface/ReplyMessage  ---> Cannot find this URL
        $http.post("~/App_Plugins/Reply/HelloSurface/ReplyMessage") // Can not find this URL
            .then(function (response) {
                alert("YES!");
                //TODO: 
            });
    }
});

SurfaceController

 namespace Jahan.Nuts.Web.Mvc.UmbracoCms.App.App_Plugins.Reply
 {
    public class HelloSurfaceController : SurfaceController
    {
        [HttpPost][ChildActionOnly]
        public ActionResult ReplyMessage()
        {
            //TODO: how should be write this method that be proper for getting data from angularjs?
            return null;
        }
    }
 }

package.manifest

{
propertyEditors: [
    {
        alias: "Send.Reply",
        name: "Send Reply",
        editor:{
            view:"~/App_Plugins/Reply/Reply.html"
        },
    }
]
,
javascript:[
    '~/App_Plugins/Reply/Reply.controller.js'
]
}

Reply.html

<div ng-controller="Reply.controller">
<div style="width: 100%;">
    <input type="button" value="Send Reply" title="SendReply" name="Send Reply" ng-click="SendReply()" />
</div>
<div>
    <input type="text" ng-model="xxx" name="message" />
</div>

Error in umbraco backoffice:

Answer 1

remove the "Surface" from the URL and include "backoffice":

 angular.module("umbraco")
    .controller("Reply.controller", function ($scope, $http) {
        $scope.SendReply = function () {
            var sendTo = $("#Email").val();
            var textMessage = $("#TextMessage").val();

            $scope.xxx = "I'm here!";
            var data = { SendTo: sendTo, TextMessage: textMessage };
            //   ~/Hello2Surface/ReplyMessage  ---> Cannot find this URL
            $http.post("backoffice/Reply/Hello/ReplyMessage") // Can not find this URL
                .then(function (response) {
                    alert("YES!");
                    //TODO: 
                });
        }
    });

Also, I'd recommend using UmbracoAuthorizedController not a surface controller as this is being used in the back end by logged in users it'll be wise to keep it secure.

So instead your controller should look something like this:

[PluginController("Reply")]
namespace Jahan.Nuts.Web.Mvc.UmbracoCms.App.App_Plugins.Reply
 {
    public class HelloApiController : UmbracoAuthorizedJsonController
    {
        public [Model-to-be-returned-to-angular] ReplyMessage()
        {
            //sql query etc to populate model
            //return model
        }
    }
 }