今天我开始研究网站的angular.js转换。我有一个index.html
作为主要页面,我在其中查看其他视图ng-view
。到目前为止,我已创建了login
和signup
视图。我正在与后端开发人员合作,他建议我使用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);
});
}
});
我希望这么多代码足以让你知道这是怎么回事。提前谢谢。
答案 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);
});