AngularJs $routeProvider 和 $location 与 ajax 调用答案

【问题标题】：AngularJs $routeProvider and $location with ajax callAngularJs $routeProvider 和 $location 与 ajax 调用
【发布时间】：2015-10-29 20:46:53
【问题描述】：

所以我一直在尝试使用 AngularJs，我喜欢你如何在 config 方法中使用 $routeProvider 来通过 Ajax 调用将部分加载为模板。

所以我这样做了：

var $app = angular.module('app', ['ngRoute']);

$app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
  $routeProvider
    .when("/pop", {controller: "popCtrl", templateUrl: "partials/pop_test.html"})
    .when("/dashboard", {controller: "dashBoardCtrl", templateUrl: "partials/dashboard.html"})
    .otherwise({redirectTo: "/"})

    $locationProvider.html5Mode(true);
}])

我认为这是一个很好的加载动态内容的系统，但现在这是我遇到的问题。

我有一个表格：

<form ng-submit action="">
        <input type="text" name="username" placeholder="Username" ng-model="creds.username">
        <input type="text" name="password" placeholder="Password" ng-model="creds.password">
        <input ng-click="login()" type="submit" value="Login">
    </form>

在这种形式中，我正在检查 creds.username 和 creds.password 的值，如果它们与我拥有的用户名密码对象匹配，那么您就可以加载仪表板。

我不打算展示登录功能的整个过程，因为这会使事情变得更加混乱，但我在某个地方做了一个登录功能：

login = function(creds){
            if(creds.username == 'admin' && creds.password == '222'){
                $location.path('/dashboard');
            }else{
                alert("Wrong Credentials");
            }
        },

现在的问题是，当 url 更改为 /dashboard 时，它会重新加载页面，而不是像使用 when 方法

那样进行 ajax 调用并加载我的部分

所以这使得加载部分的 Ajax 调用：

.when("/dashboard", {controller: "dashBoardCtrl", templateUrl: "partials/dashboard.html"})

当我使用 $location.path 重定向页面时，它会重新加载页面，而不是使用 Ajax 加载部分页面。

$location.path('/dashboard');

我曾相信我在 app.js 文件中设置的路由将允许页面进行 ajax 调用，但我认为这是因为 $location.path 在 ajax 调用之前自动重新加载页面made 这就是为什么这不起作用。

所以这里的问题是如何像使用 Routes 一样使用 Ajax 加载我的部分内容，但 $location 不会重新加载页面。还是我必须做其他事情才能做到这一点？

感谢您的帮助，谢谢。

更新：

所以我遗漏了一个重要信息，那就是我的导航链接。

<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/pop">Pop</a></li>
        <li><a href="/dashboard">Dashboard</a></li>
    </ul>

如果我点击它们，我的路线就可以正常工作并且页面不会重新加载。我进行了一个 ajax 调用，我的部分被加载了。但是当我这样做时

$location.path('/dashboard');

此时页面被重新加载，而我的部分没有被加载，因为我的路线被忽略了。

【问题讨论】：

能否更新jsfiddle中的代码

标签： javascript html ajax angularjs

【解决方案1】：

我会开始尝试这个： http://joelsaupe.com/programming/angularjs-change-path-without-reloading/

基本上，他们重写了 $location.path() 函数以采用额外的参数来指定是否应重新加载页面。

【讨论】：