显示登录成功angular.js的另一个视图

时间:2015-01-12 05:19:17

标签: javascript angularjs routes location

今天我开始研究网站的angular.js转换。我有一个index.html作为主要页面,我在其中查看其他视图ng-view。到目前为止,我已创建了loginsignup视图。我正在与后端开发人员合作,他建议我使用rest客户端来处理他作为json添加的数据。一切正常。现在我遇到了一个条件,我需要[验证登录页面],不确定是否可以这样调用它。如果登录成功,我希望显示仪表板视图。我只是想知道如何使用"前端"这样做,因为这只是暂时用于测试应用程序。
这是代码 app.js

'use strict';

/**
 * @ngdoc overview
 * @name servicepriceApp
 * @description
 * # servicepriceApp
 *
 * Main module of the application.
 */
var myApp;
(function() {
    myApp = angular
        .module('servicepriceApp', [
            'ngRoute'
        ])
        .config(function($routeProvider) {
            $routeProvider
                .when('/signup', {
                    templateUrl: 'views/signup.html',
                    controller: 'SignupController'
                })

            .when('/login', {
                    templateUrl: 'views/login.html',
                    controller: 'LoginController'
                })
                .when('/dashboard', {
                    templateUrl: 'views/dashboard.html',
                    controller: 'DashController'
                })
                .otherwise({
                    redirectTo: 'views/signup.html'
                });
        });
})();

login.js

myApp.controller('LoginController', function($scope, $http) {

    $scope.login = function() {

        var data = {
            email: $scope.email,
            password: $scope.password
        };
        $http({
            url: site + '/company/login',
            method: "POST",
            transformRequest: encodeurl,
            data: data,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(data) {
            console.log(data);
        }).error(function(res) {

            console.log(res);

        });
    }
});

index.html

  <!doctype html>
<html class="no-js" ng-app="servicepriceApp">

<head>
    <meta charset="utf-8">
    <title> Service price</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/foundation.min.css">
    <link rel="stylesheet" href="styles/all.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="large-12 columns">
                <ul>
                    <li><a href="#signup"> SignUp </a>
                    </li>
                    <li><a href="#login"> Login </a>
                    </li>
                    <li><a href="#dashboard"> Dashboard </a>
                    </li>
                </ul>
            </div>
        </div>

        <div ng-view></div>
    </div>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/signup.js"></script>
    <script src="js/controllers/login.js"></script>

    <!-- endbuild -->
</body>

</html>

signup.html

var site = "http://someurl.in:9009"
var encodeurl = function(obj) {
    var str = [];
    for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    return str.join("&");
}
myApp.controller('SignupController', function($scope, $http) {

    $scope.signup = function() {

        var data = {
            email: $scope.email,
            password: $scope.password
        };
        $http({
            url: site + '/company/signup',
            method: "POST",
            transformRequest: encodeurl,
            data: data,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(data) {
            console.log(data);

        }).error(function(res) {

            console.log(res);

        });
    }
});

我希望这么多代码足以让你知道这是怎么回事。提前谢谢。

1 个答案:

答案 0 :(得分:0)

    For changing the view you need to add just $location.path("/dashboard");
    Like:-


    $http({
                    url: site + '/company/signup',
                    method: "POST",
                    transformRequest: encodeurl,
                    data: data,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).success(function(data) {
$location.path("/dashboard"); //this line is required for dashboard.
                    console.log(data);

                }).error(function(res) {

                    console.log(res);

                });