ngRoute无法在Phonegap中使用

时间:2014-07-22 02:57:24

标签: javascript angularjs cordova angularjs-ng-route

有人在Phonegap应用程序中使用Angulars ngRoute解决了路由问题吗? 我还没弄明白......试过不同的灵魂,但没有人工作。 这是最新的。 有什么建议?还有其他更好的导航方法,或者我是否必须包含jQuery并制作一些完全其他的解决方案?

的index.html

<!DOCTYPE html>
<html>
<head ng-app="myApp">
    <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 href="lib/angular-mobile-ui/dist/css/mobile-angular-ui-base.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Test</title>
</head>
<body ng-controller="MainCtrl">

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

    <script type="text/javascript" src="cordova.js"></script>
    <script src="lib/angular-mobile-ui/dist/js/mobile-angular-ui.min.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>

<script src="js/app.js"></script>

    <script src="js/app/controllers/controllers.js"></script>

    <script src="lib/phonegap.js"></script>

</body>
</html>

app.js

var myApp = angular.module("myApp", [ 'ngRoute','controllers', 'mobile-angular-ui', 'PhoneGap']);



myApp.config([$routeProvider,
    function ($routeProvider) {

    $routeProvider

            .when('/', {
                templateUrl: '/index.html',
                controller: 'MainCtrl'


            })
            .when('/partials/intro', {
                templateUrl: '/partials/intro.html',
                controller: 'IntroCtrl',
                template: '<h1> {{ test }} </h1>'

            })

            .when('/partials/about', {
                templateUrl: '/partials/about.html',
                controller: 'AboutCtrl'
            })
.otherwise({
                redirectTo: '/index'
            });

}

]);

controllers.js

'use strict';

var myApp = angular.module('controllers', []);

myApp.controller("MainCtrl", function ($scope, $location, PhoneGap) {

});

//This is the controller that should be loaded in to the MainCtrl

myApp.controller("IntroCtrl", function ($scope, $location, PhoneGap) {
    $scope.isAppLoaded = false;
    // to detect if app is loaded
    PhoneGap.ready().then(function () {
        alert("App is loaded!");
        $scope.isAppLoaded = true;
    });

    $scope.gotoIntro = function () {
        $location.url('/intro');
    };
});

1 个答案:

答案 0 :(得分:0)

我想这可能是罪魁祸首:

...
myApp.config([$routeProvider,
    function ($routeProvider) {
...

将其更改为

...
myApp.config(['$routeProvider', //<-- Enclose this in "quotes"
    function ($routeProvider) {
...

或者,你可以简单地使用

...
myApp.config(function ($routeProvider) { /* Your code goes here */ });
...