Javascript AngularJs$routeProvider和$location与ajax调用

因此，我一直在尝试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>

现在的问题是，当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调用之前自动重新加载页面，这就是为什么这不起作用的原因

所以这里的问题是，如何像使用Routes一样使用Ajax加载我的partial，但不使用$location重新加载页面。或者我必须做些别的事情才能做到这一点

谢谢你的帮助

更新：

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

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

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

此时页面会被重新加载，而我的部分内容不会被加载，因为我的路由已被忽略。

我将开始尝试以下操作：

---

基本上，他们重写了$location.path（）函数，以获取一个额外的参数来指定是否应该重新加载页面。

您能在JSFIDLE中更新代码吗

$location.path('/dashboard');