Logging in Angular can be accomplished using "console.log"

I am experiencing an issue where I cannot see any console logs and I'm unsure if the cookie is being entered into my controller from the HTML page.

var addPartyApp = angular.module('addPartyApp',['ngCookies']);   


addPartyApp.controller('partyController',['$scope','$http', '$cookies', function($scope,$http,$cookies){


console.log("works!");

    //  $scope.createParty = function(){     
               var data = {};      
                data.title = $scope.title;
                data.description = $scope.description;
                data.image = $scope.myFile;
                data.email = $scope.cookie;
                console.log($scope.cookie);
                console.log($scope.myFile);
                console.log(data); 
            $http.post('http://localhost:3000/party', data).then() //callback 
      //}

}]);

I really need assistance in resolving this problem as I heavily rely on console logging for debugging purposes.

Thank you!

Here is the HTML code:

<!DOCTYPE html>
<html ng-app="addPartyApp">
 <head>
   <title>show party</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 </head>
 <body ng-controller="partyController">
  <h1 class="text-center">Add Party</h1>
        <form class="form-group" enctype="multipart/form-data" method="POST" action="http://localhost:3000/party">
          <div class="form-group">
            <div class="col-sm-10">
              <label for="inputEmail3" class="col-sm-2 control-label">Title:</label>
              <input class="form-control" type="text" placeholder="Title" ng-model="title" name="title" required></input>
            </div>
            <div class="col-sm-10">
              <label for="inputEmail3" class="col-sm-2 control-label">Description:</label>
              <textarea class="form-control" id="inputEmail3" type="text" placeholder="Description" ng-model="description" name="description" required></textarea>
              <br>
            </div>
            <div class="col-sm-10">
              <br>
              <input type="file" name="file" accept="image/*" required></input>
            </div>
            <div class="col-sm-10">
              <br>
              <input type="submit" class="btn btn-default" name="send"></input>
            </div>
          </div>
        </form>
    <script src="js/lib/angular/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>
    <script src="js/addParty.js"></script>
 </body>
 </html>

Answer №1

Check out this information

