为什么我的 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 事件侦听器调用的函数中？

标签： javascript ios angularjs cordova

【解决方案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？