在路由和角功放麻烦;的NodeJS [角]功放、路由、麻烦、NodeJS

2023-09-13 03:28:41 作者:一战定江山

我有一个问题,棱角分明的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>        < D​​IV 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:

 < D​​IV 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.

 
精彩推荐