CODEWITHSUNDEEP
angularjs
user1574371
user1574371

Reputation: 73

How do you output to console from within angular code?

I am new to Angular and having trouble figuring out how to test things in console with it. I am used to outputting variable values to the console as I code to check that the values are what I think they'll be. For example, if I want to get the length of an array I would just do console.log(myArray.length) inside of my code. If I put that inside of my controller function, nothing happens. And nothing happens if I put it inside of a function inside of my controller? I know I can inspect a particular element with $0 but that doesn't help in testing the code, I don't want to have to type the code into console to test aspects... Right now I am not using Angular in the context of the MEAN stack - I'm just using html, js, bootstrap and angular inside of MAMP; so, I'm not using node or a testing framework. Do I need to? And if so, can I use a testing framework without configuring the project environment with node/express? Thanks for your help.

angular.module('foil')

.controller('DonorListCtlr', function($scope, $http, $log, $httpParamSerializerJQLike){

    $scope.donors = []; 


    $http.get('api/list_donors.php').then(function(response){
        $scope.donors = response.data;
    });

    //create list of tabs
    $scope.tabs = [];

    $log.log('your stuff');

    $scope.gifts = [];  

    $scope.openTab = function(donor) {
        var newDonor = angular.copy(donor);
        $http.post('api/get_gifts.php', $httpParamSerializerJQLike({id: donor.id}), 
        { headers: { 'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
            $scope.tabs.push({donor: newDonor, gifts: response.data});
        });

    };

    //add ability to close tab  
    $scope.closeTab = function($index) {
        $scope.tabs.splice($index, 1);
    };


    //submit form fields to process php to update donor details
    $scope.saveDonor = function(donor) {
        $http.post('api/process.php', 
        $httpParamSerializerJQLike({
            'donor_first': donor.donor_fname,
            'donor_last': donor.donor_lname, 
            id: donor.id 
            }), 
        {headers: { 'Content-Type': 'application/x-www-form-urlencoded'}} ).then(function() {
            for(var i=0; i< $scope.donors.length; i++) {
                if($scope.donors[i].id === donor.id) {
                    $scope.donors[i] = donor;
                    break;
                }
            }
        });
    };
});

Upvotes: 4

Views: 32374

Answers (2)

Vineet Agrawal
Vineet Agrawal

Reputation: 156

If you have return like this in controller and included this controller in HTML page. Then without setting any environment you console.log should be working. In controller write like: 'use strict';

angular.module('testApp', [])
    .controller('TestController', function() {
        console.log("Hello");
    });

In HTML write like:

<!DOCTYPE html>
<html lang="en" ng-app="testApp">

    <head>
        <!--whatever files you need to add for css and bootstrap-->
    </head>
    <body ng-controller="TestController">
        <script src="angular.js"></script>
        <script src="controller.js"></script>
    </body>
</html>

Then you console.log("Hello"); Should show the message in the console. If this is not your answer then post your code with creating a plunker

Upvotes: 2

Krishna
Krishna

Reputation: 549

try $log.log('your stuff');

Make sure you inject $log into controller

Add something like this

$scope.donors = []; 
$scope.GetDonors = function (){
$http.get('api/list_donors.php').then(function(response){
    $scope.donors = response.data;
});
};    
$log.log($scope.donors);

you have to invoke GetDonors from outside which will set your donors.

Upvotes: 0

Related Questions