CODEWITHSUNDEEP
javascriptangularjsangular-routing
prudhvi259
prudhvi259

Reputation: 547

Routing is not working properly in angular js

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.

Upvotes: 2

Views: 75

Answers (2)

Durgpal Singh
Durgpal Singh

Reputation: 11953

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

Here is woking Fiddle

Upvotes: 0

Stark Buttowski
Stark Buttowski

Reputation: 1849

You should provide the link prefixed with #!.

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

Upvotes: 2

Related Questions