Angular ng-view in Cordova funktioniert nicht

Ich bin noob eckig und Cordova. Ich entwickle eine Cordova-Anwendung. Ich habe den folgenden Code:Angular ng-view in Cordova funktioniert nicht

app.js:

var myApp = angular.module('myApp', ['ngSanitize', 'ngAnimate', 'ngRoute']). 
config(function ($routeProvider) { 
    $routeProvider 
     .when('/home', { 
      templateUrl: '/home.html', 
      controller: 'homeController' 
     }) 
     .when('/login', { 
      templateUrl: '/login.html', 
      controller: 'loginController' 
     }) 
     .when('/register', { 
      templateUrl: '/register.html', 
      controller: 'registerController' 
     }) 
     .otherwise({ 
      redirectTo: '/home.html' 
     }) 
}) 
.run(['$rootScope', '$location', 'authProvider', function ($rootScope, $location, authProvider) { 
    $rootScope.$on('$routeChangeStart', function (event) { 
     if (!authProvider.isLoggedIn()) { 
      alert('login'); 
      $location.path('/login') 
     } 
    }); 
}]). 
factory('authProvider', function() { 
    var user; 
    return { 
     setUser: function (aUser) { 
      alert('set user'); 
      user = aUser; 
     }, 
     isLoggedIn: function() { 
      alert('is loged in'); 
      return (user) ? true : false; 
     } 
    }; 
});

Und mein index.js ist wie folgt:

var app = { 
initialize: function() { 
    this.bindEvents(); 
}, 

bindEvents: function() { 
    document.addEventListener('deviceready', this.onDeviceReady, false); 
}, 
onDeviceReady: function() { 
    app.receivedEvent('deviceready'); 

    angular.bootstrap(document, ['myApp']); 
}, 
receivedEvent: function (id) { 
    console.log('Received Event: ' + id); 
} 
}; 
app.initialize();

Und meine index.html ist wie folgt:

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="UTF-8"> 
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
<meta name="format-detection" content="telephone=no"> 
<meta name="msapplication-tap-highlight" content="no"> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 

<!--Shared Scripts--> 
<script type="text/javascript" src="js/shared/jquery.min.js"></script> 

<script type="text/javascript" src="js/shared/angular.js"></script> 
<script type="text/javascript" src="js/shared/angular-route.min.js"></script> 
<script type="text/javascript" src="js/shared/angular-animate.min.js"></script> 
<script type="text/javascript" src="js/shared/angular-sanitize.min.js"></script> 

<!--Custom Scripts--> 
<script type="text/javascript" src="js/index.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<script type="text/javascript" src="js/homeController.js"></script> 
<script type="text/javascript" src="js/loginController.js"></script> 

<title></title> 
</head> 

<body> 
<div ng-view></div> 
<script type="text/javascript" src="cordova.js"></script> 
</body> 

</html>

Wenn ich meine App im Browser (cordova emulate browser) emulieren, ist alles in Ordnung und ng-view funktioniert gut, aber wenn ich laufe es auf Android-Gerät (cordova run android), ng-view funktioniert nicht!

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); 
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

meiner app.js, aber keinen Erfolg:

Ich habe auch versucht, hinzuzufügen! Ich habe auch meine html und body wie unten versucht zu definieren:

<html ng-app='myApp'>

oder

<body ng-app='myApp'>

aber keinen Erfolg!

Ich bin mit AngularJS 1.5.8 und 6.2.0 Cordova und laufe meinen App auf Android 4.0

Aktualisiert

Nachdem ein Android 5.0-Gerät Inspektion, fand ich heraus, dass es ein Fehler ist, dass Sprich:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///login.html Error: [$compile:tpload] Failed to load template: /login.html (HTTP status: -1)

Würden Sie mir bitte helfen, dieses Problem zu lösen?

Vielen Dank

Quelle

2016-08-08 Vahid Farahmandian

Ich glaube nicht die 'ng-app' Richtlinie über die' setzen 'tag wird funktionieren. Haben Sie versucht, es stattdessen zu Ihrem '' oder '' Tag hinzuzufügen? – Lex

@Lex es war ein Schreibfehler und ich habe meine Frage aktualisiert. Ich habe beides versucht, aber immer noch keinen Erfolg! –

Sie können Ihre App mit google chrome debuggen, d. H. "Chrome: // inspect" an der URL eingeben und prüfen, ob alle Ihre js-Dateien geladen sind. – slackmart

Ich finde endlich die Lösung.

bewegt Nur meine Ansichten (login.html und home.html) in einen Ordner (zB views) und fügt Punkt vor meinem UrlTemplate

$routeProvider 
     //define the routes and their corresponded controllers 
     .when('/home', { 
      templateUrl: './views/home.html', 
      controller: 'homeController' 
     }) 
     .when('/login', { 
      templateUrl: './views/login.html', 
      controller: 'loginController' 
     }) 
     .when('/register', { 
      templateUrl: './views/register.html', 
      controller: 'registerController' 
     }) 
     .otherwise({ 
      redirectTo: './views/home.html' 
     })

Quelle

2016-08-09 18:17:53

Angular ng-view in Cordova funktioniert nicht

Antwort

Verwandte Themen