Access a variable defined in a js file using an angular directive in a different file

Question

I have a js file to consume a webservice and here i define an array that i want to use in a ng-repeat directive. this is what i have at the moment

html

<article ng-repeat="article in scopeArticles">
    <h1 class="content">content is {{article.title}} </h1>
    <img src="{{article.imgSource}}" href="{{article.source}}"/>
    <p>{{article.description}}</p>
</article>

js file

  var articles = [];

$(document).ready(function () {

    $.ajax({
        url: "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey=001034455"
    }).then(function (data) {
        $.each(data.articles, function (key, value) {
            articles.push({
                title: value.title,
                description: value.description,
                source: value.url,
                imgSource: value.urlToImage,
                date: value.publishedAt
            });

        })

    })

});

Also it is better use $http service (inside a controller) instead of $.ajax to make it look and work in a more angularjs-way. — Stanislav Kvitash
– Stanislav Kvitash, Commented May 30, 2017 at 11:09

Stanislav Kvitash · Accepted Answer · 2017-05-30 11:32:03Z

2

Try to forget a bit about jQuery while working with AngularJS. Use $http service to fetch your data. And your html will not work without controller.

See the working example below (don't' forget to add your API key to the URL):

angular.module('app',[])
.controller("Ctrl",function($scope, $http){
      var ctrl = this; 
      
      ctrl.articles = [];
      
      $http.get(
        'https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey='
        )
      .then(function(response) {
            angular.forEach(response.data.articles, function(value){
                ctrl.articles.push({
                    title: value.title,
                    description: value.description,
                    source: value.url,
                    imgSource: value.urlToImage,
                    date: value.publishedAt
                });
            });
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl as $ctrl">

<article ng-repeat="article in $ctrl.articles">
    <h1 class="content">content is {{article.title}} </h1>
    <img ng-src="{{article.imgSource}}" href="{{article.source}}"/>
    <p>{{article.description}}</p>
</article>

 
</body>

answered May 30, 2017 at 11:32

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Santos Over a year ago

Worked like a charm. I'm learning html and jquery and i decided to add angularjs so thank you for your help

Collectives™ on Stack Overflow

Access a variable defined in a js file using an angular directive in a different file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related