CODEWITHSUNDEEP
javascriptangularjs
vishesh
vishesh

Reputation: 63

$location.path("/"); not working properly

When I am trying to use $location.path(), the url changes but whatever I have passed in .path is appened to my current url. I want that when I execute my addShow(), I want to go to index.html which is my home page. Could you please help. The url changes like this: http://localhost:8080/add and when I execute my addShow function it changes to: http://localhost:8080/add#/ I want it to change to go to my home page.

angular.module('app').controller("MainController",['$location', function($location) {
      var vm = this;
      vm.title = 'TV Show';
      vm.searchInput = '';
      vm.shows = [{
        title: 'Game of Thrones',
        year: 2011,
        favorite: true
      }, {
        title: 'Walking Dead',
        year: 2010,
        favorite: false
      }, {
        title: 'Firefly',
        year: 2002,
        favorite: true
      }, {
        title: 'Banshee',
        year: 2013,
        favorite: true
      }, {
        title: 'Greys Anatomy',
        year: 2005,
        favorite: false
      }];
      vm.orders = [{
        id: 1,
        title: 'Year Ascending',
        key: 'year',
        reverse: false
      }, {
        id: 2,
        title: 'Year Descending',
        key: 'year',
        reverse: true
      }, {
        id: 3,
        title: 'Title Ascending',
        key: 'title',
        reverse: false
      }, {
        id: 4,
        title: 'Title Descending',
        key: 'title',
        reverse: true
      }];
      vm.order = vm.orders[0];
      vm.new = {};
      vm.addShow = function() {
        vm.shows.push(vm.new);
        console.log(vm.shows);
        vm.new = {};
        $location.path("/");
      };

    }]);

my config function is as below:

    (function() {

  "use strict";

  angular
    .module("app")
    .config(function($routeProvider, $locationProvider) {


      //$locationProvider.html5Mode(true);

      $routeProvider
        .when('/', {
          templateUrl: 'list.html',
          controller: 'MainController',
          controllerAs: 'main',
        })
        .when('/add', {
          templateUrl: 'add.html',
          controller: 'MainController',
          controllerAs: 'main',
        })
        ;

    });
})();

Upvotes: 4

Views: 154

Answers (4)

ssskip
ssskip

Reputation: 259

U need provide a base url for your app, because when u call path method, angular treat 'http://localhost:8080/add' as the app base url,so works not correct.

Specify the url base in the head of your main html file. 

<base href="/">

also if u want use html5 mode:

$locationProvider.html5Mode(true);

document guide

example: http://plnkr.co/edit/2EXVYKCjdKWPBd7LDEQB?p=preview

Upvotes: 1

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

I went through your Plunkr (plnkr.co/edit/0z6ng0?p=preview), the issue is the way you are navigating to the Add page. This line - a href="./add.html" is redirecting the page directly to add.html. Instead use a function in the controller to change the location to "/add".

main.ctrl.js(Controller): (Add this function)

vm.newShow = function() {
   $location.path('/add');
};

List.html:

<a href="">
      <button class="btn-primary pull-right" ng-click="main.newShow()">New Show</button>
</a>

Upvotes: 1

Sugyan Swain
Sugyan Swain

Reputation: 17

just use controllerAs: 'vm',i think it will work. just reply me

Upvotes: 0

pokaxperia
pokaxperia

Reputation: 87

Try replace $location.path("/"); with $window.location.href = "/";

Upvotes: 2

Related Questions