我正在使用node-webkit和angular构建桌面应用程序。我一直在使用角度版本1.0.7,但我需要更新以利用框架的改进。不幸的是,新的ngRoute
模块似乎没有正常工作,而我以前没有路由问题。
以angular-seed
样板文件为例,当应用程序加载时会显示view1,但点击view1和view2的链接似乎没有任何效果。我已经验证它在浏览器中用作网页时工作正常,但在node-webkit环境中它失败了。
我确实发现,如果我为otherwise
$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'});
}]);
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>
答案 0 :(得分: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
。如果你能在重新加载时返回主页面会很好,但到目前为止我还没有看到实现这一目标的选项。
最新消息:这是由于bug in Angular 1.2.0,因此已经解决。 angular-seed
尚未更新到最新版本。