Angular 和 NodeJS 中的路由问题 [angular]
Posted
技术标签:
【中文标题】Angular 和 NodeJS 中的路由问题 [angular]【英文标题】：Routing trouble in Angular & NodeJS [angular] 【发布时间】：2013-05-14 23:26:11 【问题描述】：我对 Angular js 有疑问， 我已经创建了 login.html 和 home.html .. 成功登录后，我想将页面更改为 home.html。
我的路由不工作，默认 url 是 localhost/angular
我尝试路由 localhost/angular/view/home.html 的“真实路径”，但仍然不行
我的文件夹和文件顺序
angular（保存 angular lib 的文件夹） app（保存 app.js 我的路由的文件夹） 查看（文件夹保留我的 home.html） login.html（作为我的索引） server.js（node.js 作为我的服务器） user_auth.js（登录功能）我的 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>
我的 app.js 代码（路由和发送服务器）
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');
);
;
);'
我的 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'));
);
;
【问题讨论】：
而不是$location.path('home').replace(), could you simply write $location.path('/angular/home')` 并检查它是否有效？
【参考方案1】：
替换 app.js 代码
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, $window)
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();
return $window.location.href = 'home.html';
);
,
error: function(data)
alert('Error get data from server');
);
;
);
我会试试它的工作原理。
【讨论】：
【参考方案2】：用户2401192，
首先你需要在你的 html 中声明 ng-view ：
<div ng-view></div>
现在当你的 templateUrl 改变时（例如你执行 $location.path('home').replace(); ），
$routeProvider.when('/angular/home',
templateUrl: 'view/home.html',
controller : 'homeCtrl'
);
您的ng-view 将替换为新网址的内容。在这种情况下view/home.html。
我想补充两点：
-
不要使用经典的 $.ajax(..)，使用 $http 服务，因为它具有 Promise API 的良好优势，以及非常有用的 http 拦截器（可能听起来不多，但它们是 - 例如显示加载启动或拦截 403 Unauthorized 请求。
什么都没有 :)，实际上只有一件事。
【讨论】：
以上是关于Angular 和 NodeJS 中的路由问题 [angular]的主要内容，如果未能解决你的问题，请参考以下文章
nodejs 和 Angular 应用程序使用 JWT 发送 401 Unauthorized 和 200 OK