How do I add $http.get to controller?

Question

In this plunker: http://plnkr.co/edit/OZa7rvWLQuRHJGiJ8dBL?p=preview

I'm having difficulty adding $http.get to the controller so that the page runs.

In app.js --

I have this code:

angular.module('example-app', ['hc.marked', 'hljs'])
    .config(['markedProvider', 'hljsServiceProvider', function(markedProvider, hljsServiceProvider) {
      // marked config
      markedProvider.setOptions({
        gfm: true,
        tables: true,
        sanitize: true,
        highlight: function (code, lang) {
          if (lang) {
            return hljs.highlight(lang, code, true).value;
          } else {
            return hljs.highlightAuto(code).value;
          }
        }
      });

    }])
    .controller("MainController", ["$rootScope", "$scope", "marked", function MarkdownController($rootScope, $scope, marked, $http) {

    }]);

How to add this $http.get so that the plunker continues to work properly??

  $http.get('http://beta.json-generator.com/api/json/get/VyD_JWT1Q')
            .then(function (res) {
                $scope.todos = res.data.todo;
                $scope.events = res.data.event;
                $scope.aboutlongs = res.data.aboutlong;
                $scope.mainpoints = res.data.mainpoint;
                $scope.tags = res.data.tag;
                $scope.galleries = res.data.gallery;
                $scope.menus = res.data;
                $scope.socials = res.data.social;
            });

I've tried this, but it breaks:

angular.module('example-app', ['hc.marked', 'hljs'])
    .config(['markedProvider', 'hljsServiceProvider', function(markedProvider, hljsServiceProvider) {
      // marked config
      markedProvider.setOptions({
        gfm: true,
        tables: true,
        sanitize: true,
        highlight: function (code, lang) {
          if (lang) {
            return hljs.highlight(lang, code, true).value;
          } else {
            return hljs.highlightAuto(code).value;
          }
        }
      });

    }])
    .controller("MainController", ["$rootScope", "$scope", "marked", function MarkdownController($rootScope, $scope, marked, $http) {
        $http.get('http://beta.json-generator.com/api/json/get/VyD_JWT1Q')
            .then(function (res) {
                $scope.todos = res.data.todo;
                $scope.events = res.data.event;
                $scope.aboutlongs = res.data.aboutlong;
                $scope.mainpoints = res.data.mainpoint;
                $scope.tags = res.data.tag;
                $scope.galleries = res.data.gallery;
                $scope.menus = res.data;
                $scope.socials = res.data.social;
            });
    }]);

Thanks in advance.

You did not add '$http' as dependency. .controller("MainController", ["$rootScope", "$scope", "marked", "$http" . check out this question http://stackoverflow.com/questions/17478014/injecting-http-and-scope-into-function-within-controller — Ranjeet Singh, May 11 '17 at 07:32
You missed to add $http in the controller part first section and added in the function section — Sa E Chowdary, May 11 '17 at 07:34

score 1 · Accepted Answer · answered May 11 '17 at 07:39

1

Please inject $http as a dependency in your controller.

.controller("MainController", ["$rootScope", "$scope", "$http", "marked", ....

answered May 11 '17 at 07:39

Shahzad

1,677
1
12
25

I added $http as a dependency but it still won't work: http://plnkr.co/edit/OZa7rvWLQuRHJGiJ8dBL?p=preview can you make the plunker work to see what I've missed? Thanks! – sojim2 May 11 '17 at 07:49
2

@sojim2 You need to inject it in the same order, be careful :) – DevMoutarde May 11 '17 at 07:56

score 1 · Answer 2 · answered May 11 '17 at 07:54

Correct your order of dependency injection in controller ( between Marked and $http). It should be like:

.controller("MainController", ["$rootScope", "$scope", "$http", "marked", function MarkdownController($rootScope, $scope,$http, marked ) {

Plunker

How do I add $http.get to controller?

2 Answers2