In AngularJS ui-router, state changed, url changed but template url not

Question

i tried to follow this tutorial but using Node.JS

the problem is when i click login button, it's authorized from the server side, the url is changed to http://localhost:3000/#/venue but the view is still the same, and when i check the state in the console, it's already change to venue state too.

Here's my app.js code

  var myApp = angular.module('authApp', ['ui.router', 'satellizer']);

    myApp.config(function($stateProvider, $urlRouterProvider, $authProvider) {
      console.log("Hello World from module");
      $authProvider.loginUrl = '/api/authenticate';

      $urlRouterProvider.otherwise('/auth');      
      $stateProvider

        .state('auth', {
          url: '/auth',
          templateUrl: '/index.html',
          controller:  'AuthController'
        })
        .state('venue', {
          url: '/venue',
          templateUrl: 'venue.html',
          controller: 'VenueController'
        });
    })

  myApp.controller('AuthController',function($scope, $auth, $state) {
    console.log("Hello World from auth controller");
    console.log("current state1: ",$state);

     $scope.login = function() {

      var credentials = {
        username: $scope.username,
        password: $scope.password
      }

      $auth.login(credentials).then(function(data) {
        $state.go('venue',{});
        console.log("current state2: ",$state);

      }, function(error) {   
        console.log(error);
      });
    }
  });

  myApp.controller('VenueController', function($scope, $auth, $state) {
    console.log("Hello World from venue controller");
    $scope.getVenues = function() {

      $http.get('http://localhost:3000/api/venue/1').success(function(response) {
        console.log("I got the data I requested");          
        $scope.users = response;

      }).error(function(error) {
        console.log('error');
      });
    }

  });

and this is my login page (index.html)

  <body ng-app="authApp" >

<div class="body"></div>
    <div class="grad"></div>
    <div class="header">
        <div>Field Booking</div>
    </div>
    <br>

    <div class="login" ng-controller="AuthController" >
            <input type="text" placeholder="username" ng-model="username"><br>
            <input type="password" placeholder="password" ng-model="password"><br>
            <button ng-click="login()" > Login </button>
    </div>

i already included angular and ui router source into the header and also try adding ui-view into venue.html but it doesn't load somehow.

Please help, I'm new at AngularJS and it's need to be done soon

Thanks!!!

Aditya Singh · Accepted Answer · 2016-04-17 09:12:24Z

1

When you don't have a stateParams to pass, you don't need the second parameter in $state.go. Use below instead:

$state.go('venue');

Also, the issue is that you are not having any ui-view directive within which your state will load. Add a ui-view directive in your html like this and it will work

<div ui-view></div>

Read more about ui-view here: https://github.com/angular-ui/ui-router/wiki#where-does-the-template-get-inserted

answered Apr 17, 2016 at 9:12

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

In AngularJS ui-router, state changed, url changed but template url not

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