CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-routerangular-routing
Muhammad Hamza Altaf
Muhammad Hamza Altaf

Reputation: 117

Angular Routes are not working

app.js I am trying to setup routes here but It is not working and I have no idea why its not working , kindly look into this issue.When I click on page1 the url should be /employees but it takes strange shape http://localhost:3000/#!#employees

var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider){
console.log('in the routes')
$routeProvider
    .when('/employees' ,{
        templateUrl: 'templates/index.html',
        controller: 'empController'
    })
    .when('/employees/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'empController'
    })
    .when('/employees/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'empController'
    })
    .when('/employees/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'empController'
    })
})

index.html

<body ng-app='myapp' ng-controller='empController'>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="">Home</a></li>
      <li><a href="#/employees">Page 1</a></li>
      <li><a href="#/employees/create">Page 2</a></li>
      <li><a href="#/employees/:id/edit">Page 3</a></li>
      <li><a href="#/employees/:id/show">Page 3</a></li>
    </ul>
  </div>
</nav>
<hr>

<div ng-view></div>

Upvotes: 1

Views: 486

Answers (2)

DilumN
DilumN

Reputation: 2897

Try this way,

var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
console.log('in the routes')
$routeProvider
    .when('/employees' ,{
        templateUrl: 'templates/index.html',
        controller: 'empController'
    })
    .when('/employees/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'empController'
    })
    .when('/employees/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'empController'
    })
    .when('/employees/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'empController'
    })
})

Upvotes: 1

Shubham Gupta
Shubham Gupta

Reputation: 26

You can modify your app. js like this in order to handle it. 

.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

Upvotes: 0

Related Questions