i am facing problem to implement the angular routing in one of my learning project, i am trying to create a very simple project for learning purpose and it seems i got stuck in the initial stage itself, please guide me what i am doing wrong here, below are the respective elements i have used in my project, index.html is the home page which works good , but somehow i am not able do achieve routing.
My goal : i want to create single page application , so i want view1, view2 should end up on index.html only and for that purpose i have used <div data-ng-view=""></div>
in index.html.
note: i have not shared the spring elements (classes , maven pom , etc..) as i feel spring boot is working perfectly i am doing something wrong in the angularJS side.
any help will be greatly appreciable :)
appDemo.controller("view1controller",function($scope){ });
appDemo.controller("view2controller",function($scope){ });
appDemo.config(['$routeProvider',function($routeProvider) {$routeProvider.
when('/demo/view1', {templateUrl: 'view1.html',controller: 'view1controller'}).
when('/demo/view2', {templateUrl: 'view2.html',controller: 'view2controller'}).
otherwise({redirectTo: '/demo/view1'});
}]);
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<meta charset="ISO-8859-1">
<title>demo</title>
<script src="https://code.angularjs.org/1.2.20/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<div data-ng-controller="view1controller"><a href="/demo/view1">get view1</a></div>
<div data-ng-controller="view1controller" ><a href="/demo/view2">get view2</a></div>
<div data-ng-view=""></div>
</div>
</body>
</html>
@Controller
public class HomeController {
private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
@RequestMapping(value = "/", method = RequestMethod.GET)
public String greeting(Map<String, Object> model) {
return "index";
}
}
view1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>VIEW1</h1>
</body>
</html>
view2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>VIEW1</h1>
</body>
</html>
Routes.java
@Controller
static class Routes {
@RequestMapping({
"/bikes",
"/milages",
"/gallery",
"/tracks",
"/tracks/{id:\\w+}",
"/location",
"/about"
})
public String index() {
return "forward:/index.html";
}
js
.config(
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: '/partials/_index.html',
controller: 'IndexCtrl'
}).
when('/bikes', {
templateUrl: '/partials/_bikes.html',
controller: 'BikesCtrl'
}).
when('/milages', {
templateUrl: '/partials/_milages.html',
controller: 'MilagesCtrl'
}).
otherwise({
redirectTo: '/'
});
}
This is a nice link with routing example http://info.michael-simons.eu/2014/04/15/spring-boot-as-a-backend-for-angularjs/
I ran into the similar problem before using Spring Boot and Angularjs.
So you have your code: <a href="/demo/view1">get view1</a>
in the event you click on the tag, and the URL on the web browser displays something like http://localhost:8080/#!/demo/view1/ NOTICE: The /#!/ that appears in the url means you are in (Hashbang in HTML5 Mode) or just (Hashbang mode). AngularJS ngRoute routing operates in three modes:
This answer provides great info on the modes. Angularjs routing ...and for more on Hashbang mode look here
Be aware that you can configure the routing mode by using $locationProvider eg $locationProvider.html5Mode(true);
for HTML5 config or $locationProvider.hashPrefix('!');
for Hashbang (#!).
Depending on the mode you will need to adjust your URLs <a href="/demo/view</a>"
like so...
<a href="#!/demo/view1">
<a href="/demo/view1">
should be fine, but you might need to specify the url base such as : <head> .... <base href="/myUrlBase"> .... </head>
or disable in the
$locationProvider.html5Mode({ enabled: true, requireBase: false //disabled attribute });
Finally, be aware of where your templateUrl: points to {templateUrl: 'view1.html', controller: 'view1controller'})
and {templateUrl: 'view2.html',controller: 'view2controller'})
Where they are currently pointing in your code for a (Spring Boot default config) placing your view1.html and view2.html directly below the static folder should work such as:
I am not sure if this is responsive. But this is easy to try. I am experimenting with angular and spring-boot as well. What I did was use web-jars version of angular. If you are using Spring-Boot is is hard to debug. Spring-Jars seems to be the route people are taking if you are using maven and client side scripting. Also, when I added the spring my script tags in my index I needed to load angular-min.js, angular-resource.min.js, and angular-load.min.js before I was able to get spring-boot to work. Once all three modules were loaded then angular seemed to work like a champ in spring-boot.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.