1

I've been searching the web, but can't seem to find a good answer on this...

Is this the correct way to pass a controller/action URL to Angular?

<div ng-controller="MainCtrl" 
    ng-init="getScheduleUrl = '@(Url.Action("GetSchedule"))'">

or is there a better way to do it? If I have a lot of URL's to pass, this could get pretty messy pretty fast.

Scottie
  • 11,050
  • 19
  • 68
  • 109
  • Take a look at this answer and see if it works for you. I've used the technique on a couple of projects to pass constants and settings from MVC to Angular... http://stackoverflow.com/a/24764222/3199781 – Anthony Chu Jul 17 '14 at 22:52

2 Answers2

2

Hi there is lot of approaches but i like this one:

usually on my home/index view 

<script>
  angular.module('app').factory('dataStrap', function ()
    {

        var _data = @Html.Raw(ViewBag.Json);
        var _getScheduleUrl = @(Url.Action("GetSchedule");
        //or 
        var _someUrls =[
                          {urla: @(Url.Action("GetSchedule")}
                          {urlb: @(Url.Action("GetSchedule")}
                        ];
        return {
            data : _data,
            getScheduleUrl : _getScheduleUrl,
            someUrls :_someUrls 
        }

   angular.module('app').controller('myController', function($scope, dataStrap){

       $scope.ScheduleUrl = dataStrap.getScheduleUrl;

   })

</script>

after that you can inject dataStrap to any controller and .. voila !

sylwester
  • 16,498
  • 1
  • 25
  • 33
1

This is tempting when first starting out with Angular, but I don't like the "double templating" approach. It helps to think of Angular as just another client, as disconnected from your web API as your Android or iOS app is. This provides a clean separation between client and server. In Angular (and most types of clients) there is an intermediary layer that abstracts core UI code from the server API. Angular calls this layer services.

Here's a pretty good example of how the pieces fit together (I would use $resource instead of all of those $http calls).

Andy Gaskell
  • 31,495
  • 6
  • 74
  • 83
  • You mean that instead of doing REST calls to the server using $http, that I should use REST calls using $resource instead? – Scottie Jul 18 '14 at 03:43
  • $http/$resource is a matter of style, my main idea is that you decouple your Angular app from your API, don't use server side _and_ client side templating. One or the other :) I can add an example service and controller to my answer if that helps, just let me know. – Andy Gaskell Jul 18 '14 at 03:44
  • 2
    I'm not sure where templating is coming in here? With ASP.Net, depending on the server I'm running on, my url might be http://localhost/MyWebApp/Schedule/Get or http://MyProdWebApp/Schedule/Get. Using the @Url.Action, I can get the URL. If I were to try and just use /schedule/get in the Angular controller, it would fail on my dev PC, because I need /MyWebApp/schedule/get. This is just an easy way to pass the exact URL into Angular for when I need to do a $http request. – Scottie Jul 18 '14 at 03:59
  • 1
    @Url.Action is server side templating. All Angular views use client side templating. Ideally, your web server serves static content and a Web API. There's a way to build your Angular application that does not couple it to ASP.NET (or any backend). You might not care about this. In one of my apps I need to be able to swap endpoints like you do. I use grunt-ng-constant: http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/ – Andy Gaskell Jul 18 '14 at 05:23
  • +1 for grunt! I'm going to investigate this solution! – Scottie Jul 18 '14 at 15:00