为啥我的 AngularJS 视图无法在 Cordova 中加载？
Posted
技术标签:
【中文标题】为啥我的 AngularJS 视图无法在 Cordova 中加载？【英文标题】：Why won't my AngularJS view load in Cordova?为什么我的 AngularJS 视图无法在 Cordova 中加载？ 【发布时间】：2014-05-21 14:36:15 【问题描述】：我的index.html 是：
<!DOCTYPE html>
<html>
<head>
<meta 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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body ng-app="app">
THIS WORKS NOW!
<div ng-view></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
在app.js，我有：
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
$routeProvider.when('/',
templateUrl: 'templates/home.html'
).when('/dashboard',
templateUrl: '/templates/dashboard.html'
).otherwise(
redirectTo: '/'
);
$locationProvider.html5Mode(true);
]);
所以我运行cordova build ios，创建一个 xcode 项目确实很神奇，然后我打开并运行它。我看到了THIS WORKS NOW!，但我没有看到我的home.html 文件的内容。
我做错了什么？
【问题讨论】：
来自app.js 的代码是否包含在由deviceready 事件侦听器调用的函数中？
【参考方案1】：
你需要引导角度：
app.js 很好！
但删除标签<body> 内的ng-app 并在触发事件onDeviceReady 时启动角度：
index.js文件：
var app =
initialize: function ()
this.bindEvents();
,
bindEvents: function ()
document.addEventListener("deviceready", this.onDeviceReady, false);
,
onDeviceReady: function ()
angular.element(document).ready(function ()
angular.bootstrap(document, ["app"]);
);
;
通常你只需要这样做。
【讨论】：
好答案。但是为什么需要延迟呢？我认为没有它 JS 会正常加载，只有在利用硬件插件时才需要 onDeviceReady？以上是关于为啥我的 AngularJS 视图无法在 Cordova 中加载？的主要内容，如果未能解决你的问题，请参考以下文章
Angularjs：为啥页面刷新会破坏 $rootScope 的值？
如何在 angularjs 应用程序的部分视图中包含 css 或 javascript 文件...？ [关闭]
为啥我无法在 AppDelegate 中以编程方式更改我的初始视图控制器？