Angular: Loading HTTP request data into a controller without ng-init

Question

I have a very simple app which consists of an input form to POST some data, and a table with a list of items that have already been submitted on the same page.

I'm trying to populate this table with the items that have already been added using a $http request upon page load.

Currently my index.html is as follows:

    <div id="container">

        <div id="form-container" ng-controller="inputFormController">
            <form id="form" ng-submit="submit()">
                //input fields
            </form>
        </div>

        <hr>

        <div id="table-container" ng-controller="blacklistTableController" ng-init="init()">
            <table>
                //ng-repeat rows
            </table>
        </div>

    </div>

As you can see I am currently preloading the data into the table using ng-init, which works, although I believe this is the incorrect way of doing it after reading the documentation.

I've looked into loading the data into blacklistTableController using a resolve through routeProvider, although from my understanding (please correct me if I'm wrong) this can't be used to inject data into a controller already on the page, plus there will only be a single route for the whole app at / which seems to defeat the point of using routeProvider.

Dieterg · Accepted Answer · 2015-02-09 15:17:52Z

You can just call your init function inside your controller?

angular.module('app').controller('blacklistTableController', function ($scope) {
   $scope.init = function () { 

   }

   // Call on startup
   $scope.init();
});

plus there will only be a single route for the whole app at / which seems to defeat the point of using routeProvider.

Yes and no, you could also use this to indicate that your application is loading. For instance if you use UI-Router, you could do something as this:

angular.module('app').value('loading', {
   isLoading: false
});

angular.module('app').run(function ($rootScope, loading) {
   $rootScope.$on('$stateChangeStart', function () {
      loading.isLoading = true;
   });

   $rootScope.$on('$stateChangeSuccess', function () {
      loading.isLoading = false;
   });
});

angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.default('/start');

   $stateProvider.state('start', {
      url: '/start',
      templateUrl: '/views/start.html',
      controller: 'blacklistTableController',
      resolve: {
         myObj: function () {
            // init logic
            return 'something';
         }
      }
   });
});

When you now navigate to the /start route your page will only render when myObj is resolved. This can also be a promise.

The resolved data is available inside your controller as the name you've used. In this case myObj:

angular.module('app').controller('blacklistTableController', function ($scope, myObj) {
       $scope.data = myObj; // resolved via ui-router
    });

Thanks - I suppose the main issue I was having was that it was rendering a dead template until the data was resolved.

Feras Alkhouri · Accepted Answer · 2015-02-09 15:14:37Z

0

If I understand you correctly, rather than adding ng-init="init()" in your HTML, just call the init function inside your controller like this:

$scope.init = function () {
   ...
}
$scope.init();

answered Feb 9, 2015 at 15:14

Feras Alkhouri

3492 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular: Loading HTTP request data into a controller without ng-init

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related