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.
Related
I'm trying to use angularjs routing to load my templates and am getting a '404 page not found error' no matter what templateurl I put down. Should I be changing my context.xml file or am I just missing a step here? Any input would be appreciated.
This is my routing config (app.js):
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/mainview',
controller: 'appController'
})
.otherwise({
redirectTo: '/'
});
});
=============================
And my Spring Controller is as follows (SampleController.java):
#Controller
public class SampleController {
#RequestMapping(value="views/mainview", method=RequestMethod.GET)
public String displayView(){
return "views/mainview.jsp";
}
}
=============================
Folder structure is as Follows
java
com
sample
controller
SampleController.java
webapp
META-INF
resources
js
app.js
WEB-INF
views
mainview.jsp
templateUrl property defines which HTML template AngularJS should load and display inside the div with the ngView directive.
Use
templateUrl : 'mainview.html'
First you need to check the server where the server is serving file
for example :
java/com/views/mainview.html
or
views/mainview.html
I have an angularjs controller which i wanted to pass data to other angularjs controller, and here i am not using angularjs routing, only using MVC routing,
As i am using MVC Routing, i had passed data from angularjs controller to MVC controller action method, and from there i have to return to another angularjs controller, i am unable to pass data to the other controller or even it is not returning to the MVC routed View(), and in angularjs controller i used $window.location.href to rediect to the expected view, But unablt to pass data
AngularJS Controller
$http.post(attserviceBasePath + '/Dashboard/PostMembers', group)
.then(
function (response) {
window.location.href = attserviceBasePath + '/Attendance/Dashboard/GroupedTeamMembers';
}, function (error) {
//console.log(error);
});
MVC Controller:
[HttpPost]
public ActionResult PostMembers(GroupedMembers grpMembers)
{
var result = grpMembers;
return RedirectToAction("GroupedTeamMembers", result);
}
public ActionResult GroupedTeamMembers(GroupedMembers grouped)
{
return View(grouped);
}
it is not working ...
please help me to pass data from one angularjs controller to another angularjs controller through MVC controller...
Thanks In Advance.......
You have to use sessions to pass data between controllers. check this one ex
I used this code for my Oauth connextion to google :
http://anandsekar.github.io/oauth2-with-angularjs/
but google retourn uri like this
http://localhost:8080/#access_token=xxxx&expires_in=3600
but angular route don't catche it :
.when('/**access_token=:accessToken', {
template:'',
controller: 'oauthCtrl'
})
How I can do ?
Use just
.when('/', {
template:'',
controller: 'oauthCtrl'
})
and in your oauthCtrl inject $routeParams then
you can access your query strings by $routeParams.access_token and $routeParams.expires_in
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 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")"
});
});