addPartyApp.controller('partyController',['$scope','$http',function($scope,$http,$cookies){

It appears that you forgot to include $cookies in your injection.

Make sure to update your code like this:

addPartyApp.controller('partyController',['$scope','$http', '$cookies', function($scope,$http,$cookies){

The issue here is not related to console.log, but rather with the execution of the lines containing your console.logs.

Answer №2

var addPartyApp = angular.module('addPartyApp', []);


addPartyApp.controller('partyController', ['$scope', '$http',
  function($scope, $http) {


    console.log("works!");

    //  $scope.createParty = function(){     
    var data = {};
    data.title = $scope.title;
    data.description = $scope.description;
    data.image = $scope.myFile;
    data.email = $scope.cookie;
    console.log($scope.cookie);
    console.log($scope.myFile);
    console.log(data);
    $http.post('http://localhost:3000/party', data).then() //callback 
      //}

  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="addPartyApp">

<head>
  <title>show party</title>
</head>

<body ng-controller="partyController">
  <h1 class="text-center">Add Party</h1>
  <form class="form-group" enctype="multipart/form-data" method="POST" action="http://localhost:3000/party">
    <div class="form-group">
      <div class="col-sm-10">
        <label for="inputEmail3" class="col-sm-2 control-label">Title:</label>
        <input class="form-control" type="text" placeholder="Title" ng-model="title" name="title" required />
      </div>
      <div class="col-sm-10">
        <label for="inputEmail3" class="col-sm-2 control-label">Description:</label>
        <textarea class="form-control" id="inputEmail3" type="text" placeholder="Description" ng-model="description" name="description" required></textarea>
        <br>
      </div>
      <div class="col-sm-10">
        <br>
        <input type="file" name="file" accept="image/*" required />
      </div>
      <div class="col-sm-10">
        <br>
        <input type="submit" class="btn btn-default" name="send" />
      </div>
    </div>
  </form>
</body>

</html>

Check out the inline Array Annotation documentation by Angular about dependency injection:

https://docs.angularjs.org/guide/di

Ensure that the annotation array matches the parameters in the function declaration.

Include '$cookies'

addPartyApp.controller('partyController',['$scope','$http', '$cookies',function($scope,$http,$cookies){

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bidirectional data binding in Angular for dynamically-created forms

I am currently facing an issue with creating three dynamically generated forms that are supposed to have separate two-way data binding. However, I am encountering a problem where the values entered in one form are being duplicated in all other instances of ...

Adjust the link/button's background color when hovering over it

Is there a way to change the background color of this link that looks like a button when it is hovered over? I'm looking for some guidance on how to accomplish this. Below is the current CSS code for reference. input[type="button" i], input[type="sub ...

Deciphering a JSON array by value or key

I have a JSON array that I need to parse in order to display the available locations neatly in a list format. However, I am struggling with where to start. The data should be converted to HTML based on the selected date. In addition, a side bar needs to s ...

Am I using async/await correctly in this code?

Here is the code snippet I am currently working with: var process = async (items: DCXComposite[], session: Session) => { // This function returns a response object with a statusCode property. If the status Code is 200, it indicates a ...

Having trouble retrieving req.user in Passport.js within Express.js?

req.user is only accessible within its original function. I recently learned that passport automatically attaches the user to each request after authentication. In order to prevent users from bypassing the login page by accessing inner pages directly thr ...

A guide to securely retrieving data from the Hono API endpoint using type safety within a Next.js application

Currently, I am using Hono as my API endpoint with Bun. Now, I am working on a new app with Next.js and I want to ensure type safety when fetching data from my API. I believe I can accomplish this through RPC. However, I am unable to locate AppType mention ...

Do we really need to create our own action creators in Redux Toolkit?

As I delve into implementing the redux toolkit in my react projects, I've come up with a structure for writing slices using redux-thunk to handle API requests. import { createSlice } from "@reduxjs/toolkit"; import axios from "axios&quo ...

Angular Transclude - ng-repeat fails to iterate over elements

Recently, I've been experimenting with Angular directives and encountered a peculiar issue... Check out the code snippet below: <!DOCTYPE html> <html> <head> <title>Directive test</title> <script type="text/ja ...

Generating unique ID's for data posting in PHP and JavaScript

I've developed a dynamic form that includes an "add more" button to generate an XML file for data import purposes. Users can fill out the form and add as many entries as needed by clicking on the "add more" button. The inputted data is then processed ...

MongoDB - Error: Unable to access properties of an undefined value (reading 'collection')

The code in indexHelpers.js utilizes functions to interact with the database and perform operations on user details. However, there seems to be an issue where the db.get() function returns null, causing errors when trying to access certain properties. Thi ...

The texture rendered by Three.js WebGL is not displaying correctly on the plane and appears

Currently, I am working on a WebGL scene that consists of 2 planes. One of the planes displays a transparent texture perfectly, while the other plane is supposed to showcase a high-resolution, non-transparent texture as a background. Unfortunately, I am fa ...

Insert, delete, and modify rows within the table

I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...

Tips for implementing i18n translation for a specific text variable in Vuejs

Typically, we simply assign the translation property to a variable like : this.name = this.$t('language.name'); However, there may be cases where we want to specify it in a specific language (e.g. French). Is there a way to achieve this in vue.j ...

Error 404 in Laravel: Troubleshooting AJAX, JavaScript, and PHP issues

I have a dynamic <select> that depends on the value selected in another static <select>. However, I am encountering an issue: http://localhost/ajax-model?make_id=8 404 (Not Found). This problem occurs on the page where both select elements are ...

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

Launching a peek inside a modal using AngularJS through a service

Feeling a bit unsure about my approach... I'm diving into my first AngularJS app and trying to grasp the architecture. So, I've built a service called isAjax, utilizing the $http module to handle API calls for me. I'm capturing the succes ...

Display all y-axis values in the tooltip using HighCharts

I utilized a chart example from http://www.highcharts.com/demo/column-stacked When you hover the mouse over a column, it displays the value of the y axis being hovered and the total value. I am interested in having the tooltip show the values of all 3 y ...

The function getSelection().focusNode does not function properly within a specified ID

My current code allows for text to be bolded and unbolded using Window.getSelection(). I found the initial solution here: Bold/unbold selected text using Window.getSelection() It works perfectly without any issues. However, when I tried to modify the code ...

What should I do to resolve the error message TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a valid function?

I have implemented Firebase with next.js and organized my files as shown below. However, I am encountering an issue with using the firebase client side SDK during the sign-up process. Firebase.js is where the firebase app is initialized import firebase fr ...

What is the best method for inserting content into a custom element as input for the component?

Currently, I am in the process of creating a syntax highlighting web component that will be able to highlight any content placed inside it. Let me illustrate with an example code snippet: <fs-highlight data-line-numbers="true" data-language=&q ...