Question

所以我一直在尝试使用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");
            }
        },

现在的问题是，当网址更改为/ dashboard时，它重新加载页面而不是进行ajax调用并加载我的部分，就像 when method

一样

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

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

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

$location.path('/dashboard');

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

所以这里的问题是我如何加载我的部分Ajax，就像我使用Routes，但$ 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');

当页面被重新加载并且我的部分没有被加载时，因为我的路由被忽略了。

Answer 1

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

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

AngularJs $ routeProvider和带有ajax调用的$ location

1 个答案: