Base solution for your next web application
Open Closed

Calling get-method from AngularJs controller #298


User avatar
0
julian created

Hi!

I'm having difficulties with the get-method in AngularJs. I have followed the step-by-step guide, wich has been very good, but when I apply the instructions on my own project the results does'nt show and I have no idea what is wrong.

This is my js code:

(function () { appModule.controller('tenant.views.bet.index', [ '$scope', 'abp.services.app.tenantBetType', function ($scope, tenantBetTypeService) { var vm = this;

        $scope.$on('$viewContentLoaded', function () {
            Metronic.initAjax();
        });//this part doesnt exist in the tutorial but it does in the other views in my project so I just assumed it should be                 //there.

        vm.getBetTypes = [];

        tenantBetTypeService.getBetTypes({}).success(function (result) {
            vm.betTypes = result.items;
        });


        //...
    }
]);

And here is my cshtml code:

<div ng-controller="tenant.views.bet.index as vm"> <div class="row margin-bottom-5"> <div class="col-xs-6"> <div class="page-head"> <div class="page-title"> <h1> <span>@L("Bet")</span> </h1> </div> </div> </div> <div class="col-xs-6 text-right"> <button class="btn btn-primary blue" @ng-click="vm.doIt1()"@><i class="fa fa-plus"></i> ACTION_ONE</button> <button class="btn btn-primary blue" @ng-click="vm.doIt2()"@><i class="fa fa-plus"></i> ACTION_TWO</button> </div> </div> <div class="portlet light"> <div class="portlet-body"> <h3>@L("AllBetTypes")</h3>

        &lt;div class=&quot;list-group&quot;&gt;
            &lt;a href=&quot;javascript:;&quot; class=&quot;list-group-item&quot; ng-repeat=&quot;betType in vm.betTypes&quot;&gt;
                &lt;h4 class=&quot;list-group-item-heading&quot;&gt;
                    {{betType.BetTypeCode}} {{betType.BetTypeName}}  //the attributes i want to call
                &lt;/h4&gt;
            &lt;/a&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;

</div>


5 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    Your controller and view seems fine at a first look. I sugges to make some ckecks to understand it better.

    1. Open chrome' developer tools console if there is an error?
    2. Open developer tool's network tab to see if a request made for getBetTypes method.
    3. See logs in Web project's Logs folder if there is any error.

    If you can't find the reason, you can also share your application service class and the application service

  • User Avatar
    0
    julian created

    1: Here I get the following errors:

    Error: [$injector:unpr] <a class="postlink" href="http://errors.angularjs.org/1.4.0/$injector/unpr?p0=abp.services.app.tenantBetTypeProvider%20%3C-%20abp.services.app.tenantBetType%20%3C-%20tenant.views.bet.index">http://errors.angularjs.org/1.4.0/$inje ... .bet.index</a> at Error (native) at <a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:6:416">http://localhost:6234/Scripts/angular.min.js:6:416</a> at <a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:40:204">http://localhost:6234/Scripts/angular.min.js:40:204</a> at Object.d [as get] (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:38:175">http://localhost:6234/Scripts/angular.min.js:38:175</a>) at <a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:40:278">http://localhost:6234/Scripts/angular.min.js:40:278</a> at d (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:38:175">http://localhost:6234/Scripts/angular.min.js:38:175</a>) at Object.e [as invoke] (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:38:445">http://localhost:6234/Scripts/angular.min.js:38:445</a>) at We.$get.Q.instance (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:79:299">http://localhost:6234/Scripts/angular.min.js:79:299</a>) at M (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:60:483">http://localhost:6234/Scripts/angular.min.js:60:483</a>) at g (<a class="postlink" href="http://localhost:6234/Scripts/angular.min.js:54:300">http://localhost:6234/Scripts/angular.min.js:54:300</a>) <div ui-view="" class="fade-in-up ng-scope">

    2: Couldnt find any getBetType or anything like that in the Network tab.

    3: Couldnt even find a log file...

    BetTypeAppService:

    class BetTypeAppService : ExpertspelServiceBase, IBetTypeAppService
        {
            private readonly IRepository<BetType> _betTypeRepository;
    
        public BetTypeAppService(IRepository<BetType> personRepository)
        {
            _betTypeRepository = personRepository;
        }
    
        public ListResultOutput<BetTypeListDto> GetBetTypes(GetBetTypeInput input)
        {
            var betType = _betTypeRepository
                .GetAll()
                .WhereIf(
                    !(input.Filter==null),
                    p => p.BetTypeCode.Contains(input.Filter) ||
                            p.BetTypeName.Contains(input.Filter)
                )
                .OrderBy(p => p.BetTypeCode)
                .ThenBy(p => p.BetTypeName)
                .ToList();
    
            return new ListResultOutput<BetTypeListDto>(betType.MapTo<List<BetTypeListDto>>());
        }
    
        }
    

    And the get class

    class GetBetTypeInput:IInputDto
        {
            public string Filter { get; set; }
        }
    
        [AutoMapFrom(typeof(BetType))]
        public class BetTypeListDto : FullAuditedEntityDto
        {
            public string BetTypeCode { get; set; }
    
            public string BetTypeName { get; set; }
        }
    

    The interface for BetTypeAppService:

    interface IBetTypeAppService : IApplicationService
        {
            ListResultOutput<BetTypeListDto> GetBetTypes(GetBetTypeInput input);
        }
    

    And finally the AppServiceBase class:

    public abstract class ExpertspelAppServiceBase : ApplicationService
        {
            public TenantManager TenantManager { get; set; }
    
            public UserManager UserManager { get; set; }
    
            protected ExpertspelAppServiceBase()
            {
                LocalizationSourceName = ExpertspelConsts.LocalizationSourceName;
            }
    
            protected virtual Task<User> GetCurrentUserAsync()
            {
                var user = UserManager.FindByIdAsync(AbpSession.GetUserId());
                if (user == null)
                {
                    throw new ApplicationException("There is no current user!");
                }
    
                return user;
            }
    
            protected virtual User GetCurrentUser()
            {
                var user = UserManager.FindById(AbpSession.GetUserId());
                if (user == null)
                {
                    throw new ApplicationException("There is no current user!");
                }
    
                return user;
            }
    
            protected virtual Task<Tenant> GetCurrentTenantAsync()
            {
                return TenantManager.GetByIdAsync(AbpSession.GetTenantId());
            }
    
            protected virtual Tenant GetCurrentTenant()
            {
                return TenantManager.GetById(AbpSession.GetTenantId());
            }
    
            protected virtual void CheckErrors(IdentityResult identityResult)
            {
                identityResult.CheckErrors(LocalizationManager);
            }
        }
    

    Okey so when i read the summary in the base class I may have found out what I have done wrong, should I insert the getBetType method in the base class too?

  • User Avatar
    0
    julian created

    Any Idea what could be the problem?

  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    Your application service name does not match with the injected service in the angular controller. True controller should be like that:

    (function() {
        appModule.controller('tenant.views.bet.index', [
        '$scope', 'abp.services.app.betType',
        function($scope, betType) {
            var vm = this;
    
            $scope.$on('$viewContentLoaded', function() {
                Metronic.initAjax();
            }); //this part doesnt exist in the tutorial but it does in the other views in my project so I just assumed it should be //there.
    
            vm.getBetTypes = [];
    
            betType.getBetTypes({}).success(function(result) {
                vm.betTypes = result.items;
            });
    
    
            //...
        }
    ]);
    

    So, 'abp.services.app.tenantBetType' should be 'abp.services.app.betType'. I thisk that you accidently add tenant prefix here.

    Have a nice day.

  • User Avatar
    0
    hikalkan created
    Support Team

    Julian,

    Since you have purchased AspNet Zero, you can ask urgent questions on the premium support forum: <a class="postlink-local" href="http://forum.aspnetboilerplate.com/viewforum.php?f=5">viewforum.php?f=5</a>

    Note: But if your questions are not urgent, you can continue to ask in the community forum, so other developers can reply it.