Routing is not working properly in angular js

Question

Here is my code,

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="lib/bootstrap.min.js"></script>

    <div class="container">
        <li><a href="#NewEvent">Add New Event</a>
        </li>
        <li><a href="#DisplayEvent">Display Event</a>
        </li>

        <div ng-view></div>
    </div>
</body>
<script type="text/javascript">
    var app = angular.module("myApp", ['ngRoute']);
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/NewEvent', {
            templateUrl: 'add_event.html',
            controller: 'AddEventController'
        }).
        when('/DisplayEvent', {
            templateUrl: 'show_event.html',
            controller: 'ShowDisplayController'
        }).
        otherwise({
            redirectTo: '/DisplayEvent'
        });
    }]);
    app.controller("AddEventController", function($scope) {
        $scope.message = "This is Add New Event";
    });
    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is Display Event";
    });
</script>

</html>

When i load this page as wrote in the code it is showing display event by defalut and the default url is http://localhost:8017/angular/angular5.php#!/DisplayEvent
but when i click on Add New Event link the url is changing to http://localhost:8017/angular/angular5.php#!/DisplayEvent#NewEvent and nothing is changing in the view part. To see the new event view manually i am changing the url to http://localhost:8017/angular/angular5.php#!/NewEvent how to solve this issue.

Stark Buttowski · Accepted Answer · 2017-07-14 07:21:38Z

2

You should provide the link prefixed with #!.

<li><a href="#!NewEvent">Add New Event</a></li>
<li><a href="#!DisplayEvent">Display Event</a></li>

answered Jul 14, 2017 at 7:21

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

prudhvi259 Over a year ago

thanks for your answer it solved my issue. Another doubt is there any way to remove #! completely from url ?

prudhvi259 Over a year ago

give any suggestion on #!

Stark Buttowski Over a year ago

@prudhvi259 you can refer stackoverflow.com/questions/14319967/…

Durgpal Singh · Accepted Answer · 2017-07-14 07:37:06Z

0

When I remove ngRoute in your code then It is working on my side.

Here is woking Fiddle

answered Jul 14, 2017 at 7:37

Durgpal Singh

12k4 gold badges40 silver badges52 bronze badges

Collectives™ on Stack Overflow

Routing is not working properly in angular js

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related