Question

我有这个网络应用程序必须成为使用phonegap的应用程序：问题是我们使用angularjs和路由等视图。似乎没有办法让它们使用phonegap工作，我已经尝试了Angular ng-view/routing not working in PhoneGap但它没有帮助。

这是 index.html

<!DOCTYPE html>
<html lang="en" ng-app="RoutingApp">

<head>
    <title>Big Gym</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/courses.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/sidebar.css">
</head>


<body>

    <div class="mainContainer">
        <div ng-view></div>
    </div>

    <!--Footer-->
    <div my-footer></div>

    <!-- Include the AngularJS library -->
    <script src="js/angular.min.js"></script>

    <!-- Include the AngularJS routing library -->
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>

    <!-- Scroll-->
    <script src="js/angular-smooth-scroll.min.js"></script>

    <!-- UI Bootstrap -->
    <script src="js/ui-bootstrap-tpls-0.13.0.min.js"></script>

    <!-- Directives -->
    <script src="js/directives/footer.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MapController.js"></script>
    <script src="js/controllers/CourseHomeController.js"></script>
    <script src="js/controllers/CourseController.js"></script>
    <script src="js/controllers/InstructorController.js"></script>
    <script src="js/controllers/NavbarController.js"></script>
    <script src="js/controllers/categoriesController.js"></script>

    <!-- Services -->
    <script src="js/services/courses.js"></script>
    <script src="js/services/categories.js"></script>

    <!-- Maps -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</body>

</html>

app.js

app=angular.module('RoutingApp', ['ngRoute','ui.bootstrap','smoothScroll']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/www/views/Home.html'
        })
        .when('/CourseHome/', {
            controller: 'CourseHomeController',
            templateUrl: '/www/views/CourseHome.html'
        })
        .when('/course/:id', {
            controller: 'CoursesJoinInstructor',
            templateUrl: '/www/views/Course.html'
        })
        .when('/courseByLevel/', {
            controller: 'CourseLevelController',
            templateUrl: '/www/views/CourseLevel.html'
        })
        .when('/coursesByCategory/', {
            controller: 'CourseByCourseCategoryController',
            templateUrl: '/www/views/CourseLevel.html'
        })
        .when('/instructor/:id', {
            controller: 'InstructorController',
            templateUrl: '/www/views/Instructor.html'
        })
        .when('/Location', {
            templateUrl: '/www/views/Location.html'
        })
        .when('/Categories/', {
            controller: 'CategoriesController',
            templateUrl: '/www/views/Categories.html'
        })
        .when('/form/:id', {
            controller: 'CourseController',
            templateUrl: '/www/views/Form.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

index.js

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, true);
    },

    onDeviceReady: function() {
        angular.element(document).ready(function() {
            angular.bootstrap(document);
        });
    },
};

使用此代码，我的Android手机上显示白屏，没有index.js并将ng-app放入正文中我可以看到带有css的页脚，因此指令正在运行但不是视图。希望有人可以提供帮助。

Angularjs在phonegap上的路由无法正常工作

0 个答案: