0

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 :)

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) {

            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>
Soumyaansh
  • 8,626
  • 7
  • 45
  • 45

3 Answers3

0

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/

Saurabh
  • 7,525
  • 4
  • 45
  • 46
0

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:

  1. Hashbang Mode
  2. HTML5 Mode
  3. Hashbang in HTML5

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 e.g.$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...

  • For Hashbang & Hashbang in HTML5 use <a href="#!/demo/view1">
  • For HTML5 <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:

enter image description here

Community
  • 1
  • 1
Jet_C
  • 644
  • 9
  • 12
-1

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.

qwarlock
  • 1