Consume REST service from Angular - Return JSON

Question

I have the following angular Function consuming a service:

function GetDados($scope, $http) {
    $http.get('http://localhost/api/v1/index.php/dados').success(function(data){
        $scope.dados = data;
    });
}

I need the $Scope.data to go to this place

<div ng-controller="GetDados">
    <script>
        var json = $scope.dados; 

It doesn’t work. I don’t know if that’s allowed.

What I have in data is a json with multiple entries. The error that shows me is that it does not recognize the $Scope variable. Thank you.

Solution!

function GetDados($scope, $http){
$http.get('http://localhost/api/v1/index.php/dados').
    success(function(data){
    //$scope.dados = data;

            var json = data; 

My goal was to build a graphic using the return of the service. I put the script of the graph in the same of the call of the service and used. The ng-bind the colleague mentioned also helped.

Answer 1

This happens because for you to pass the result of an Angular controller to the view (html) you need to do one bind. This is done in 2 ways:

• <p>{{ nomeDoScope }}</p>
• <p ng-bind="nomeDoScope"></p>

So, assuming you have one $scope thus $scope.nomeDoScope = 'Meu teste', the value that would be displayed on the screen would be only "My Test", IE, in your case would be displayed the JSON.

Remembering that you don’t need to be inside a tag p, it can be in any element, as long as it follows that pattern.

In your example it would be: {{dados}}

When using one or the other?

There is controversy and even speculation about the performance of using {{}} or use the directive ngBind. In fact there is a difference in performance (ngBind is better), but very minimal, it will have some impact only when used on a large scale, and I say EVEN LARGE SCALE! In most cases they do not influence.

ngBind

So, considering a scenario where you have many bindings, especially within a large text, the ideal would be to use the ngBind directive. Imagine you have an element p which generates a text of 2thousand lines, when using the method {{}} the scope of analysis is not defined, so the validation will go through all the text until you find the bind and apply it. When using ngBind, the scope is defined and covers only the piece of text that should be updated, so the performance is better.

Example:

<p>Aqui inicia nosso texto de exemplo muito...
    [..muito texto..] 
    <span ng-bind="meuEscopo"></span> e aqui continua nosso texto extenso...
    [...muito texto...]
</p>

{{ }}

It is used in most cases. Why? Simplicity. Imagine having to create an element span just to put a piece of text? Boring right? Yeah. So in most cases the use of {{}} is preferred, and as stated above, the difference in performance is not so significant.

If you have a title element that will only be used to display the title, it costs nothing to use the ngBind, example: <h6 ng-bind="meuEscopo"></h6>.

Example:

<p>Aqui temos um exemplo curto com {{meuEscopo}} e aqui ele finaliza</p>

But there’s no need to do it just for a single element.

I think it makes it clearer for you to understand.