Exploring the capabilities of AngularJS and Spring Boot in web development

I'm encountering a 404 error when trying to load a file in the ng-view route in AngularJS with Spring. As a newcomer to both technologies, I'm struggling to find a solution.

app.js
    app.config(function($routeProvider) {
    console
    $routeProvider.when('/', {
        controller : "loginController",
        templateUrl : "/pages/login.html"
    })})

loginController:

app.controller('loginController', function($scope, $http) {
  $scope.companies=null;
  $http.post('http://localhost:8080/').success(function(data) {
    $scope.companies = data;
    console.log(data);
  }).error(function(err) {
    console.log(err)
  });
})

Java Controller:

@Controller public class LoginController {
@Autowired
Facade facade;
@RequestMapping(value = Paths.Public.PATH_ALL_COMPANY, produces = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.POST)
public @ResponseBody List<CompanyDto> allCompany() {
    return facade.allCompany();
}
@RequestMapping(value=Paths.Public.PATH_HOMEPAGE,method=RequestMethod.GET)
public String getindexPage(){
    return "index";
}
@RequestMapping(value=Paths.User.PATH,method=RequestMethod.GET)
public String getindexPageqs(){
    return "index";
}
}

app module:

var app = angular.module("myApp", [ 'ngRoute' ]); 
app.config(function($routeProvider) { 
  $routeProvider
    .when('/', { controller : "loginController", templateUrl : "/pages/login.html" })
    .when('/user', { controller : "UserHomeController", templateUrl : "pages/user.html" })
   .when('/admin', { controller : "AdminHomeController", templateUrl : "pages/admin.html" }
);

HTML:

<body ng-app="myApp"> 
  <script src="modul/angularJS-1.2.32/angular.min.js" type="text/javascript"></script> 
<div ng-view></div>

Answer №1

When specifying the templateUrl in AngularJS, remember to remove the leading forward slash. Instead of templateUrl : "/pages/login.html", use templateUrl : "pages/login.html". If you are calling from a href attribute, make sure to adjust accordingly. Additionally, if your login.html template is located in the WEB-INF directory, it will not be accessible. Move it to the WebContent directory for proper access.

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

Ways to retrieve a JSON element and incorporate it into a CSS styling

Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

Having trouble with the onClick function in React?

Here is my simple react code: Main.js: var ReactDom = require('react-dom'); var Main = React.createClass({ render: function(){ return( <div> <a onClick={alert("hello world")} >hello</a> </ ...

How can I avoid duplicating code in HTML? I find myself utilizing the Bootstrap 4 collapse feature around 20 times on a single page

<div class="card" style> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria- expanded="true" aria-controls="collapseO ...

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

An error is thrown when using AngularJS .length property

Currently, I am carrying out a regular task within my Filter to verify if angular.module('someApp') .filter('filterSomeData',['$filter',function ($filter) { return function (items, keyObj) { var filterObj ...

Ways to format a String value to display only 2 decimal places

I have a JSON file with a string data that I need to convert to either a double or an integer. The converted number should then be rounded to two decimal places, or if it's an integer, rounded to just one digit. For instance, if the number is 7642444 ...

Exporting SVG to image in Ionic is successful on Android devices, but the image gets cut off when viewed on

I am facing an issue with exporting an SVG as a base64 encoded image and sending it to the server for storage on Google Cloud Storage. The process works fine on Android and in browsers, but fails when attempted on a physical device running IOS. On IOS, t ...

Issue with jQuery animation: Background color does not change upon scrolling

Here is my fiddle link: https://jsfiddle.net/jzhang172/owkqmtcc/5/ I am attempting to change the background color of the "content" div when scrolling anywhere within it. The goal is for the background color to change when scrolling and revert back to its ...

Monitoring and refining console.error and console.log output in CloudWatch

I've encountered a situation where my lambda function includes both console.error and console.log statements, which Node.js interprets as stderr and stdout outputs respectively. However, upon viewing the logs in CloudWatch, I noticed that they appear ...

Encountering Issues with Discord JS as Member Fetch Returns Undefined

I'm facing an issue with fetching specific server members by their user id in order to assign a role to them. I keep getting an undefined response each time. Even though this bot has administrator permission and all required intents are assigned, I a ...

having difficulty retrieving website content using the ui.router

This is my HTML code: <!doctype Html> <html lang="en"> <head > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l ...

How can you transform a nested array into a flat JavaScript map?

If we consider a JavaScript Map structured like this: [ { id: 1, name: "Foo", contents: [1,2,3], morecontents: ["a","b"], }, { id: 2, name: "Bar", c ...

Is there a way to determine if a property contains a string value?

In my main.js file, I have a function called $scope.onError which is triggered when there is an error while uploading an attachment. The function logs the error message received from the server and assigns it to the variable $scope.errorMessage. If the val ...

What is the best way to include default text in my HTML input text field?

Is it possible to include uneditable default text within an HTML input field? https://i.stack.imgur.com/eklro.png Below is the current snippet of my HTML code: <input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Off ...

Retrieve the values of a particular key from your Django queryset JSON data and then seamlessly send them over to VueJS

I recently developed a web app using Django2 with Vue for the frontend. I encountered an issue in passing all values of a specific key from JSON data to a JavaScript dictionary value on the frontend. Despite trying to use the += operator to add the data, I ...

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Extracting data from a table on the designated URL using Apify and Puppeteer is my current goal: https://en.wikipedia.org/wiki/List_of_hedge_funds The desired outcome should be an array of objects. Each element in the array must represent a <tr> ro ...

Deploying an Express.js application: The command 'PassengerAppRoot' is invalid, possibly due to a misspelling or being defined by a module not included in the server configuration

I am looking to host an express.js app on cPanel. After successfully installing node, nvm, and npm, I managed to upload all the necessary files to the server and configure the .htaccess file. However, despite my efforts, cPanel's error logs are still ...

If an element exists in one of the dimensions of a multi-dimensional array

I am facing an issue with my 2D array structure. Here is an example of how it looks: `var arr = [["1", "2", "3"], ["4", "5"], ["6"]];' Despite having the value "4" in one of the inner arrays, when I try running $.inArray("4", arr); or arr.indexOf("4" ...

Expandable Table displaying all sections upon clicking with Shopify linklists

My current setup includes a sidebar menu that iterates through Shopify linklists to display the parent and child collection titles and URLs. However, I am encountering an issue where clicking on one of the anchor tags opens all anchor links due to non-uniq ...