Trouble in Angular JS: Syntax glitches

Here is the factory that I am working with:

(function() {
angular.module('temp')
    .factory('Factory',Factory);

    employeeFactory.$inject = ['$http'];
    function employeeFactory($http) {
        var factory = {};
        var vm = this;

        factory.login = function(email,password) {
            return $http({
                'method': 'POST',
                'url': 'http://domain.dev/api/v1/login',
                'data': $.param({
                    'email': email,
                    'password': password
                }),
                'headers': {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
        return factory;
    }
})();

An error message I encounter is:

Uncaught SyntaxError: Unexpected token )

This error points to the last line of code:

})();

Answer №1

Utilize a code formatter to adjust the spacing in your code. The issue will become evident.

(function() {
  angular.module('skindustries')
    .factory('employeeFactory', employeeFactory);

  employeeFactory.$inject = ['$http'];

  function employeeFactory($http) {
    var factory = {};
    var vm = this;

    factory.login = function(email, password) {
      return $http({
        'method': 'POST',
        'url': 'http://domain.dev/api/v1/login',
        'data': $.param({
          'email': email,
          'password': password
        }),
        'headers': {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
      return factory;
    }
  })();

The final } you are using to close the function expression that began on line 1 is actually closing the employeeFactory function.

You will need another } to close the function expression that started on line 1 before you can have a ) to correspond with the ( at the very beginning of the script.

You may want to place it before the return factory; statement, as it seems like the missing } is the one associated with the anonymous function assigned to factory.login.

Answer №2

You forgot to close a } in your code

Here is a corrected version:

(function() {
    angular.module('skindustries').factory('employeeFactory', employeeFactory);
    employeeFactory.$inject = ['$http'];
    function employeeFactory($http) {
        var factory = {};
        var vm = this;
        factory.login = function(email, password) {
            return $http({
                'method': 'POST',
                'url': 'http://domain.dev/api/v1/login',
                'data': $.param({
                'email': email,
                'password': password
                }),
                'headers': {
                'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
        }   
        return factory;
    }
})();

Answer №3

To enhance readability, I recommend replacing the self-invoking function with 'this'.

 (function() {
    angular.module('skindustries').factory('employeeFactory', ['$http', function ($http) {

      function login(email, password) {
        return $http({
            'method': 'POST',
            'url': 'http://domain.dev/api/v1/login',
            'data': $.param({
            'email': email,
            'password': password
          }),
         'headers': {
           'Content-Type': 'application/x-www-form-urlencoded'
         }
       });
     }


    // expose public api
    return {
      login: login
    };
  }])}); 

Check out this helpful Angular style guide written by John Papa

Answer №4

There seems to be a missing } just before the return statement for the factory function

(function() {
  angular.module('skindustries')
    .factory('employeeFactory', employeeFactory);

  employeeFactory.$inject = ['$http'];

  function employeeFactory($http) {
    var factory = {};
    var vm = this;

    factory.login = function(email, password) {
      return $http({
        'method': 'POST',
        'url': 'http://domain.dev/api/v1/login',
        'data': $.param({
          'email': email,
          'password': password
        }),
        'headers': {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
    }
    return factory;
  }
})();

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

Tips for expanding the HTTP header size within Next.js

Can someone provide assistance for increasing the HTTP header size in my Next.js app? The current size is set at 16384 and I am unable to execute the necessary command node --max-HTTP-header-size=24576 server.js. Looking for help from someone with more e ...

Inject a combination of HTML and JavaScript code into the Selenium Webdriver

I am facing a challenge where I have an HTML document stored in memory as a string, and it includes a <script> tag with a script that manipulates the DOM. My goal is to load this HTML page into Selenium WebDriver and retrieve the modified version aft ...

Is one round the limit for my JavaScript image slider?

After studying the JavaScript Chapter on W3Schools, I attempted to create an image slider. Initially, everything worked perfectly for the first cycle. For instance, when I clicked the next button, the slides continued to slide until the end of the slidesho ...

Embedding external javascript within another javascript file

I have two pieces of code - code 1 and code 2. Code 1 is login.html which I am saving as login.js, and code 2 consists of some jQuery and JavaScript codes. My problem is how to insert the first code into the second code. Code 1: login.html (saved as logi ...

Updating dropdown selection with ng-model in AngularJS

nameList includes [“Julia”, “Evan”, “Tomas”]; select ng-model=“names” ng-options=“x for x in nameList” In my controller, I make a service api call to GetNameByID/{id}” and based on the id, I need to set the default value of the drop ...

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

Combining react-draggable and material-ui animations through react-transition group: a comprehensive guide

Trying to incorporate react-draggable with material-UI animations. One approach is as follows: <Draggable> <Grow in={checked}> <Card className={clsx(classes.abs, classes.paper)}> <svg classN ...

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

Updating Angular 5 Views Dynamically Using a While Loop

I am facing an issue in my app where I have a progress bar that updates using a while loop. The problem is that the view only updates after the entire while loop has finished running, even though I am successfully changing the update progress value with ea ...

The server encountered an error: TypeError - It is not possible to convert undefined or null into an

Check out this Code import { getProviders, signIn as SignIntoProvider } from "next-auth/react" function handleSignIn({ providers }) { return ( <> {Object.values(providers).map((provider) => ( < ...

Animation triggered by scrolling is not functioning/displaying div

I'm attempting to make a div fade up when it enters the viewport by using the library found at https://github.com/michalsnik/aos Unfortunately, all that seems to happen is that the div gets hidden. In the head section of my HTML file, I've refe ...

The jQuery code does not execute following the use of window.location.replace( url ) command

I'm facing an issue with my code that involves redirecting the page to the index page after clicking on a specific link ('#versionPageFromProdLink'). The index page contains certain content within a div, which I want to hide once the redirec ...

When executing class methods, Ember.js encounters errors stating "method does not exist."

I am facing a situation where I need to trigger a model reload when a user clicks a refresh button. In the past, I successfully implemented this with Ember-Model. However, since migrating to Ember-Data, I am encountering an error when attempting to execute ...

Stop the form from refreshing the page after submitting a post request to the backend API

I am facing an issue with my React front end and Express back end integration. I have a form in my front end that sends data to the API using two buttons - Submit and Close. The Close button works perfectly by closing the overlay without leaving the page, ...

Error: jquery unexpectedly encountered a token 'if'

I've successfully created an autocomplete suggestion box, but I'm facing an issue when using if and else along with console.log(). An error is displayed in my console saying Uncaught SyntaxError: Unexpected token if, and I'm not sure why. Ho ...

Relaunch node.js in pm2 after a crash

Based on this post, it seems that pm2 is supposed to automatically restart crashed applications. However, when my application crashes, nothing happens and the process no longer appears in the pm2 list. Do I need to enable an 'auto restart' featu ...

The color input click event does not work properly when triggered within a context menu event

This may sound a bit complicated, but let me try to explain it clearly. I'm working on a web app where I want users to be able to change the background color of certain divs. I plan to use a color picker interface for this purpose and utilize the con ...

Deactivate text/input field in React and Next.js based on Dropdown Selection

As a newcomer to React, I am facing an issue with disabling and enabling an input field based on the selected value in a dropdown. My tech stack includes React, Next Js, React-bootstrap, and formik. function Input(){ const [disabled, setDisabled] = useStat ...

Eliminating Repetitions in Array of Objects by Filtering Out Objects with Matching Properties

I am currently working with an array of objects where I need to identify duplicates based on specific properties (first and last names). Below is my attempt at solving this issue: The expected output should resemble: [ {first:"John", last: "Smith", id: ...

Press the div using JavaScript and jQuery

Is it possible in JavaScript to automatically click on a hidden div once it is displayed? For instance, imagine we have a div with the style "display:none;" like so: <div style="display:none;" id="button">Hello World</div> Once this div&apos ...