Angular 和 NodeJS 中的路由问题 [angular]答案

【问题标题】：Routing trouble in Angular & NodeJS [angular]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')` 并检查它是否有效？

标签： html node.js angularjs routing

【解决方案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 请求。
什么都没有 :)，实际上只有一件事。

【讨论】：