2016-05-20 103 views
1

我試圖從aangularjs頁面導航到另一個頁面,但它不起作用。無法在angularjs中導航頁面

我的文件的NodeJS是

app.get('/signup', function(req, res, next) { 
    res.sendFile(path.join(__dirname, '../public/templates', 'test.html')); 
    }); 

module.exports = app; 

我Angularjs頁面1

<!DOCTYPE html> 
<html ng-app="signApp"> 
<head> 

</head> 
<body ng-controller="signCtrl" ui-view="content">  

    <a ui-sref="home">Home</a> 
</body> 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="/controller/test.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> 

</html> 

我控制器

var app = angular.module('signApp', ['ui.router']); 

    app.config(function($stateProvider) { 
     //$locationProvider.html5Mode(true); 
     $stateProvider 
     .state('home', { 
      url: 'home', 
      views: { 
       '[email protected]': { 
       templateUrl: 'templates/register.html', 
       controller: 'signCtrl' 
       } 
      } 
      }); 

    }); 

    app.controller('signCtrl', function($scope, $state) { 
     $state.go('home'); 
    }); 

我的另一頁是

<!DOCTYPE html> 
<html ng-app="signApp"> 
<head> 

</head> 
<body ng-controller="signCtrl">  

    <form ng-submit="regForm()"> 
     <br> user name: 
     <input type="text" ng-model="user.name"> 
     <br> 
     <br> password: 
     <input type="text" ng-model="user.password"> 
     <br>  
     <input type="submit" value="Submit"> 
    </form> 

</body> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="/controller/test.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> 
</html> 

使用此代碼導航不會發生。在網址中,我得到了#號。當使用位置提供程序刪除#鏈接主頁將變黑。請幫我

回答

0

首先,在你的控制器,你忘了添加「/」的URL:

var app = angular.module('signApp', ['ui.router']); 

    app.config(function($stateProvider) { 
     //$locationProvider.html5Mode(true); 
     $stateProvider 
     .state('home', { 
      url: '/home', 
      views: { 
       '[email protected]': { 
       templateUrl: 'templates/register.html', 
       controller: 'signCtrl' 
       } 
      } 
      }); 
    }); 

    app.controller('signCtrl', function($scope, $state) { 
     $state.go('home'); 
    }); 

我注意到,這是不對的第二件事情是,你的第二個模板包含

<!DOCTYPE html> 
<html ng-app="signApp"> 
<head> 

</head> 
<body ng-controller="signCtrl"> 

您並不需要所有這些,只需要您在瀏覽視圖時將添加到網頁中的內容。

的第三件事是,你應該定義兩個獨立的國家「家」和「home.register」

.state('home.register', { 
     parent: 'home', 
     url: '/signup', 
     views: { 
      '@home': { 
       template: 'your template path ' 

      } 
     } 
    }) 
    .state('home', { 
     url: '/home', 
     views: { 

       template: 'your home template' 


     } 
    });