Angularjs route on button click is not working

Question

I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.

My html code

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

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
     <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
     <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-controller="Controller">
<h1>Plunkr Example</h1>
  <button ng-click="changeview()">ClickMe</button>
  <h1>MainPage</h1>
</body>
</html>

My Code

var app = angular.module("app", ['ngRoute'])

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/Details', {
            templateUrl: 'details.html'
        }).
        when('/Main', {
             templateUrl: 'main.html'
         }).
        otherwise({
            redirectTo: '/Main'
        });
  }]);

app.controller("Controller", function($scope,$routeParams,$location){
  //$scope.ProductId = $routeParams.id;
  $scope.changeview = function () {
        console.log('in function changeview');
        $location.path('/Details');
    }
})

Here is my plunkr

Please help.

Marcus Höglund · Accepted Answer · 2018-05-16 17:50:27Z

3

You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates

<div ng-view></div>

Working plunker

answered May 16, 2018 at 17:50

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-05-16 17:52:54Z

2

You need to have ng-view directive in index.html

 <div class="viewWrapper">
        <div ng-view></div>
</div>

WORKING DEMO

answered May 16, 2018 at 17:52

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

usersam Over a year ago

Thanks a lot. It worked like charm. Dont know how I missed that part.

usersam Over a year ago

Just one more doubt. Now the url I can see "localhost:3000/#/Main" and "localhost:3000/#/Details" on click. Is it possible to remove hash from URL ? I would prefer to have url like "localhost:3000/Main" and "localhost:3000/Details" . Please suggest something.

Tyler Over a year ago

@sand Here is a link for how to make your URL's pretty

usersam Over a year ago

I tried , $locationProvider.html5Mode(true); as per the url you suggested but it didn't work.

Collectives™ on Stack Overflow

Angularjs route on button click is not working

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related