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.
Related
I'm working with an app on Angular 1 and Ui-router, and I am trying to make so that data in urls will be preserved between states. I have read about the queryParamsHandling:'preserve' feature on Angular 2.0. However I am currently stuck with Angular 1 and I need to resolve how to keep the url data the same between states.
One option I was considering was to preserve the url:params data between states was with the ui-sref, however so far unsuccessful.
Does anyone have good tips how to resolve this?
Thanks
Router File --> route.js:
angular
.module('moduleName')
.config(['$stateProvider', stateProvider])
function stateProvider($stateProvider) {
$stateProvider
.state('lessonDetails', {
url: '/:lessonId/details',
views: {
'content': {
templateUrl: 'lesson/lesson-details.html',
controller: 'lessonController'
}
}
});
}
HTML file --> lesson-details.html:
<a ui-sref="lessonDetails({'lessonId': 123})">Go to details</a>
Controller -- > lesson-details.js
angular
.module('moduleName')
.controller('lessonController', ['$scope', '$stateParams', lessonController]);
function lessonController($scope, $stateParams){
//use lessonId passed as params using $stateParams
console.log($stateParams.lessonId)
}
I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.
Here is the web.php file from Laravel:
Route::get('/', function () {
return view('index');
});
And here is a part of the ui-router in AngularJS:
routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
// Routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html'
})
.state('register', {
url: '/register?oauth_token&oauth_verifier',
templateUrl: 'app/views/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
};
I have also enabled the html5mode and the base url on head. The problem now:
When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.
That's because when you refresh all routes are handled by laravel first.
I had the same problem and there are 2 approaches:
either put the angular app on a different domain ... but you will run
into CORS issues
or tell laravel to route any route to angular app, and that's easier
Route::any('{path?}', function()
{
return view("index");
})->where("path", ".+");
I am working on an application that photographers can use to upload photos. The frontend is AngularJS and there is a RESTfull api backend.
Because of some issues and the fact that ui-router seems better then ngRouter, I decided to change the $routeprovider to $stateProvider of ui-router.
However, my resolve doesn't work anymore (I guessed it would break but I cannot find the solution to my situation).
So here is the original $routeprovider code:
.when('/photographer', {
templateUrl : '/static/partials/photographer/photographer_dash.html',
controller : 'photographerController',
resolve: {
photogPrepService: function (PhotogService) {
return PhotogService.ownPhotos();
}
}
})
The PhotogService is a $resource service that has the following $resource objects:
return $resource(apiHost, {}, {
'ownPhotos': {
url: apiHost + '/photographer_own_photos/',
method: 'GET',
interceptor: ResponseInterceptor
}
});
In the controller I would then do the following (photogPrepService being injected because of the resolve):
var promise = photogPrepService;
promise.then(
function (data) {
$scope.ownPhotos = data.data.photos;
});
This all worked well and I would get the photos in the scope.
However as said with ui-router it doesn't work and I cannot seem to get it working...
According to the docs (https://github.com/angular-ui/ui-router/wiki#resolve) the following should work:
$stateProvider.state('photographer',
{
url: '/photographer',
templateUrl: '/static/partials/photographer/photographer_dash.html',
controller: 'photographerController',
resolve: {
photogPrepService: function (PhotogService) {
return PhotogService.ownPhotos();
}
}
However, when the resolve is injected in the controller and I use console.log() to print the response, I get the following:
Resource(value)
I somehow cannot seem to get the values (JSON response {"photos": ...}) injected into the controller.. I tried various solutions that have been suggested here on stackoverflow and read guides and the API of ui-router, but I cannot wrap my head around what is going wrong... I hope someone can guide me in the right direction..
Thanks!
I think you can use the code below:
//the PhotogService will keep the same as before
//inject the 'PhotogService' into the controller photographerController
PhotogService.ownPhotos().then(function(data) {
$scope.ownPhotos = data.data.photos;
});
//instead of injecting the photogPrepService through 'resove', inject the PhotogService into the controller
//for the $stateProvider
$stateProvider.state('photographer',
{
url: '/photographer',
templateUrl: '/static/partials/photographer/photographer_dash.html',
controller: 'photographerController',
}
You need to give a promise to the resolve, your ressource should look more like :
$stateProvider.state('photographer',
{
url: '/photographer',
templateUrl: '/static/partials/photographer/photographer_dash.html',
controller: 'photographerController',
resolve: {
photogPrepService: function (PhotogService) {
return PhotogService.ownPhotos().$promise;
}
}
});
Or modify your ressources to make them promises.
I am using spring and angular js in my project. In spring I set the view resolver as follows,
public ViewResolver viewResolver() {
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setPrefix("/WEB-INF/views/");
return viewResolver;
}
In angularjs ,I'm trying to route views/subview/test.html. Code as follows,
$stateProvider
.state("test", {url: "/test", templateUrl: "subview/test.html"});
});
Here the subview is the child folder of view folder.Since I set the view resolver to view folder only it not supports the view/subview/test.html.
Is it possible to setPrefix to all subfolders? If not, suggest other ways to handle this problem.
no you will need to set the full path each time - the path is relative to the top level html page the app is running in - you could of course use variables to manage this e.g.
var baseTemplatePath = "/WEB-INF/views/";
$stateProvider
.state("test", {url: "/test", templateUrl: baseTemplatePath + "subview/test.html"});
});
you could also put the variable in a higher level service for access everywhere.
angular.app("yourApp")
.service("pathService", function() {
return {
baseTemplatePath: "/WEB-INF/views/"
};
});
and then use (making sure you have injected the pathService):
$stateProvider
.state("test", {url: "/test", templateUrl: pathService.baseTemplatePath + "subview/test.html"});
});
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});