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>

在这个表单中，我检查creds.username和creds.password的值，如果它们与我拥有的username-password对象匹配，那么你就可以加载仪表板了。

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

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

现在这里的问题是，当url更改为/dashboard时，它会重新加载页面，而不是进行ajax调用并加载我的部分，就像使用when方法一样

因此，这使得Ajax调用加载了部分：

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

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

$location.path('/dashboard');

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

所以这里的问题是，我如何像在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');

这时页面会被重新加载，而我的部分不会被加载，因为我的路由被忽略了。