Base solution for your next web application
Open Closed

Display Data with Angular data binding on Home Page #1224


User avatar
0
omkarchoudhari created

I need to display data from the database on the Home page . I created the service and could successfully call the data from the Browser Console after logging in to the application. I created the angular controller in the Views/Home/Index.js file and added data binding code to Index.cstml. However i am unable to bind the data to angular controls. My data should be displayed in the host and not related to any tenant.

Index.js:

(function () {

appModule.controller('Views.Home.Index', [
    '$scope', 'abp.services.app.plan',
    function ($scope, planService) {
        var vm = this;
       
        vm.plans = [];

        planService.GetPlans({}).success(function (result) {
            vm.plans = result.items;
        });
    }
]);

})();

Index.cshtml:

<div ng-controller="Views.Home.Index as vm"> <h3>All Plans</h3>

    &lt;div class=&quot;list-group&quot;&gt;
        &lt;a href=&quot;javascript:;&quot; class=&quot;list-group-item&quot; ng-repeat=&quot;plan in vm.plans&quot;&gt;
            &lt;h4 class=&quot;list-group-item-heading&quot;&gt;
                {{plan.PlanName}} {{plan.RatePerUser}}
              
            &lt;/h4&gt;
            &lt;p class=&quot;list-group-item-text&quot;&gt;
                {{plan.Features}}
            &lt;/p&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;

================================


1 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    By default HomePage is not a part of single page application, it's a classic Asp.Net MVC multi page application.

    You can convert it to a single page application by implementing a similar code in app.js but it requires a bit more work.

    Why don't you get data from your AppService in HomeController and pass it to your view with a view model. I think it's a better and easier solution :).