How to pass url from view to Angularjs Controller file?

Question

I am passing url from view to controller for $http.Post .

View(Asp.net MVC View)

<form  name="form" ng-controller="LoginController" >
    <div id="dvContainer" ng-init="Url= @Url.Action("VerifyLogin", "Visitor")">
        <span ng-model="Message" class="text-danger"></span>
        <table>
            <tr>
                <td>UserName</td>
                <td>
                    <input name="txtUser" type="text" required ng-model="UserName" />
                    <span ng-show="(form.txtUser.$dirty || submitted) &&
                               form.txtUser.$error.required">UserName is required.</span>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" required ng-model="Password" /></td>
            </tr>
            <tr>
                <td colspan="2"><button type="submit" ng-click="submit($event)">Login</button></td>
            </tr>
        </table>

    </div>
</form>

In my Controller(Angularjs Controller)

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

//AngularJS controller
app.controller('LoginController', function ($scope, $http) {
    $scope.submit = function () {
        alert('hi')
        // Set the 'submitted' flag to true
        alert($scope.UserName);
        alert($scope.Password);
        var loginModel = {
            UserName: $scope.UserName,
            PassWord:$scope.Password
        };

        $http.post($scope.Url, loginModel).success(function (data) {
            $scope.Message = data.Message;
        }).error(function (data) {
            $scope.error = "An error has occured while adding! " + data;
        });
    };
});

I am trying to access Url that is being defined using ng-init . The application is throwing error

[$parse:syntax] Syntax Error: Token '/' not a primary expression at column 6 of the expression [Url= /Visitor/VerifyLogin] starting at [/Visitor/VerifyLogin].

I am pretty new to Angularjs so Could not figure out what is that i am doing wrong.

Answer 1

You can use the angular value provider to pass this url ( or any other stuff)from your view to your angular controller.

Just create a javascript object and create a Url property and set the value of this and use the value provider to pass this object.

@section Scripts
{
   <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script>
   <script>
        var myApp = myApp || {};
        myApp.Settings = myApp.Settings || {};
        myApp.Settings.Url= "@Url.Action("VerifyLogin","Visitor")";
        angular.module("app").value("appSettings", myApp);
   </script>
}

Now in your controller, simply use the appSettings object

var app = angular.module("app", []);
app.controller('ctrl', ['$scope', 'appSettings', function ($scope, appSettings) {
    $scope.URL = 'nothing';
    $scope.greeting = 'Hola!';
    console.log('Url  ', appSettings.Settings.Url);
    // You can use appSettings.Settings.Url for your ajax calls now
}]);

Answer 2

I have been experiencing the same issue, and didn't want to use value to pass the Url.Action to my controller. I found out that adding an apostrophe at the beginning and end of the Url.Action's returned value solves the issue. I ended up writing this extension to help me:

  public static MvcHtmlString ActionString(this UrlHelper url, string action, string controller, object routeValues)
    {
        return MvcHtmlString.Create("'" + url.Action(action, controller, routeValues) + "'");
    }