Hi when i run the spring angular app it is showing GET http://localhost:8080/cyclone/admin/admin/cycle 404 (Not Found) . i don't have any idea where the second admin came from on the url.
access url Cycle and the html page under WEB-INF/views/admin/cycle.html
Angular root setup
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/cycle', {
templateUrl: 'admin/cycle.html',
controller: 'CycleController'
});
}]);
My Spring controller
#Controller
#RequestMapping(value = "/admin")
public class AdminController {
#RequestMapping("/cycle.html")
public String getCarPartialPage() {
return "admin/cycle";
}
}
Change the code like below
$routeProvider.when('/cycle', {
templateUrl: 'cycle.html',
controller: 'CycleController'
});
and in spring controller
#RequestMapping(value = "/cycle.html", method = RequestMethod.GET)
public String getCarPartialPage() {
return "admin/cycle";
}
Change your getCarPartialPage() method to return "cycle"
Related
I am getting parse error
Syntax Error: Token '{' is an unexpected token at column 8 of the expression [user= ${user}] starting at [{user}].
home.html
<body ng-controller="mainCtrl" ng-init="user= ${user}">
Referring this example ,I am sending model to angularjs
Getting data from Spring MVC in Angular JS in the initial view call.
controller.js
angular.module('userSystem', [ 'ngRoute' ]).config(
function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'home'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigation'
}).otherwise('/');
}).controller('mainCtrl',
function($rootScope, $scope, $http, $location, $route) {
})
});
Spring Controller
#RequestMapping(value = "/", method = RequestMethod.GET)
public String getIndex(Model model)
{
model.addAttribute("user","user");
return "home";
}
Please let me know what is wrong here and how to fix it. Thanks
Try changing your controller, so instead of sending just a String with the view name, you send a ModelAndView object:
#RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView getIndex() {
ModelAndView mv = new ModelAndView("home");
mv.addObject("user", "USER_NAME");
return mv;
}
On the other hand, are you using any templating framework (thymeleaf, velocity...)? Cause in that case, your problem may be in how you pick up the model attribute in front-end.
EDIT (as an answer to the templating framework question):
In case you're using thymeleaf, you would need to do something like this in your index.hmtl:
<body ng-controller="mainCtrl as main" data-th-attr="ng-init='main.user=\''+${user}+'\''>
I found myself with this problem in the past.
If you remove the curley braces around user and change to this it will remove your syntax error for you:
<body ng-controller="mainCtrl" ng-init="user= $user">
Taken that you're spring code and population of $user is working correctly.
I had used resolve from angularjs to populate with user details.
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'home',
resolve: {
message: function(messageService){
var promise= messageService.getMessage();
promise.then(data){
allConstants.user=data;
}
return promise;
}
}
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigation'
}).otherwise('/');
Here allConstants is a varible accessible by entire application controllers
Trying to use idea from this tutorial: https://spring.io/guides/tutorials/spring-security-and-angular-js/
#Override
protected void configure(HttpSecurity http) throws Exception {
http.formLogin().and()
.logout().and().authorizeRequests()
.antMatchers("/index.html", "/main.html", "admin.html",
"/login.html", "/")
.permitAll().anyRequest()
.authenticated().and().csrf().disable();
}
Also I use angularjs ngRoute:
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'MainController'
})
.when('/admin', {
templateUrl: 'admin.html',
controller: 'AdminController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}]);
And so on.
But when I try to open admin page (for example /#/admin) it opens login form (from the box) and after that I expect that it should redirect me back to /#/admin, but it redirect me to /admin.html, which is out of the angular control.
How to solve this?
To address the /error redirection you can create a controller like this
#Controller
public class ErrorController {
#RequestMapping(value="/error")
public String error() {
return "forward:/index.html";
}
}
from a spring-boot perspective it should always fall in index.html where you are "giving the control to angular"
Im assuming your resources folder structure is as follows
resources/static/index.html
so that index gets rendered when accesing root.
My directory structure is diffent than the one on the tutorial but it should work
Just Understood what your problem is:
So in your angular config add this :
$locationProvider.html5Mode(true).hashPrefix('#');
and in the index.htm include the base tag
<base href="<!-- #echo BASE_URL -->" target="_blank">
this will get rid of the '#' charecter and everything should work
Hope it helps
I am using AngulaJS as a javascript client side and spring mvc as a rest backend.
In AngulaJS i am using ui-router.
Here is config.js file
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
.state('trains', {
url: "/trains",
templateUrl: "views/pages/trains.html",
data: {
pageTitle: 'Trains'
}
})
Below is html file (left-sliderbar.html
<li ui-sref-active="active">
Trains
</li>
The problem is when I clicked on "Trains" menu in left left-sliderbar, I cannot get request mapping with the method in Rest Backend of Spring MVC. Below is code from Controller of Spring MVC
#RequestMapping("/trains")
public String getTrainPartialPage(ModelMap modelMap) {
System.out.println("---------Request Mapping: /trains: " + this.getClass());
return "pages/trains";
}
Please help me to fix it out, I'd like to use ui-router than ngRoute, thanks you
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
.state('trains', {
url: "/trains",
data: {
pageTitle: 'Trains'
},views: {
'content#': {
templateUrl: "views/pages/trains.html",
controller: 'TrainsController'
}
}
})
and you need to implement the rest calls in your service or in your TrainsController.
I had the same problem in a same context.
I think you shoud try to use templateUrl: "views/pages/trains" instead of templateUrl: "views/pages/trains.html" in your $stateProvider provider.
The back-end controller should expose this request mapping:
#RequestMapping(value = "/train")
public ModelAndView getMain() {
return new ModelAndView("pages/train");
}
NB: Using ModelAndView as a return object instead of String (didn't worked with String and actually I con't figure why).
Angular UI Router will write /train in the url and Spring will serve the html file mapped on the /train route.
Hope will help you.
I am new to javascript, typescript and AngularJS and am currently trying to learn the language by building a sample app.
I am an experienced programmer coming from an Actionscript / Flex background.
As I come from Actionscript I really like the 'controller as' syntax as I don't need to deal with the untyped $script object floating around and doing magic stuff that I can't control (my opinion as someone who distrusts javascript ;-).
In this example though I want to make an html page that displays loading info for a variety of different services that will load data. I envisage using this html fragment as a header at the top of a page which could show loading info for a list of albums, a list of images or even just when you're logging in.
This example is not what I would do in production as there are a number of things that I do not like about this approach but this is a learning exercise so I am trying to figure out how this would work.
I have the following TypeScript code:
LoadingModule
export interface ILoadable
{
isLoading : boolean;
isLoaded : boolean;
loadingMessage : string;
errorMessage : string;
}
export class LoadingController implements ILoadable
{
// Constructor
constructor( private service? : ILoadable )
{
}
// Properties
public get isLoading() : boolean
{
return this.service ? this.service.isLoading : true;
}
public get isLoaded() : boolean
{
return this.service ? this.service.isLoaded : false;
}
public get loadingMessage() : string
{
return this.service ? this.service.loadingMessage : "Loading...";
}
public get errorMessage() : string
{
return this.service ? this.service.errorMessage : "There was a fault.";
}
}
App
app.config( ($routeProvider) => {
$routeProvider
.when( '/albums', { templateUrl: './pages/albums.html' } )
.when( '/album', { templateUrl: './pages/album.html' } )
.when( '/pictures', { templateUrl: './pages/pictures.html' } )
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController" } )
.when( '/loadingAlbums', { templateUrl: './pages/loading.html', controller : "loadingAlbumsController" } )
.when( '/404', { templateUrl: './pages/404.html' } )
.otherwise( { redirectTo: '/loggingIn' } )
});
app.controller( "loginController", [ "authenticator", Picasa.LoadingController ] );
app.controller( "loadingAlbumsController", [ Picasa.LoadingController ] );
Loading.html
<div ng-controller="loginController as loadable">{{loadable.loadingMessage}}</div>
This all works great but I always get the loginController passed into the html page. This is obviously because I refer to it in the html page so this overrides me specifying a controller in the route provider setup.
My question is can I use the "controller as" setup in an html page that will have different controllers injected?
I want the html page setup to work with an ILoadable.
I don't want to have to inject $scope into my controller and set properties on it.
Ideally I'd be able to inject a service directly into the html page so that I don't have to have the controller wrapper.
Many Thanks
You can use the controllerAs syntax for the routing:
$routeProvider
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController", controllerAs: 'login' } )
Your Index.html should have ng-view="" which is where the view will be substituted in.
This will enable you to do {{login.message}} in the views.
im using spring mvc with angular js.
i would like to know if there's a way to use angularjs router instead
using spring mvc router?
//Java
#RequestMapping(value = "cases", method = RequestMethod.GET)
public String showCase() {
return "case/cases";
}
//angular
app.angular.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
controller : 'UserController',
templateUrl : 'login.html'
}).when('/case', {
controller : 'CaseController',
templateUrl : 'case/cases.html',
})
} ]);
If you want to use angularjs routing features, you need to design restful api with spring. Your controllers should return json data that can be easily consumed by angularjs.