The role of form actions in Angular

I'm currently setting up a login feature using angular.js and devise.

Below is the code for my form:

<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" ng-model="loginForm.email" required="required" class="form-control"> </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" ng-model="loginForm.password" required="required" class="form-control"> </div>
    <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>

The form always sends data via POST to /api/auth/sign_in. However, the path of my API also includes a version number.

Therefore, /api/v1/auth/sign_in would be valid but not /api/auth/sign_in.

Is there a way to modify the form action to include the API version as well?

Update: Important Angular Information

angular
    .module('AngularRails', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'templates', 
        'ng-token-auth'
    ]).config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/app/sign_in', { 
                templateUrl: 'user_sessions/new.html', 
                controller: 'UserSessionsCtrl' 
            })
            .otherwise({
              redirectTo: '/'
            });
        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });
    });

The function submitLogin originates from here. Is it possible to customize or override this function from ng-token-auth (A token-based authentication module for angular.js)?

Answer №1

If you need to create a URL for an action, one way is to set it using the following code:

$scope.actionUrl = $scope.ContextUrl + '/api/v1/auth/sign_in';
The variable $scope.ContextUrl can be customized to fit your needs and make sure the URL is reachable.

Alternatively, you can use the following code snippet within a form tag:

<form action="{{ ContextUrl + '/api/v1/auth/sign_in' }}">

This solution may not be the cleanest, but give it a try and see if it works for you. Feel free to provide feedback on its effectiveness.

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

What is the most effective method for incorporating access token authentication in a React application?

As a newcomer to React, I am working on implementing authentication using Express.js in my react web application. I have successfully set the token in response cookies on the backend with the HttpOnly flag, but unfortunately, I am unable to read it on the ...

Repairing a broken link to the search engine results page (SERP) of an instant JSON search script

I have developed a search script inspired by Google Instant search, which shows relevant results as the user types. The script is written in JSON and utilizes JavaScript to create a URL for the result based on user input. However, there seems to be an issu ...

Tips for extracting parameters from a URL using Express JS in a custom manner

Recently, I set up a server using the express package and encountered an issue while trying to extract parameters from the URL in a specific format. The URL structure is as follows: (notice there's no '?' indicating parameters). I am lookin ...

jquery module for retrieving and updating messages

I want to develop a custom plugin that can be utilized in a manner similar to the following example. This isn't exactly how I plan to use it, but it serves as the initial test for me to fully grasp its functionality. HTML: <div id="myDiv">< ...

Vue.JS is throwing a TypeError: Unable to employ the 'in' operator to look for 'undefined' within the Laravel Object

How can I successfully pass an object from Laravel to Vue.js and utilize it in a v-for="option in this.options"? Although I am able to transfer the object from my Laravel blade to the Vue.js component and view it in the console, I encounter an error when a ...

use a jQuery function to submit a form

I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...

jQuery Plugin - iDisplayLength Feature

I am currently using DataTables version 1.10.10 and I am looking to customize the main plugin Javascript in order to change the iDisplayLength value to -1. This adjustment will result in displaying "All" by default on all data tables, allowing users to fil ...

Is it possible for nextAll() to exclude a specific parent element and search only for children inside that parent?

Below is the structure of my html ajax form: <form name="vafForm" id="vafForm" method="GET" action="urlfor ajax"> <input type="hidden" value="0" id="vafProduct"> <select class="catSelect {prevLevelsIncluding: 'cat'} c ...

What is the best way to insert a two-worded value into the value attribute of an input tag using Express-Handlebars?

Currently, I am using the code below to render the handlebars page: router.get("/update", function(req, res) { mysql.pool.query("SELECT * FROM workouts WHERE id = ?",[req.query.id], function(err, rows, fields) { if (err) { c ...

Webpage push notifications are a convenient feature that allows websites to

Is it possible to incorporate web notifications on websites built using JSPs with jQuery, Vue, and Angular.js on the front end? Is there a method to integrate web notifications within this specific environment? ...

Unable to invoke JS function in Drupal 5 file

In my current project using Drupal 5, I have a specific .js file that is included using the code: drupal_add_js(drupal_get_path('module','MTM')."/include/JS_form.js"); Additionally, there is an element on the page: <a onclick="MTM ...

The Intl.NumberFormat function does not support conversion to the pt-BR (Brazilian Portuguese) locale

A code sample is provided below: const formCurrency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 }) Assuming the input is: var money = 1000.50 formCurrency.fo ...

The canvas appears blank when using Firefox version 36

The application is made up of an interface (html) and workspace (canvas). We utilize three.js to create elements on the canvas. So far, it's been functioning perfectly on Chrome, Opera, and Firefox 35. You can see it in action here: However, in Firef ...

Is it common to have numerous operations in a single controller in AngularJS?

<!DOCTYPE html> <html ng-app="myApp" > <head> <title>myApp.html</title> </head> <body ng-controller="myCtrl as vm"> <br><br> <div> <p> I ...

Jasmine - verifying variable invocation in test function

As part of my testing process, I am exploring a scenario where a service method is called using a local variable within an angular controller. In this particular case, when the items array is empty, a modal for creating a new item will be triggered via th ...

Numerous challenges arose following the upgrade from Angular v11 to v12

Upon updating my Angular application from version 11 to 12, I faced some unexpected challenges: The development configuration in the angular.json file vanished Breakpoints in Visual Studio Code stopped being triggered A warning during production from runn ...

Incorporating TypeScript basics into the if statement post compiling

As I delve into the Angular2 Quickstart, I stumbled upon a peculiar issue within app.component.js after compiling app.component.ts using tsc (version 1.8.2): if (d = decorators[i]) I am unable to pinpoint where I may have gone wrong in configuring the qu ...

Convert image buffer to string using Mongoose getter?

I have developed a basic node backend application modeled after eBay. I am now working on creating a react frontend app to complement it. Within the app, users can list items for sale and include a photo with their listing. The item information is stored ...

Obtaining the sum of two variables from two separate functions results in a value of NaN

Why is it that I'm seeing a NaN result when trying to access a variable in two different functions? This is my code var n_standard = 0; var n_quad = 0; var totalQuad; var totalStandard; var total = totalStandard + totalQuad; ...

Troubleshooting KuCoin API: Dealing with Invalid KC-API-SIGN Error and FAQs on Creating the Correct Signature

I want to retrieve open orders for my account using the following code snippet: import { KEY, PASSWORD, SECRET } from "./secrets.js"; import CryptoJS from "crypto-js"; const baseUrl = 'https://api.kucoin.com' const endPointOr ...