AngularJS cannot reach the AppService

Hi, First off, thank you for this fantastic tool! I have a lot to learn in order to use it properly. I apologize if I should not be asking this question here, and I wouldn’t be asking if I had not spent several days on the issue. I don’t think there’s any bug to report, I must be missing a step or doing a simple mistake.

I downloaded the ASP.NET MVC with AngularJS and Entity Framework, module zero sample. I added an entity called DivePlan, with only one string property name for now.

namespace PlanMyDive.DivePlan
{
    public class DivePlan : Entity
    {
        public virtual string Name { get; set; }


        public DivePlan() { }
        public DivePlan(string name)
        {
            this.Name = name;
        }

    }
}

Then I created a service in the application layer:

namespace PlanMyDive.DivePlan.Dto
{
    [AutoMapTo(typeof(DivePlan))]
    public class CreateDivePlanInput
    {
        [Required]
        public string Name { get; set; }
        
    }
}

namespace PlanMyDive.DivePlan
{
    public class DivePlanAppService : IDivePlanAppService
    {
        private readonly IRepository<DivePlan> _divePlanRepository;

        public DivePlanAppService(IRepository<DivePlan> personRepository)
        {
            _divePlanRepository = personRepository;
        }

        public void CreateDivePlan(CreateDivePlanInput input)
        {
            var diveplan = input.MapTo<DivePlan>();
            _divePlanRepository.Insert(diveplan);
        }
    }
}

namespace PlanMyDive.DivePlan
{
    public interface IDivePlanAppService : IApplicationService
    {
        void CreateDivePlan(CreateDivePlanInput input);
    }
}

Finally, I added a page Plans in the Angular routes and implemented as follows:

(function () {
    angular.module('app').controller('app.views.plans.plan', [
        '$scope', '$modal', 'abp.services.app.divePlan',
        function ($scope, $modal, divePlanService) {
            var vm = this;

            vm.divePlan = {
                name: 'MyDivePlan'
            };


            vm.createNewDivePlan = function () {
                abp.ui.setBusy();
                divePlanService.createDivePlan(vm.divePlan);
                abp.ui.clearBusy();
            };
        }
    ]);
})();

@using PlanMyDive.DivePlan
<div ng-controller="app.views.plans.plan as vm">
    <h1>Welcome to your DivePlan</h1>
    <div class="row">
        <div class="col-md-12">
            <form name="planCreateForm" role="form" novalidate class="form-validation">
                <button type="button" class="btn btn-default" ng-click="vm.createNewDivePlan()">Create Plan</button>
            </form>
        </div>
    </div>
    <div class="row">
        <table class="table">
            <thead>
                <tr>
                    <th>DivePlan Name</th>
                    <th>Autre</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="plan in vm.plans">
                    <td>{{plan.name}}</td>
                    <td>{{plan.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

I have a breakpoint in my JS code at the line divePlanService.createDivePlan(vm.divePlan); and a breakpoint in my DivePlanAppService when the function public void CreateDivePlan(CreateDivePlanInput input) is called. The issue I get is that the JS code executes but the DivePlanAppService function CreateDivePlan never executes, or at leave it never breaks at my breakpoint. The user interface shows the following:

I tried to simplify the code as much as I could. That’s why the Service method doesn’t do much so far. I tried register the service so that it’s API is built dynamically, but I believe this is already handled somewhere in the boilerplate, because I had error messages telling me the service was already registered. Yet, it feels like AngularJS cannot find my DivePlanAppService.

What did I miss? Am I not providing the CreateDivePlanInput in the proper format? I tried to copy how TenantAppService works. Please tell me if I need to provide you any more information that could help.

Thank you in advance, Corentin

[corentinaltepe]

Hi Halil, thank you very much for the great tools and your dedication to supporting it. I’ll follow your recommendations, and hopefully in a couple years release my own SaaS. Greeting from a fellow Istanbullu!

[hikalkan]

Hi,

As you found it, you missed some steps required by Entity Framework.

• Should add a DbSet for DivePlan into your DbContext (as you did in step 3). You can add [Table(“CstDivePlans”)] attribute to your entity instead of mapping it in OnModelCreating. But either way it works.
• Shoud use add-migration and update-database as you did.

BUT, not need to set AutomaticMigrationsEnabled = true. We don’t suggest it since automatic migrations are not safe it some cases. You can see this document to learn more: https://msdn.microsoft.com/en-us/library/dn481501(v=vs.113).aspx (“Avoid automatic migrations” section).