Telerik Reporting

Web.Config

<system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer></configuration>

WebApiConfig

Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(config);

Controller

using System;
using Telerik.Reporting;
using Telerik.Reporting.Cache.File;
using Telerik.Reporting.Services;
using Telerik.Reporting.Services.Engine;
using Telerik.Reporting.Services.WebApi;

namespace Hinfo.SmartPolice.Web.Controllers
{
    public class ReportsController : ReportsControllerBase
    {
        static ReportServiceConfiguration configurationInstance;

        static ReportsController()
        {
            configurationInstance = new ReportServiceConfiguration
            {
                HostAppId = "Hello",
                Storage = new FileStorage(),
                ReportResolver = new MyResolver()
            };
        }

        public ReportsController()
        {
                this.ReportServiceConfiguration = configurationInstance;
        }
        public class MyResolver : IReportResolver
        {
            public ReportSource Resolve(string report)
            {
                return new TypeReportSource { TypeName = report };
            }
        }
     
    }
}

directive

    app.directive("report", function () {
        return {
            restrict: 'EA',
            transclude: 'true',
            scope: {
                name: '=',
                para: '=',
                start: '='
            },
            template: '<div id="reportViewer1"  style="height:900px;100%;overflow: hidden;"/>',
            link: function (scope, element, attrs) {
                scope.$watch('start', function (nv) {
                    if (nv) {
                        scope.start = false;
                        if (element.attr('data-loadover')) {
                            var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
                            reportViewer.reportSource({
                                report: "Hinfo.Project.Web." + scope.name + ", Hinfo.Project.Web",
                                parameters: scope.para
                            })
                        } else {
                            $("#reportViewer1").telerik_ReportViewer({
                                serviceUrl: "/api/Reports/",
                                templateUrl: '/Content/ReportViewer/templates/telerikReportViewerTemplate.html',
                                reportSource: {
                                    report: "Hinfo.Project.Web." + scope.name + ", Hinfo.Project.Web",
                                    parameters: scope.para
                                },
                                viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                                scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                                scale: 1.0,
                                enableAccessibility: false,
                                ready: function () {
                                    element.attr('data-loadover', true);
                                },
                            });
                        }
                    }
                });
            }
        }
    })

Js

 $scope.start = true;
 $scope.name = "ProjectRpt";
 $scope.para = { StartTime: $scope.rpt.StartTime, EndTime: $scope.rpt.EndTime };

html

 <report name="name" para="para" start="start"></report>