Wednesday 15 May 2013

java - Spring Boot and angularJS - Routing is not working in my demo project -



java - Spring Boot and angularJS - Routing is not working in my demo project -

i facing problem implement angular routing in 1 of learning project, trying create simple project learning purpose , seems got stuck in initial stage itself, please guide me doing wrong here, below respective elements have used in project, index.html home page works , somehow not able accomplish routing.

my goal : want create single page application , want view1, view2 should end on index.html , purpose have used <div data-ng-view=""></div> in index.html.

note: have not shared spring elements (classes , maven pom , etc..) sense spring boot working doing wrong in angularjs side.

any help appreciable :)

app.js 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'}); }]); index.html <!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> homecontroller.java @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) { homecoming "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>

i not sure if responsive. easy try. experimenting angular , spring-boot well. did utilize web-jars version of angular. if using spring-boot is hard debug. spring-jars seems route people taking if using maven , client side scripting. also, when added spring script tags in index needed load angular-min.js, angular-resource.min.js, , angular-load.min.js before able spring-boot work. 1 time 3 modules loaded angular seemed work champ in spring-boot.

java angularjs spring spring-boot

No comments:

Post a Comment