I seem to be at a standstill when it comes to finding a solution for my mvc.NET / angularjs project.
So far, I believe I've done a good job abstracting the view to use a controller that matches the type name of the specific controller.cs class:
<body ng-controller="@Model.ControllerType.Name">
...
</body>
Here is an example of the controller:
superSiteApp.controller("MediaController", ["$scope", "$window", "SubNavFactory", function ($scope, $window, SubNavFactory) {
...
});
While this approach has been successful, I have encountered difficulties with subnav-related tasks recently. For one section, I had to manually handle it (since it's not a service) by setting up a factory:
var superSiteApp = angular.module('superSiteApp', []);
superSiteApp.factory("SubNavFactory", ["subNavCollectionWrapper", function (subNavCollectionWrapper) {
return {
get: function() {
return subNavCollectionWrapper.get();
}
};
}]);
Later on, I integrated it like this:
@section AdditionalHeaderLinks
{
<script language="javascript" type="text/javascript">
superSiteApp.value("subNavCollectionWrapper", {
get: function() {
return @Html.Raw(Json.Encode(Model.Menus[1].Links));
}
});
</script>
}
This part functions well, but now I need to make a call to the API.
My idea is something along the lines of:
superSiteApp.service("SubNavFactoryUri", ["$http", "uri", function ($http, uri){
return $http.get(uri);
}]);
However, this is where I am stuck. In my new View.chtml file, I'm unsure how to establish that connection.
@section AdditionalHeaderLinks
{
<script language="javascript" type="text/javascript">
superSiteApp.value("subNavCollectionWrapper", /* struggling here */);
</script>
}
I can't seem to figure out how to reference the service and pass it in. While I could create a custom function class, I wanted to utilize angularjs.
Perhaps my approach is incorrect, but it's all I could come up with. Any advice or guidance would be greatly appreciated.
Thank you.