2016-04-17 87 views
2

我試圖按照this tutorial但使用Node.js的在AngularJS UI路由器,狀態改變,網址改變,但模板URL不是

的問題是,當我點擊登錄按鈕,它是從服務器端授權,該網址更改爲http://localhost:3000/#/venue但視圖仍然相同,並且當我檢查控制檯中的狀態時,它已經改變爲場地狀態。

這裏是我的app.js代碼

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'); 
     }); 
    } 

    }); 

,這是我的登錄頁面(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> 

我已經包括角和UI路由器源到頭部,並嘗試添加ui-view到venue.html中,但它不會以某種方式加載。

請幫幫忙,我在AngularJS新的,它是需要儘快完成

謝謝!

回答

1

如果您沒有stateParams通過,則不需要$state.go中的第二個參數。下面改用:

$state.go('venue'); 

而且,問題是,你沒有任何ui-view指令中,你的狀態將會加載。添加ui-view指令在HTML這樣的,它會工作

<div ui-view></div> 

瞭解更多關於ui-view這裏:https://github.com/angular-ui/ui-router/wiki#where-does-the-template-get-inserted

+0

它的工作原理!非常感謝 –

相關問題