1

node-webkit と angular を使用してデスクトップ アプリケーションを構築しています。angularのバージョン1.0.7を使用していますが、フレームワークの改善を利用するには更新する必要があります。残念ながら、ngRoute以前はルーティングに問題がなかったのに対し、新しいモジュールは正しく機能していないようです。

ボイラープレートを例として使用するangular-seedと、アプリが読み込まれるとビュー 1 が表示されますが、ビュー 1 とビュー 2 のリンクをクリックしても効果がないように見えます。ブラウザーで Web ページとして提供される場合は正常に動作することを確認しましたが、node-webkit 環境では失敗します。

アドレスバーに の代わりに表示されるotherwiseオプションをコメントアウトすると、もちろん、view1 も view2 も表示されず、view1 と view2 のリンクをクリックしても効果がないことがわかりました。リンクが間違って解釈されている可能性がありますか? もしそうなら、それらはどのようにフォーマットされるべきですか？私はたくさんの組み合わせで遊んで効果がありませんでした。$routeProviderindex.html#/C:/view1app/index.html#/view1

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>
4

1 に答える 1

2

私はそれを働かせました。Angular のドキュメントで使用されているのと同じ戦略を使用して、ngRoute のサンプル コードを plunkr で動作させました。angular-seedストック構成を使用して機能しなかった理由を正確に理解しているとは言えません。詳しい方がいましたら、お聞きしたいです。

変更されたファイルは次のようindex.htmlになりapp.jsます。

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
  // configure html5 to get links working on node-webkit
  $locationProvider.html5Mode(true);
}]);

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>  
  <script type="text/javascript">
  //this is here to make node-webkit work with AngularJS routing
  angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
<body>
  <ul class="menu">
    <li><a href="view1">view1</a></li>
    <li><a href="view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

このモードでindex.htmlは、 は URL の一部ではないことに注意してください。したがって、リロードすると、nw は存在しないファイル (例: /path/to/app/view1) をリロードしようとします。に手動で更新する必要があります/path/to/app/index.html。リロード時に nw でメイン ページに戻るようにできればいいのですが、これを実現するオプションは今のところありません。

最新ニュース: これはAngular 1.2.0 のバグによるもので、その後解決されました。はangular-seedまだ最新バージョンに更新されていません。

于 2013-11-23T17:52:20.300 に答える