如何在angularjs中将一个页面导航到另一个页面

时间:2016-05-19 10:39:17

标签: angularjs

我试图将一个页面导航到另一个页面,但它没有工作。我使用angularjs作为前端。

我的angularjs文件是

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

  app.config(function($stateProvider, $urlRouterProvider) {
    // default route
     $urlRouterProvider.otherwise("/");

     // app routes
     $stateProvider
         .state('home', {
             url: '/tokken/s/',
             templateUrl: 'templates/register.html',
             controller: 'loginCtrl'
         });

   });
  // Controller function and passing $http service and $scope var.
  app.controller('loginCtrl', function($scope, $state, $http) {
    // create a blank object to handle form data.
    $scope.user = {};
    // calling our submit function.
    $scope.submitForm = function() {
      // Posting data to  file
      $http.post('/tokken/login/', $scope.user).then(function (response) {
        //$httpProvider.defaults.headers.common["X-AUTH-TOKEN"] = response.data;
        if (response.errors) {
          // Showing errors.
          $scope.errorName = response.errors.name;
          $scope.erroPassword = response.errors.password;
        } else {
           //$scope.message = response.data;
          $state.go('home');
        }
      });
    };

 // calling our submit function.
    $scope.regForm = function() {
      // Posting data to  file
      $http.post('/tokken/s/', $scope.user).then(function (response) {
        //$httpProvider.defaults.headers.common["X-AUTH-TOKEN"] = response.data;
        if (response.errors) {
          // Showing errors.
          $scope.errorName = response.errors.name;
          $scope.erroPassword = response.errors.password;
        } else {
           $scope.message = response.data;

        }
      });
    };
  });  
/////////////

我的html文件是

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

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

    <form  ng-submit="submitForm()">
      <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="login">
    </form>
</body>
<script src="/js/angular.min.js"></script>

<script src="/controller/login.js"></script>

<script src="/js/angular-ui-router.min.js"></script>
</html>

上面的代码发布了一个值。但没有导航到另一个页面。 而我在其中使用$ location provider。帖子没有用。请帮帮我

2 个答案:

答案 0 :(得分:2)

您应该将索引内容放入另一个模板中,以便状态可以在状态更改时返回“/”,并且因为您将其设置为默认状态:$urlRouterProvider.otherwise("/");

将此添加到您的stateProvider:

.state('login', {
             url: '/',
             templateUrl: 'templates/login.html',
             controller: 'loginCtrl'
         });

此外,由于您的州已经指定了控制器,因此正文标记中的ng-controller="loginCtrl"不属于那里。

答案 1 :(得分:0)

请检查此代码

    .state('home', {
        url: '/token/s',
        views: {
          'content@': {
            templateUrl: 'templates/register.html',
            controller: 'loginCtrl'
          }
        }
      })

而不是

 .state('home', {
     url: '/tokken/s/',
     templateUrl: 'templates/register.html',
     controller: 'loginCtrl'
 });
相关问题