Angularjs ui-routing problems

Question

I am working on SPA application using Angularjs and .NET web api, I am also using ui-route, and I have two problems there: 1. When I go to a traveldetail.html page, routing does go there but it doesn't attach the controller; 2. "otherwise" goes to the page I want, but it doesn't change to url of that page and does't attach controller either, so page comes out blank:

var travelApp = angular.module("Travel", ["ui.router", 'ui.bootstrap']);

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $stateProvider
      .state('/', {
          url: '/',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('travellist', {
          url: '/travellist',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('traveldetail', {
          url: '/traveldetail/:travelId',
          templateUrl: 'Partials/traveldetail.html',
          controller: 'TravelDetailController'
      })
      .state('advancedsearch', {
          url: '/advancedsearch',
          templateUrl: 'Partials/advancedsearch.html',
          controller: function ($scope, $stateParams) {
              $scope.item = $stateParams.item;
          }
      })
      .state('creditcardmatcher', {
          url: '/creditcardmatcher',
          templateUrl: 'Partials/creditcardmatcher.html',
          controller: function ($scope, $stateParams) {
          $scope.item = $stateParams.item;
          }
      })
      .state('approvalgroups', {
          url: '/approvalgroups',
          templateUrl: 'Partials/approvalgroups.html',
          controller: function ($scope, $stateParams) {
              $scope.item = $stateParams.item;
          }
      })
      .state('help', {
          url: '/help',
          templateUrl: 'Partials/help.html',
          controller: function ($scope, $stateParams) {
              $scope.item = $stateParams.item;
          }
      })
      .state('otherwise', {
          url: '/travellist',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
}])

Please advise on what am I doing wrong.

TRAVELDETAIL partial page:

<h1>Travel Request</h1>
<center>    
    <table width="100%" cellpadding="0" cellspacing="0" ng-controller="">
        <tr>            
            <td>
                <table class="travelTabs">
                    <tr ng-init="tab = 1">
                        <td ng-class="{active:tab===1}">
                            <a href ng-click="tab = 1">Itinerary - Step 1 >></a>
                        </td>
                        <td ng-class="{active:tab===2}">
                            <a href ng-click="tab = 2">Travel Info - Step 2 >></a>
                        </td>
                        <td ng-class="{active:tab===3}">
                            <a href ng-click="tab = 3">Trip Info - Step 3 >></a>
                        </td>
                        <td ng-class="{active:tab===4}">
                            <a href ng-click="tab = 4">Estimates - Step 4 >></a>
                        </td>
                        <td ng-class="{active:tab===5}">
                            <a href ng-click="tab = 5">Comments - Completion</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="border:solid 2px red">
            <td>
                <p ng-show="tab === 1">
                    Paragraph 1

                </p>
                <p ng-show="tab === 2">               
                    Paragraph 2
                </p>
                <p ng-show="tab === 3">
                    Paragraph 3
                </p>
                <p ng-show="tab === 4"> 
                    Paragraph 4
                </p>
                <p ng-show="tab === 5">
                    Paragraph 5
                </p>
            </td>
        </tr>
    </table>
</center>

TravelDetailController:

travelApp.controller('TravelDetailController', function ($scope, $http, $routeParams) {
    $scope.itineraries = [];
    $http.get('api/travel/gettravel/' + $routeParams.travelId).success(function (data) {
        $scope.travel = data;
        $scope.tripType = 2;
        $scope.addItinerary();
    }).error(function () {
        alert('Error reading JSON file.');
    });

    $scope.setMultiCity = function () {
        $scope.addItinerary();
        $scope.addItinerary();
    }

    $scope.setNonMultiCity = function () {
        if ($scope.itineraries.length > 1) {
            $scope.itineraries.splice(1, $scope.itineraries.length - 1);
        }
    };

    $scope.addItinerary = function () {
        $scope.itineraries.push({
            itinerary: {
                From: '',
                To: '',
                DapartDate: '',
                DapartTime: '',
                ReturnDate: '',
                ReturnTime: '',
                Business: true
            }
        });
        if ($scope.itineraries.length > 1) {
            scope.itineraries[0].itinerary.ReturnDate = "";
            if ($scope.tripType < 3) {
                $scope.tripType = 3;
            }
        }
    };

    $scope.deleteItinerary = function (index) {

        $scope.itineraries.splice(index, 1);
        if ($scope.itineraries.length < 2) {
            $scope.tripType = 1;
        }
    };

});

What you suggest is pretty much what I am doing already in posted code. — superconsultant
– superconsultant, Commented Sep 15, 2014 at 16:35
for no. 2 it should be $urlRouterProvider.otherwise("travellist") — PGill
– PGill, Commented Sep 15, 2014 at 17:00
remove .state('/', { url: '/', templateUrl: 'Partials/travellist.html', controller: 'TravelListController'}) otherwise will redirect to travellist if no state is matched — PGill
– PGill, Commented Sep 15, 2014 at 17:04
Could you share a snippet of the TravelDetailController controller? — Malkus
– Malkus, Commented Sep 15, 2014 at 17:09
Thanks Malkus, "othrwise" has been taken care of by your example, I have also added snippet for traveldetail.html, please let me know what may be the problem of not loading the controller. — superconsultant
– superconsultant, Commented Sep 15, 2014 at 18:02

Malkus · Accepted Answer · 2014-09-15 18:41:12Z

ui-router handles otherwise differently than ngRoute

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
       $locationProvider.html5Mode(true);

       //This is your default && exception handling
       $urlRouterProvider.otherwise("travellist");

       $stateProvider
         .state('/', {
             url: '/',
             templateUrl: 'Partials/travellist.html',
             controller: 'TravelListController'
         })
       ...

Why your controller is getting errors

You are using $routeParams in your controller, this is part of the ngRoute module which you are not using.

You need to use $stateParams to access parameterized values

travelApp.controller('TravelDetailController', function ($scope, $http, $stateParams) {
    $scope.itineraries = [];
    $http.get('api/travel/gettravel/' + $stateParams.travelId).success(function (data) {
        $scope.travel = data;
    ...

Collectives™ on Stack Overflow

Angularjs ui-routing problems

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related