Forum


HomeHomePremiumPremiumDevelopmentDevelopmentAngular and WebAPIAngular and WebAPI
Previous
 
Next
New Post
10/14/2015 12:35 PM
 

Missing something probably silly here.  Went through videos on AngularJS in DNN mod dev by Scott which are an excellent starting point.  

In my Module I have several WebAPI methods that take input params, and I have verified they work by invoking direct in the browser such as:

/CourseList/API/CourseList/getCoursesByCategoryID?siteid=80&categoryID=3


In the video Scott you use a factory method call callGetService to call WebAPI.  How can I easily modify (or do I need to modify) to pass in multiple parameters to make the WebAPI call?  The parameter values I'm getting in page load from the Module settings.  I tried emulating the Post factory method and passing in '?siteid=80&categoryID=3' in a params variable and doing similar to the other factory method by using:

url: $self.ServiceRoot + method + params

 but no go, not parsing correctly.

Any thoughts where I might be going astray?


 
New Post
10/14/2015 1:38 PM
 

Sure enough, by time I get desperate and post, think I found a solution.  However, not sure if most efficient.  Any thoughts if there is a better way?

Here's what I did:

Created a new Factory method:

 callGetServiceWithParams: function (method, params) { 

            return $http({
                method: 'GET',
                url: $self.ServiceRoot + method, 
                headers: $self.Headers,
                params: params
            });
        },

Then in my controller and init function passed in the parameters:

fbs.CourseListApp.controller("CourseListByCategoryIDController", function ($scope, $window, $log, dnnServiceClient) {
    
    $scope.GetCoursesByCategoryID = function (siteid, categoryid) {
        var promiseResp = dnnServiceClient.callGetServiceWithParams("CourseList/GetCoursesByCategoryID", $scope.params);
        promiseResp.then(
            function (payload) {
                $scope.CourseList = payload.data; //careful, the name here is what you need to iterate through
            },
            function (errorPayload) {
                $log.error('failure loading items', errorPayload);
            }
        );
    }

    //Special Init function ng-init, to pass in the server side info ModuleID, permissions to Edit
    $scope.init = function (moduleId, moduleName, editable, siteid, categoryid) { 
        $scope.ModuleId = moduleId;
        $log.ModuleId
        $log.moduleName
        $scope.EditMode = editable;
        $scope.siteid = siteid;
        $scope.categoryid = categoryid;
        //?siteid=80&categoryID=3
        $scope.params = {
            "siteid": $scope.siteid,
            "categoryid": $scope.categoryid
        }
        dnnServiceClient.init(moduleId, moduleName);
        //done initializing, call the web API method
         $scope.GetCoursesByCategoryID();
        
    }
});


 

 
New Post
10/14/2015 2:52 PM
 

Rick,

I think that would work.  You may not need to set the params as a scope variable though.  You can probably build that simple object on the fly in your $scope.GetCoursesByCategoryID() method before passing to your factory.

Just as an FYI, if you watch my new Advanced Angular tutorial, I change the service approach to using an $http overload rather than the factory.  Check that out when you get the chance.

 

 
New Post
10/16/2015 8:03 AM
 

Good points.  Appreciate the response.  I'll check out the new video as well.

 
New Post
10/16/2015 9:34 AM
 

Excellent videos Scott, although my head just about exploded.   Went to install the Angular 2 module, however, looks like minimum DNN version went up past what I'm developing for.  I doubt it actually needs the higher version based on what I saw.  Tried to change the min version in manifest to install, but failed with a license error.  Is there another file I'd need to change?  If not I'll create solutions from scratch and add all files in.  Thanks again, keep the videos coming!

 
Previous
 
Next
HomeHomePremiumPremiumDevelopmentDevelopmentAngular and WebAPIAngular and WebAPI



Try FREE
30 days money back guaranteed