Question

我正在尝试使用angular制作PhoneGap webapp。我有这三个文件。

的index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Device Properties Example</title>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=UTF-8"/>
    <meta name="viewport"
          content="width=device-width,height=device-height,user-scalable=no"/>

    <!-- Cordova Build Application -->
    <script charset="utf-8" src="cordova.js"></script>

    <!-- Main Dependencies -->
    <script src="vendor/jquery/jquery-1.11.1.min.js"></script>

    <!-- Angular Declaration -->
    <script src="vendor/angular/angular.min.js"></script>
    <script src="vendor/angular/angular-route.min.js"></script>

    <!-- Angular App Declaration -->
    <script src="assets/js/index.js"></script>
    <script src="app/app.js"></script>
    <script src="app/controller.js"></script>
    <script src="app/factory.js"></script>
    <script>
        app.initialize();
    </script>

    <!-- UI KIT -->
    <script src="vendor/ui-kit/js/uikit.min.js"></script>
    <link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>

    <!-- User Defined Styles -->
    <link rel="stylesheet" href="assets/css/kore.css"/>

  </head>
  <body class="uk-width-1-1">
      <div>
      <header class="uk-width-1-1" id="eca-main-nav-container">
      <nav class="uk-navbar">
      <div class="uk-navbar-flip">
      <ul class="uk-navbar-nav">

          <li><a href="#eca-main-nav" data-uk-offcanvas>
              <i class="uk-icon uk-icon-bars"></i>
              </a>
          </li>

      </ul>
      </div>
      </nav>
      </header>

      <div ng-view="" id="eca-main-view"></div>

      <footer>
      <!-- Main Navigation Canvas -->
      <aside id="eca-main-nav" class="uk-offcanvas">   
      <section class="uk-offcanvas-bar">
          <ul class="uk-nav uk-nav-offcanvas">
              <li><a href="#">Home</a></li>
          </ul>
      </section>
      </aside>

      </footer>
      </div>
  </body>
</html>

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);
        });
    },
};

app.js

    //constants
    var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
    var appOrigin   = 'http://event.chart.local/api/vendor/events.json';
    var app = angular.module('app',['ngRoute']);

    app.config(function($routeProvider){
        //chart site
        $routeProvider.when('/chart',{
            templateUrl:'view/chart',
            controller:'chartController'
        });

        $routeProvider.when('/event',{
            templateUrl:'view/event',
            controller:'eventViewController'
        });

        //start route
        $routeProvider.otherwise({redirectTo:'/chart'});
    });

controller.js

/* chartController
 * view/chart.html
 */
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){    
    alert('this is running');
    //chartListLoadService.fetchListJSONP('all',$scope);

    //$scope.eventDetail = function(eventId){
    //    alert(eventId);
    //};
}]);

/* eventViewController
 * view/event.html
 */
app.controller('eventViewController',['$scope',function($scope){

}]);

它在浏览器上运行正常。警报在控制器中触发得很好。但是当我在Phonegap上编译它时，AngularJS没有被初始化。

我已经读过你需要在'deviceready'之后执行代码才能工作。我在这里查看了这个问题：

Angular ng-view/routing not working in PhoneGap

并尝试使用它。但它似乎没有做任何事情。我无法理解为什么，或者我可能会遗漏某些事情，以及我的ng-app有一个特定的名称，并附加到app变量，如图所示。

请帮助。

Answer 1

手动引导Angular时不应使用ng-app。请参阅https://docs.angularjs.org/guide/bootstrap。

通过Phonegap在设备上执行AngularJS

1 个答案: