I have two Spring Boot projects, Project1 and Project2. I have angular code in both the projects under 'static' folder. I am trying to route to the resources in Project2 from Project1 as below,
src/main/resources/static/index.html (in Project1)
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="app.js">
</script>
</head>
<body>
<a ui-sref="spendCar">Click here to go to Spend Cat of Project2</a>
</body>
</html>
src/main/resources/static/app.js (in Project1)
var proj1 = angular.module('proj1', ['ui.router']);
proj1.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('spendcat', {
url: '/spendcat',
templateUrl : 'http://localhost:8090/spendcat' //calling Project2's end point
});
});
In Project2 I have a controller as below,
#Controller
#RequestMapping("/spendcat")
#CrossOrigin
public class SpendCatController {
#RequestMapping(value = "", method = RequestMethod.GET)
public String getSpendCatPage() {
return "spendcatpage"; //spendcatpage.html is under 'static' folder.
}
}
src/main/resources/static/spendcatpage.html (in Project2)
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="sc.js">
</script>
</head>
<body>
<div>Welcome to spend category page</div>
<input type="button" onclick="doClick()" value="Click Here">
</body>
</html>
I get error when "Click Here" button is clicked. If the javascript function doClick() is directly included in html file, then it works. Please suggest me how to load all resources of project2 in project1.
Related
THE LINK REL STYLESHEET CSS does not reflect the css of login.html inside the UI VIEW
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- IMPORT -->
<link rel="stylesheet" href="content/css/index.css">
</head>
<body ng-app="test" ui-view>
</body>
<script src="lib\angular\angular.js"></script>
<script src="lib\angular\angular-route.min.js"></script>
<script src="lib\angular\angular-ui-router.min.js"></script>
<script src="app\app.js"></script>
<script src="app\router\router.js"></script>
</html>
CSS
.turnBlack {
background: black;
}
ROUTER JS
app.config(['$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/view/login.html",
controller: "loginController"
})
$urlRouterProvider.otherwise('/login'); // ALSO THE OTHERWISE IS NOT WORKING
}])
LOGIN.HTML
The div has to be background black
<div class="turnBlack">
I WANT TO BE BLACK
</div>
You should use ng-class="turnBlack" instead of class="turnBlack".
I'm trying to make a single page application with a Spring back end and an AngularJS front end. I've followed tutorials and looked up similar questions but ngRoute just doesn't seem to work with a Spring back end (I got it to work with a NodeJS back end).
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Spring Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="../static/index.js"></script>
</head>
<body ng-app="index" ng-controller="indexController">
test
<div ng-view=""></div>
</body>
</html>
test.html
<div>
Template loaded
</div>
index.js
'use strict';
const indexModule = angular.module('index', ['ngRoute']);
indexModule.controller("indexController", function indexController($scope) {
});
indexModule.config(function($routeProvider) {
$routeProvider.when('/test', {templateUrl: 'test.html'});
});
SringDemoController.java
package com.springdemo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class SpringDemoController {
#RequestMapping({ "/" })
public String getIndexTemplate() {
return "index";
}
}
I get this error when I click the link and the URL changes to http://localhost:8080/test
Here is the solution.
The Index page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test title</title>
</head>
<body ng-app="TestApp">
<div>
<h1>The Index</h1>
<ul>
<li>
<a ng-href="#!/test"> Temp One</a>
</li>
</ul>
<div ng-view=""></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="js/config.js"></script>
<script src="js/controller/main.js"></script>
<script src="js/controller/test.js"></script>
</body>
</html>
The Router config (its called config.js)
'use strict'
angular.module('TestApp' , ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/' , {
templateUrl : "view/main.html",
controller : 'MainController',
controllerAs : 'main'
})
.when('/test' , {
templateUrl : "view/test.html",
controller : 'TestController',
controllerAs : 'test'
})
.otherwise({
redirectTo: '/'
});
});
And the server-side controller for the route :
package com.testApp;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
#Controller
public class ServerController {
#RequestMapping(value = "/test")
public String getTestTemp() {
return "static/test";
}
}
UPDATE :
actually, the method inside the ServerController is not needed. It can be written as follows
package com.testApp;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
#RestController
#RequestMapping(value = "/test")
public class ServerController {
}
So if you write any REST method in this controller, the endpoint from both client and server side will be /test/{the Name of your endPoint }
Here is the Project Structure
If you add more templates, make sure you create the routeon the client side and also the server side
I'm new to angularJS and have been working on a tutorial in visual studio on angularjs routing, but even though I change the url link, the ng-view doesn't change.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
home
another page
<div ng-view></div>
</body>
</html>
This is my controller.js
var app = angular.module('mainApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
template: 'Home'
})
.when('/anotherpage', {
template: 'another page'
})
.otherwise({
template: 'index'
});
});
Even though I change the url to /index.html#/home, the content in the div is always 'index'. can anyone suggest any solutions for this.
change the html as below it should work.
home
another page
<div ng-view></div>
Index.html
<!doctype html>
<html ng-app="testApp">
<head>
<meta name="viewport" content="width=device-width">
<link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
<link rel="stylesheet" href="styles/vendor.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body id="wrap">
<div ui-view></div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
"use strict";
var TestApp = angular.module("testApp",["ui.router"])
.config(["$urlRouterProvider","$stateProvider",function(a,b) {
a.otherwise("test", {
url: "/test",
title: "Test",
template:"<p>Test</p>"
})
}]);
Here is My directory Structure
testApp
JS --> app.js
index.html
Please Correct My Code
The UI-Router is about states. So we have to call $stateProvider.state() to define state(s). The $urlRouterProvider method .otherwise() should server for default navigation - if url does not match to registered state:
.config(["$urlRouterProvider","$stateProvider"
,function($urlRouterProvider,$stateProvider) {
// instead of this
a.otherwise("test", {
// we need to call .state
$stateProvider.state("test", {
url: "/test",
title: "Test",
template:"<p>Test</p>"
})
// and also some defaults
// but not state name 'test', it should be url '/test'
$urlRouterProvider.otherwise("/test")
I am trying to set up a SPA with angular, and with the current code it is not working, while run on a server. My index.html does not have a # after it, which I think it should for the SPA. I am curious why I am not getting a # in the url's. for example, navigating to the index i get something like localhost:4000/index.html/ instead of localhost:4000/index.html#/. When i try to navigate to localhost:4000/index.html/home i get a 404 error. Can anyone tell me why this is so, or if there are any other issues you can spot.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
angular routes :
angular.module('Ski').config(function($routeProvider) {
'use strict';
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.js
angular.module('Ski', ['ngRoute']);
Templates:
this on is templates/maps
<div>
<h1> Hello World </h1>
</div>
this one is templates/home
<h1> Home </h1>