我有一个问题,棱角分明的js,我已经创建的login.html&安培; home.html做为..成功后登录我想页面切换到home.html的。
我的路由不能正常使用,默认的网址为localhost /角< - 这显示的login.html登录后的URL改变为localhost /家,但它不会显示home.html的
我试过路由真实路径,这是本地主机/角/查看/ home.html的,但仍然没有好
我的文件夹和放大器;文件顺序
角(文件夹,以保持角度LIB)应用程序(文件夹保持app.js我的路由)视图(文件夹保持我的home.html做为)的login.html(我的指数) server.js(如Node.js的我的服务器) user_auth.js(用于登录功能)我的code代表的login.html
< HTML NG-应用=对myApp>< HEAD> &所述; SCRIPT SRC =HTTP://$c$c.jquery.com/jquery-1.9.1.min.js>&下; /脚本> <脚本SRC =角1.0.6 / angular.js>< / SCRIPT> <脚本SRC =应用程序/ JS / app.js>< / SCRIPT>< /头><标题> Desainku< /标题><身体GT;< H2>登录和LT; / H> < DIV NG控制器=ajaxCtrl> &所述p为H.; <标签>用户名:其中; /标签> <输入类型=文本名称=用户名NG模型=用户名/> &所述; / P> &所述p为H.; <标签>密码:LT; /标签> <输入类型=密码NAME =密码NG模型=密码/> &所述; / P> <输入类型=提交值=提交NG点击=submitPost()/> &所述p为H.; {{结果}}&下; / P>< / DIV>< /身体GT;< / HTML>
我的code为app.js(路由和发送服务器)
VAR应用= angular.module('对myApp',[]);的app.config(['$ routeProvider','$ locationProvider',函数($ routeProvider,$ locationProvider){ $ locationProvider.html5Mode(真); $ routeProvider.when('/角/家',{ templateUrl:视图/ home.html做为', 控制器:'homeCtrl });}]);功能homeCtrl($范围){ 警报('有人叫我');}app.controller('ajaxCtrl',函数($范围,$位置){ VAR URL =HTTP://本地主机:7788 /登录; $ scope.submitPost =功能(){ $阿贾克斯({ 网址:网址, 输入:POST, 数据类型:JSON, 数据:{用户名:$ scope.username,密码:$ scope.password}, 成功:功能(数据){ $范围。$应用(函数(){ $ scope.result = data.message; 如果(data.status ==='真'){ 警报($ location.path()); $ location.path(家)替换()。 } }); }, 错误:功能(数据){ 警报('错误从服务器获取数据'); } }); };});'
我的code为server.js&安培; user_auth.js
------------服务器 VAR前preSS =要求('前preSS), 应用=新的前$ P $(PSS) calldb =要求(./user_auth.js), FS =要求(FS); app.post('/登录,calldb.login);------------ USER_AUTHexports.login =功能(REQ,RES){ connDB.check_user(req.body,功能(错误){ 的console.log(req.header); res.header(访问控制允许原产地,*); res.header(访问控制允许报头,内容类型,X-要求,随着); 如果(ERR){ res.send(JSON.stringify({状态:'假',留言:错误登录'})); }其他{ res.send(JSON.stringify({状态:真,留言:Succesfull登录'})); } });};
解决方案
User2401192,
首先第一件事情,你需要声明NG-鉴于你的HTML:
< DIV NG-视图>< / DIV>
现在,当你templateUrl变化(例如在执行 $ location.path(家)替换();
),
$ routeProvider.when('/角/家',{ templateUrl:视图/ home.html做为', 控制器:'homeCtrl});
您 NG-视图
将被替换为新的URL的内容。在这种情况下查看/ home.html做为
。
两件事情我想补充:
请不要使用经典的$。阿贾克斯(..),使用$ http服务,因为它是有前途的API的美观大方等优点,而且非常有用的HTTP拦截器(听起来并不多,但他们是 - 例如显示加载飞溅或拦截未经授权403请求。没什么:),有一件事其实。i have a problem with angular js, i've created login.html & home.html.. after successfully login i want to change the page to home.html.
my routing is not working, default url is localhost/angular <- this display login.html after login the url changes to localhost/home, but it wont display home.html
i tried routing the "realpath" which is localhost/angular/view/home.html but still no good
my folder & file order
angular (folder to keep angular lib) app (folder to keep app.js my routing) view (folder keep my home.html) login.html (as my index) server.js (node.js as my server) user_auth.js (function for login)my code for login.html
<html ng-app="myApp" >
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="angular-1.0.6/angular.js"></script>
<script src="app/js/app.js"></script>
</head>
<title>Desainku</title>
<body>
<h2>Login</h2>
<div ng-controller="ajaxCtrl" >
<p>
<label>Username:</label>
<input type="text" name="username" ng-model="username" />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" ng-model="password" />
</p>
<input type="submit" value="submit" ng-click="submitPost()" />
<p>{{result}}</p>
</div>
</body></html>
my code for app.js (routing and send server)
var app = angular.module('myApp', []);
app.config(['$routeProvider','$locationProvider',function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/angular/home', {
templateUrl: 'view/home.html',
controller : 'homeCtrl'
});
}]);
function homeCtrl($scope){
alert('someone call me');
}
app.controller('ajaxCtrl', function($scope, $location) {
var url = "http://localhost:7788/login";
$scope.submitPost = function() {
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: {username: $scope.username, password: $scope.password},
success: function(data) {
$scope.$apply(function(){
$scope.result=data.message;
if (data.status === 'true') {
alert($location.path());
$location.path('home').replace();
}
});
},
error: function(data) {
alert('Error get data from server');
}
});
};
});'
my code for server.js & user_auth.js
------------server
var express = require ('express'),
app = new express(),
calldb = require ("./user_auth.js"),
fs = require('fs');
app.post('/login',calldb.login);
------------user_auth
exports.login = function(req, res) {
connDB.check_user(req.body, function(err) {
console.log(req.header);
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
if (err) {
res.send(JSON.stringify({status: 'false', message: 'Error login'}));
} else {
res.send(JSON.stringify({status: 'true', message: 'Succesfull login'}));
}
});
};
解决方案
User2401192,
First things first you need to declare ng-view in your html :
<div ng-view></div>
Now when your templateUrl changes ( e.g. you execute $location.path('home').replace();
),
$routeProvider.when('/angular/home', {
templateUrl: 'view/home.html',
controller : 'homeCtrl'
});
your ng-view
is replaced with the content of the new url. In this case view/home.html
.
Two things I'd like to add :
Don't use the classic $.ajax(..), use $http service, because it has the nice advantages of promise APIs, and the extremely useful http interceptors ( might not sound like much but they are - e.g. showing a loading splash or intercepting 403 Unauthorized requests. Nothing :), there was just one thing actually.