The challenges of implementing view changes with $state.go

In the code below, I am setting up a login process. The PHP file for this process is working correctly, but after successful login, the view does not change as expected:

(function (){

var app = angular.module('starter', ['ionic']);
var app2 = angular.module('nuevo', []);

app.controller('controller', function($scope, $http, $state) {

$scope.registrar = function(){
$http.post("http://127.0.0.1:8080/php/Conexion.php",{
    correo:$scope.mail, pass:$scope.word,    
}).success(function(data){
    alert("SESSION STARTED")
    $state.go('main');
});
}

});

  app.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
   .state('main', {
    url: '/main',
    templateUrl: 'templates/main.html',
    controller: 'controller',
  })

$urlRouterProvider.otherwise('/index.html');
  });

Here is my HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <div class=" col text-center">
             <h3 >Taxi App</h3>  
          </div>
      </ion-header-bar>
      <div ng-controller="controller">    

        <img class="indexImg" src="img/saludoIndex.jpg">
        <br><br>
          <div class="item item-input-inset">    
              <label class="item-input-wrapper">
                  <i class="icon ion-at placeholder-icon"></i>
                  <input type="text" placeholder="Email Address" ng-model="mail">
              </label>
          </div>

          <div class="item item-input-inset">    
              <label  class="item-input-wrapper">
                  <i class="icon ion-locked placeholder-icon"></i>
                  <input type="password" placeholder="Password" ng-model="word">
              </label><br>
          </div>

          <div class="col text-center">
              <br><h4><a>Forgot your password?</a></h4><br><br><br><br><br>
              <a class="button button-stable button-large" href="templates/Register.html">
              <b>Create a Free Account</b></a>
          </div>

    <ion-footer-bar class="bar-positive tabs">
        <a class="tab-item">
            <h4 style="color:white;" ng-click="registrar()">LOG IN</h4>
        </a>
    </ion-footer-bar>
</div>
</ion-pane>
  </body>
</html>

The network log displays the page's information (simple test data), while the main.html contains simple testing data to check if the changes are applied, however, it does not load on the application screen.

https://i.sstatic.net/xU1Kk.jpg

https://i.sstatic.net/1VpeY.jpg

I would appreciate any help with this issue. Thank you!

Answer №1

After delving deeper into this topic, I discovered that the solution was to include

<script src="custom.js"></script>
in both the body of index.html and main.html, and voila! It worked seamlessly.

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

How can I show a title when redirecting a URL in VUE JS?

My current setup includes a navigation drawer component that changes the title based on the user's route. For example, when navigating to the home page (e.g. "/"), the title updates to "Home", and when navigating to the profile page (e.g. /profile), t ...

Issues of unfulfilled requirements in the recent npm (and node) updates

After updating npm and node to the latest versions, I am encountering the following errors and warnings: $ npm --version 2.4.1 $ node --version v0.10.36 $ npm install > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f895 ...

Implementing dynamic content updating in WordPress by passing variables and utilizing AJAX

Currently, I am working on a shopping page that displays a list of all the stores. To streamline the user experience, I have created a sidebar containing various categories and implemented pagination within the store listings. These lists are generated thr ...

Creating a dynamic SlickGrid spreadsheet - a step-by-step guide

My curiosity has been peaked by the SlickGrid plugin. It caught my attention because of the spreadsheet example, but unfortunately I couldn't get it to work. Is it truly feasible to create a spreadsheet where you can select a range of cells and copy/p ...

`Async/await: Implementing a timeout after a fadeout once the fadein operation is

Here is a snippet of code that demonstrates the process: async function loadForm (data) { let promiseForm = pForm(data); await promiseForm.then(function(data) { setTimeout(function () { $container.fadeOut(function() { ...

An error occurs when attempting to assign a value to a MUI file TextField

Struggling with setting the value of a MUI Textfield that has type="file" props, resulting in the following exception being thrown: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable Interest ...

What is the method for extracting search parameters as an object from a URL that includes a hash symbol?

Currently, I am dealing with a URL structured in the following format: https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333" While I am familiar with fetching query strings from a standard URL, I am struggli ...

Using an arrow function in Aurelia to read a json file

I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue. In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collect ...

Prevent the mouseup event in jQuery when the mouse has previously been moved

I have a div with a row of span buttons displayed horizontally. Since there are too many buttons to fit on the screen, I want to enable the user to click and drag the entire row of buttons. However, my challenge is to ensure that the button's mouseup ...

Utilizing GraphQL Global Object Identification with NestJS using the code-first strategy

Currently, I am trying to incorporate Global Object Identification as outlined in the GraphQL documentation into my NestJS project. 1.) First, I created a Node interface: import { ID, InterfaceType, Field } from '@nestjs/graphql' @InterfaceType ...

Tips for showcasing the stored value from the database in a table

This problematic table was created: http://jsfiddle.net/ofd3nox3/ I am currently facing an issue with displaying the values stored in the database for this table per user. For example, a user has specified availability on Thursdays in the morning, Friday ...

Executing synchronous functions in NodeJS

I've been attempting to retrieve the number of records from a database using Node.js, but I'm running into an issue with synchronous requests. When I try to print the number inside the function, it works fine, but outside the function, it doesn&a ...

Tips for efficiently utilizing the _find method in AngularJS to retrieve child elements

I am currently using lodash _find to iterate through an array, but I am facing a challenge. When the conditions are met, I would like to specifically return a sub-element of the array. private getTaskForPersonAndDay(personalId: number, day: moment.Moment) ...

Making a POST request to an API by sending parameters through the URL

I have successfully created a web application using Ruby on Rails. Now, my next project involves developing a mobile app to complement the existing web platform. To accomplish this, I am utilizing Cordova and AngularJS (v1.2.13). The initial user interact ...

Can you explain the difference between CDN and ESM builds in vue.js?

According to the Vue.js documentation, there are differences in syntax depending on whether you are using the CDN or ESM build of Vue.js. What is the significance of having two different builds and how does it result in a difference in usage syntax? Infor ...

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

The AJAX query for validating IDs in a JSP page consistently produces identical outcomes

I have been implementing a feature to check IDs using AJAX in JSP. When a user tries to create a new account, they enter the desired ID and AJAX checks if the ID already exists in the database. If the ID is found, it returns 'n' which is then dis ...

How to easily transfer a JSON file to a server using Vue and Node.js

As a newcomer to the world of Node.js and Vue development, my goal is to establish a seamless process for users to create and upload a JSON file to the server when they save data in a form. This process should occur effortlessly in the background, allowing ...

Using Material UI with React hooks

I'm encountering an error while trying to incorporate code from Material UI. The error message is: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. Mismatc ...

Tips for efficiently importing a file or folder that is valuable but not currently in use

I'm struggling to find any information about this particular case online. Perhaps someone here might have some insight. I keep getting a warning message saying 'FournisseursDb' is defined but never used no-unused-vars when I try to import t ...