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新的,它是需要儘快完成
謝謝!
它的工作原理!非常感謝 –