AngularJS: The templateUrl is being rendered before the controller is able to execute any further actions

Question

AngularJS: The templateUrl is being rendered before the controller is able to execute any further actions

My current code is causing some trouble:

angular.module("cattle_feed_frontend", ['ngResource','ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/',
                { 
                    controller: 'FeedController',
                    templateUrl: 'templates/FeedList.html'
                }).
            otherwise({
                redirectTo: '/'
            });

    }]) 
    .controller('FeedController', function($scope, feeds_factory) {

        $scope.feeds = feeds_factory.allFeeds();
    })
.factory('feeds_factory',['$http', function($http){
return {
    allFeeds : function(){
        $http.get("http://localhost:3000/feeds").then(function(response) 
         {
           return response.data;
         });
    }
}
}])

The issue arises in the controller where feeds_factory.allFeeds() is making an HTTP call to a 3rd party. The problem is that my template is being rendered before the HTTP call is made. This results in the ng-repeat in my template not displaying anything because $scope.feeds is set after the rendering process:

<tr ng-repeat="feed in feeds">
    <td>
        {{feed.ingredient}}
    </td>
    <td>
        {{feed.cost_kg}}
    </td>

</tr>

javascript angularjs

Answer 1

Answer №1

When using $routeProvider, it is important to let it know that your controller will make an HTTP request and needs to wait for the response. This can be achieved by using the resolve property of a route:

$routeProvider.
    when('/',
        { 
            controller: 'FeedController',
            templateUrl: 'templates/FeedList.html',
            resolve: {
                feeds: function(feeds_factory) {
                    return feeds_factory.allFeeds();
                }
            }
        }).
    otherwise({
        redirectTo: '/'
    });

Make sure to return the promise from feeds_factory:

factory('feeds_factory',['$http', function($http){
    return {
        allFeeds : function(){
            return $http.get("http://localhost:3000/feeds").then(function(response) {
                return response.data;
            });
        }
    }
}])

Finally, inject the feeds into the controller:

controller('FeedController', function($scope, feeds) {
    $scope.feeds = feeds;
})

Answer 2

When using $routeProvider, it is important to let it know that your controller will make an HTTP request and needs to wait for the response. This can be achieved by using the resolve property of a route:

$routeProvider.
    when('/',
        { 
            controller: 'FeedController',
            templateUrl: 'templates/FeedList.html',
            resolve: {
                feeds: function(feeds_factory) {
                    return feeds_factory.allFeeds();
                }
            }
        }).
    otherwise({
        redirectTo: '/'
    });

Make sure to return the promise from feeds_factory:

factory('feeds_factory',['$http', function($http){
    return {
        allFeeds : function(){
            return $http.get("http://localhost:3000/feeds").then(function(response) {
                return response.data;
            });
        }
    }
}])

Finally, inject the feeds into the controller:

controller('FeedController', function($scope, feeds) {
    $scope.feeds = feeds;
})

Answer 3

Answer №2

To resolve the issue, consider updating your code as follows:

.controller('FeedController', function($scope,new_feeds_factory) {

    new_feeds_factory.getAllFeeds()
        .then(function(updates) {
            $scope.updates = updates;
        });
})

Answer 4

To resolve the issue, consider updating your code as follows:

.controller('FeedController', function($scope,new_feeds_factory) {

    new_feeds_factory.getAllFeeds()
        .then(function(updates) {
            $scope.updates = updates;
        });
})

AngularJS: The templateUrl is being rendered before the controller is able to execute any further actions

Answer №1

Answer №2

Similar questions

Vuejs unstyled content flash

What could be causing this Javascript Array() to generate an array containing just a single element?

Vue's emission system, accessed through this.$emits, unexpectedly ceases functioning mid-function call

Having trouble connecting the POST response object to my view

Obtain non-numeric parameters from the URL in Angular 2 by subscribing to

Hybrid application: Manipulate HTTP user agent header using AngularJS

Zoom in and Zoom out functions in ngPdf with centered view

When using Rails to render a JSON page remotely, the JavaScript AJAX handler fails to capture the response

Modify content or display picture within accordion panel based on its identifier

Generating HTML elements on the server-side vs. retrieving data as JSON and dynamically creating elements using JavaScript

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

Even with the inclusion of the necessary JavaScript file before calling the DataTable function, $(...).DataTable continues to be

Show only relevant dropdown options when a radio button is selected, and also automatically adjust options when the page

Passing functions from a separate file as parameters in a Node.js route

Using AngularFire: How can you connect and bind data to the $scope efficiently?

Creating a column filter with ng-repeat in AngularJS for each (key, value) pair in a column

Issues with navigating routes in AngularJS

Node Js server unable to function properly in offline mode due to Service Worker malfunction

Utilizing Vue to send information to the POST function

Connecting one page to another on the same page using Next.js