AngularJS路由在PhoneGap中无法正常工作

I have been beating my head against the wall trying to figure out why angularJS routing won't work in phonegap for me. I have all the files setup correctly and i don't receive any errors. I'm trying to change the url using the $location.url service directly from angular. So when you tap on a div the controller will have $location.url("profile") for example and nothing will happen. I tried the solution found in this * but that's not working for me. Am I doing something wrong, or is there a better way to be approaching this? Following is the routing I have setup

我一直在撞墙,试图找出为什么angularJS路由不能在我的phonegap中工作。我已正确设置所有文件,我没有收到任何错误。我正在尝试直接从angular使用$ location.url服务更改网址。因此,当您点击div时,控制器将具有$ location.url(“profile”),例如,什么都不会发生。我尝试了这个*中找到的解决方案,但这对我不起作用。我做错了什么,还是有更好的方法来接近这个?以下是我设置的路由

var app = angular.module("App", ["hmTouchevents"])
.config(function($routeProvider) {

$routeProvider
    .when("/index.html", {
        templateUrl: "/views/login.html",
        controller: "loginCtlr"
    })
    .when("/landing", {
        templateUrl: "/views/landing.html",
        controller: "landingCtlr"
    })
    .when("/single-view/:id", {
        templateUrl: "/views/single-view.html",
        controller: "singleViewCtlr"
    })
    .when("/restaurant", {
        templateUrl: "/views/restaurant-info.html",
        controller: "restaurantCtlr"
    })
    .when("/profile/:id", {
        templateUrl: "/views/profile.html",
        controller: "profileCtlr"
    })
    .when("/lists/:list", {
        templateUrl: "/views/lists.html",
        controller: "listsCtlr"
    })
    .when("/follow/:type", {
        templateUrl: "/views/follow.html",
        controller: "followCtlr"
    });

});

A sample controller would be:

样本控制器将是:

app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){

$scope.goTo("profile");

}]);

As always any help is much appreciated.

一如往常,任何帮助都非常感谢。

4 个解决方案

#1

I had a problem similar to this tonight. The core issue here is that PhoneGap doesn't have a web server built in. If you're developing locally, you probably are using a web server, so you can do something like: http://localhost/#/profile and the routing will work.

我今晚遇到了类似的问题。这里的核心问题是PhoneGap没有内置的Web服务器。如果您在本地开发,您可能正在使用Web服务器,因此您可以执行以下操作:http:// localhost /#/ profile和路由将起作用。

However, PhoneGap loads your code with a file:// URL, not http://. If you do $location.url("profile") you're replacing the entire URL with just file://profile, which doesn't exist. Same thing if you use a link like this: <a href="/#/profile">My Profile</a>

但是,PhoneGap使用file:// URL加载代码,而不是http://。如果你执行$ location.url(“profile”),你只需用file:// profile替换整个URL,这不存在。如果您使用以下链接,则同样如此:我的个人资料

The solution is to somehow get your links to point to the right place. If you're using $location.url() you can prefix it with your file path: $location.url( window.location + "#/profile" )

解决方案是以某种方式让您的链接指向正确的位置。如果你正在使用$ location.url(),你可以在它前面加上你的文件路径:$ location.url(window.location +“#/ profile”)

If you're just making a link, you should be able to get away with taking off the leading slash to make it a relative URL: <a href="/#/profile">My Profile</a> becomes <a href="#/profile">My Profile</a>

如果您只是建立一个链接,您应该能够取消前导斜杠以使其成为相对URL:我的个人资料变为我的个人资料

#2

Had the exact same issue... I was able to fix this easily by adding the following code to the head of my index.html file.

有完全相同的问题...我能够通过将以下代码添加到我的index.html文件的头部来轻松解决这个问题。

<base href="/android_asset/www/" />

Hope this helps.

希望这可以帮助。

#3

in your controller try...

在你的控制器中试试......

$location.path('/profile');

#4

After much tinkering, here's what worked for me!

经过多次修修补补,这对我有用!

If you can use $location.path() within the controller, it should work as expected, but if you need to use href-style links, you can build the links off the angular "base" page (e.g. main.html):

如果您可以在控制器中使用$ location.path(),它应该按预期工作,但如果您需要使用href样式链接,您可以在角度“基础”页面(例如main.html)之外构建链接:

<a href="main.html#/profile">Link To Profile</a>

链接到个人资料

#1