Angular & 中的路由问题NodeJS [角度] [英] Routing trouble in Angular & NodeJS [angular]
问题描述
我对 Angular js 有问题，我已经创建了 login.html &主页.html成功登录后，我想将页面更改为 home.html.
我的路由不工作，默认 url 是 localhost/angular <- 这个显示 login.html登录后，url 更改为 localhost/home，但不会显示 home.html
我尝试路由realpath"，它是 localhost/angular/view/home.html 但仍然不好
我的文件夹 &文件顺序
- angular(保存角度库的文件夹)
- app(用于保存 app.js 我的路由的文件夹)
- 查看(文件夹保留我的 home.html)
- login.html(作为我的索引)
- server.js(node.js 作为我的服务器)
- user_auth.js(登录函数)
我的 login.html 代码
<title>Desainku</title><身体><h2>登录</h2><div ng-controller="ajaxCtrl" ><p><label>用户名:</label><input type="text" name="username" ng-model="username"/></p><p><label>密码:</label><input type="password" name="password" ng-model="password"/></p><input type="submit" value="submit" ng-click="submitPost()"/><p>{{result}}</p></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',控制器:'homeCtrl'});}]);函数 homeCtrl($scope){alert('有人打电话给我');}app.controller('ajaxCtrl', function($scope, $location) {var url = "http://localhost:7788/login";$scope.submitPost = function() {$.ajax({网址:网址，类型:'POST'，数据类型:'json'，数据:{用户名:$scope.username，密码:$scope.password}，成功:功能(数据){$scope.$apply(function(){$scope.result=data.message;if (data.status === '真') {警报($location.path())；$location.path('home').replace();}});},错误:函数(数据){alert('从服务器获取数据出错');}});};});'我的 server.js 代码 &user_auth.js
------------服务器var express = require('express'),app = new express(),calldb = require ("./user_auth.js"),fs = require('fs');app.post('/login',calldb.login);------------用户身份验证出口.登录=功能(请求，资源){connDB.check_user(req.body, function(err) {控制台日志(req.header)；res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");如果(错误){res.send(JSON.stringify({status: 'false', message: 'Error login'}));} 别的 {res.send(JSON.stringify({status: 'true', message: 'Succesfull login'}));}});};User2401192,
首先你需要在你的 html 中声明 ng-view :
现在当你的 templateUrl 改变时(例如你执行 $location.path('home').replace(); )，
$routeProvider.when('/angular/home', {templateUrl: 'view/home.html',控制器:'homeCtrl'});您的 ng-view 被替换为新 url 的内容.在这种情况下view/home.html.
我想补充两点:
- 不要使用经典的 $.ajax(..)，使用 $http 服务，因为它具有 promise 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.
这篇关于Angular &amp; 中的路由问题NodeJS [角度]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
