AngularJS$routerProvider在节点webkit中工作不正常_Angularjs_Node Webkit

AngularJS$routerProvider在节点webkit中工作不正常

angularjs

AngularJS$routerProvider在节点webkit中工作不正常,angularjs,node-webkit,Angularjs,Node Webkit,我正在用NodeWebKit和angular构建一个桌面应用程序。我一直在使用angular的1.0.7版，但我需要更新以利用对框架的改进。不幸的是，新的ngRoute模块似乎不能正常工作，而我以前在路由方面没有问题以angular seed样板文件为例，当应用程序加载时，它会显示view1，但单击view1和view2的链接似乎没有效果。我已经验证了它在浏览器中用作网页时可以正常工作，但在node webkit环境中它失败了我确实发现，如果我注释掉$routeProvider的否则选项，地

我正在用NodeWebKit和angular构建一个桌面应用程序。我一直在使用angular的1.0.7版，但我需要更新以利用对框架的改进。不幸的是，新的

ngRoute

模块似乎不能正常工作，而我以前在路由方面没有问题

以

angular seed

样板文件为例，当应用程序加载时，它会显示view1，但单击view1和view2的链接似乎没有效果。我已经验证了它在浏览器中用作网页时可以正常工作，但在node webkit环境中它失败了

我确实发现，如果我注释掉

$routeProvider

的

否则

选项，地址栏会显示

index.html#/C:/view1

，而不是

app/index.html#/view1

，当然也不会显示view1和view2，单击view1和view2链接仍然没有效果。似乎链接可能被错误地解释了？如果是，应如何格式化？我用了很多组合，但都没有效果

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'});
}]);

'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"/>
</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>

<!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>


我的AngularJS应用程序




角种子应用程序：v

我让它工作了。我使用Angular文档中使用的相同策略使ngRoute示例代码在plunkr中工作。我不能说我完全理解为什么使用stock

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', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

'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"/>
</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>

<!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>


我的AngularJS应用程序
//这是为了使节点webkit与AngularJS路由一起工作
angular.element（document.getElementsByTagName（'head'））.append（angular.element（''）；




角种子应用程序：v

请注意，在此模式下，

index.html

不再是URL的一部分，因此如果重新加载，nw将尝试重新加载不存在的文件（例如

/path/to/app/view1

）。您需要手动将其更新为

/path/to/app/index.html

。如果你能让nw在重新加载时返回主页，那就太好了，但我目前还没有看到实现这一点的选项

最新突发新闻：这是由于一场灾难，这场灾难已经解决。角度种子

尚未更新到最新版本
 您介意共享您的包json文件吗？我按照您的设置进行了操作，发现以下错误NSWorkspace无法打开URL:app://toubaradio/views/playlist/42991671So $locationProvider.html5Mode（true）和AngularJS版本升级修复了它。正确的。我看不出你的index.html有什么不同。如果没有，我建议你把它去掉。有时我们很匆忙，需要快速阅读，所以任何无关的东西都会阻碍我们的阅读。