I want to create project with using Spring boot + rest + angularJS, I did whole back end with rest, I'm using angular first time and I watched a lot of tutorials for creating UI, so, I did all as in many tutorials but anyway it doesnt work and I cannot understand why because event doesnt exist an error I'm sitting 2 days for solving problem and I'm crushed. I don't know what to do. Please, someone help me to set up routeProvider correct, I downloaded whole angular libs and put in project. So, take a look please.
My app.js
var myApp = angular.module('myApp',['ngRoute']).
config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when("/books/", {templateUrl:"/templates/book/list.html"})
}
);
My book.html, I did img because I want you see that tag isn't readable:
book.html
and list.html:
list.html
And when I go to localhost:8080/books/ it gives me Json value from RestController and no any error like 404 or anything.
Try to put a controller for each view. Add this:
$routeProvider.when(
"/books/",
controller: 'YourBooksController',
{templateUrl:"/templates/book/list.html"}
)
However i strongly suggest you to use ui router.
The Spring Boot + AngularJS documentation is pretty good: Spring and Angular JS: A Secure Single Page Application. This tutorial includes a simple router that you can use as an example for resolving your issues.
For full featured application example code try JHipster.
Related
I have created a mvc project but found I need to add a webforms page. I have tired a few variations of this but have only gotten 404 errors. Seen a few suggestions elsewhere and settled on this:
function ViewRunSheet() {
var route = document.getElementById('Route').value;
var routeDate = $("#RouteDate").find("input").val();
window.location.href = "./RunSheet.aspx?route=" + route + "&date=" + moment(routeDate).format('YYYYMMDD');
}
Has anyone got any ideas as to:
Why this method doesn't appear to work
If there is a better solution I should be using
Also its my first question so if I have missed anything major I will edit it in
EDIT This is Running locally on my system and is not deployed via IIS
EDIT Since posting I have been playing around and decided to test moving the web form out of my views folder directly into the root folder and now the code works. This is good however I am intrigued to know why if anyone knows
You may need to add below in route.config file to ignore the routing for aspx page
routes.IgnoreRoute("{resource}.aspx/{*pathInfo}");
I am working on a chrome extension which injects some content script in google.com.au. That content script then loads up an angular ui router based app having a small interface. I am using $state without url. So only templateUrl and controller. The problem is when I use $state.go('home') to go to home page of my small app, $state.go in internally changes the location or url from for e.g.
(1) :- https://www.google.com.au/#q=hello
to
(2) :- https://www.google.com.au/#/q=hello
(there is an extra / after q)
the second url is invalid one which redirect me back to google.com.au.
Also, its worth mentioning that - the same app worked fine when I injected it in a linked search results page whose url didn't have any # in it.
Also, I have tried variations like $state.go and $state.transitionTo with third parameter of {location:false ....}. but it stills changes the urls like above.
I am stuck and not able to go ahead with logic ahead.
here is screencast of the problem.
http://screencast.com/t/ZrBtlkU3z
Any help will be highly appreciated.
Thanks in advance.
Update
Here is an example chrome extension containing the mentioned problem.
https://Vikasg7#bitbucket.org/Vikasg7/example-app.git
Please load this as unpacked extension and try to go to
https://www.google.com.au/#q=hello
before and after loading the extension to see the problem I have mentioned above.
Hope this helps you experts resolving the issue.
I think this is the intended behaviour of ui-router. You might need to use native javascript for this one (window.location.href = 'XXX') or maybe $location to set the hashbang exactly like you want.
Ok, After so much of research and hit and trial.
here is the code that won't change the url when changing states.
I had to use html5Mode. More detailed info and usage can be found here.
https://docs.angularjs.org/guide/$location#html-link-rewriting
stackoverflow post
AngularJS 1.1.5 - automatically adding hash tag to URLs
angular
.module("app", ["ui.router", "app.services", "app.directives", "app.controllers"])
.config(["$stateProvider", "$locationProvider", function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true
}).hashPrefix("!")
}])
hope this helps, someone out there!
I can't for my live figure out why Angular is not working along.
I defined a simple app and controller:
angular.module('weatherApp', [])
.controller("weatherController", function() {
console.log('weather controller created!');
});
In my HTML I have:
<div ng-app="weatherApp" ng-controller="weatherController"></div>
Nothing else. I'm using AngularJS 1.2.28 (constrained by the project I'm working with). Upon loading of the page, my console logs the expected text above. However, immediately following it is the following error:
Error: [ng:areq] http://errors.angularjs.org/1.2.28/ng/areq?p0=weatherController&p1=not%20a%20function%2C%20got%20undefined
Why is it doing this when it's (apparantly) working just fine?
When I'm not using a module or controller and simply define a global weatherController function, everything again works just fine.
I've looked around, but can't find anything about this being specific to 1.2.28 or something.
I figured it out! Apparently the ClientDependency was loading another app.js which does a lot more with AngularJS than my simple controller. The two simply couldn't co-exist!
Since I didn't need the other app in this particular page, I excluded it from the ClientDependency and voilá, fixed!
Normally with JavaScript you can use the following to manipulate the history, but it does not work.
Example: What I want to achieve is to go to /clients/:id and then when I go back, I want to go to /blog/, doesn't matter which page i was on before.
$scope.changeView = function(clientId){
history.pushState({}, null, '/#/blog');
$location.path('/client/' + clientId);
};
However, this does not work in Angular.
Any idea how this could be solved?
As I am confused about what your question is.. (Are you just trying to find an Angular way of manipulating the history? Or are you trying to redirect?)
Something that may be of interest to you is the $location service on AngularJS.
I just used history.pushState(), null, '/aboutus') while on a page within my app, clicked a link, then went back and it seemed to load that '/aboutus' link just fine, so long as your Angular app is configured to route that path somewhere.
I'm struggling with Angular $location service... I am trying to redirect a user to this URL : "/test/0/0", and my route.js is configured with :
$routeProvider
.when ('/test/:param1/:param2',{
// Behavior here
})
When I simply do
$location.path('/test/0/0');
Angular seems not understand this path and can't associate it with the one I configured in the routes.
I have read about the $location service : I have tried $location.search(), .url(), but none of them works.
Any ideas would be welcome!
You could put a template and a controller to these route
.when('/page/:param1/:param2',{
templateUrl:'page.html',
controller: 'PageController'
})
I made an example to show you it running, you can check the code here.
First of all, I would like to thank you NEOLPAR for this piece of code which depicts accuratly what my problem was and seems to solve it perfectly. I tried to do what you suggest and unhopefuly it didn't work. But thanks a lot anyway!
As I was all out of ideas, I tried to replace $location.path() by a window.location.href directly, which also didn't work. This lead me to the conclusion that Angular just didn't bother reloading the page (because I didn't precise it but going to '/test/0/0' was just going to the current page). Thus I googled how to force a page reload and found a really nice solution (for my precise situation), which is to use :
$route.reload();
Thank you one more time for your help!