AngularJS $ routerProvider無法在node-webkit中正常工作

我正在用node-webkit和angular構建一個桌面應用程序。我一直在使用角度版本1.0.7，但我需要更新以利用對框架的改進。不幸的是，新的ngRoute模塊似乎沒有正常工作，而我以前沒有路由問題。

以angular-seed樣板爲例，應用程序加載時顯示view1，但單擊view1和view2的鏈接看起來沒有任何效果。我已經驗證它在瀏覽器中用作網頁時工作正常，但在node-webkit環境中它失敗。

我發現，如果我註釋掉$routeProvider的otherwise選項，地址欄顯示index.html#/C:/view1代替app/index.html#/view1，當然然後既不廠景，也不視圖2所示，並單擊視圖1和視圖2鏈接仍然沒有效果。看起來鏈接可能被錯誤地解釋了？如果是這樣，他們應該如何格式化？我玩過一堆組合，沒有任何效果。

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>

來源

2013-11-21 stahlous

我得到它的工作。我使用了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回到主頁面，那將是非常好的，但是到目前爲止我還沒有看到實現這個目標的選項。

最新消息：這是由於bug in Angular 1.2.0，這已經解決。 angular-seed根本還沒有更新到最新版本。

來源

2013-11-23 17:52:20 stahlous

你介意分享你的包json文件我跟着你的設置和我得到這個錯誤NSWorkspace未能打開URL不安全：app：// toubaradio/views/playlist/42991671 – forthehackofit

所以'$ locationProvider.html5Mode（true）;'和AngularJS版本升級修復了它。對。我在你的index.html中看不到任何差異。如果沒有，我建議你刪除它。有時候我們很急，需要快速讀取，所以任何外來的東西都會阻礙。 – bhantol

AngularJS $ routerProvider無法在node-webkit中正常工作

回答

相關問題