角度ng-view phonegap无效

时间:2013-03-26 00:57:52

标签: android cordova angularjs angular-routing

我正在尝试用android中的angularjs和phonegap制作基本应用程序。但它似乎没有奏效。以下是我的源代码文件:

的index.html

    <!DOCTYPE html>
<html ng-app="main-app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
    <div class="loader-ajax" ng-show="isViewLoading"></div>
    <div ng-view></div>
</div>
    <script src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
            app.initialize();
    </script>
</body>
</html>

main.js

var mobileApp = angular.module("main-app", []);

mobileApp.config(function ($routeProvider,$compileProvider) {

    $routeProvider
        .when("/",
        {
            templateUrl: "partial/home.html",
            controller: "homeController"
        })
        .when("/home",
        {
            templateUrl: "partial/home.html",
            controller: "homeController"
        });
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
    alert('Coming here');
    $scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
    alert('Home Coming here');

});

index.js

var app = {
    initialize: function() {
        this.bind();
    },
    bind: function() {
        document.addEventListener('deviceready', this.deviceready, false);
    },
    deviceready: function() {
        // note that this is an event handler so the scope is that of the event
        // so we need to call app.report(), and not this.report()
        app.report('deviceready');
        angular.bootstrap(document, ['main-app']);
    },
    report: function(id) { 
        console.log("report:" + id);
    }
};

当应用程序加载时,路由器似乎没有工作,因为它没有进入Homecontroller。

从我在其他地方做好准备,这段代码应该可行。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,我刚刚找到了解决方法。看看Angular ng-view/routing not working in PhoneGap

答案 1 :(得分:0)

app.initialize();移至PhoneGap's deviceready event

答案 2 :(得分:0)

我遇到了这个问题 - 我被困在了3个晚上 - 最后我将路由中的模板名称与实际文件名进行了比较 - 确保案例匹配。