2013-11-21 3 views
1

Я создаю настольное приложение с узлом-webkit и угловым. Я использую версию 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> 

ответ

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 вернуться на главную страницу при перезагрузке, но до сих пор я не вижу возможности сделать это.

Последние новости: Это произошло из-за bug in Angular 1.2.0, который с тех пор был разрешен. angular-seed просто не обновлен до последней версии.

+0

Не могли бы вы поделиться своим пакетом json-файла? Я следил за вашей настройкой, и я получаю эту ошибку. NSWorkspace не удалось открыть URL-адрес небезопасно: app: // toubaradio/views/playlist/42991671 – forthehackofit

+0

Так '$ locationProvider.html5Mode (true);' и исправлено обновление версии AngularJS. Правильно. Я не вижу различий в вашем index.html. Если нет, я предлагаю удалить это. Когда-то мы спешим и должны быстро читать, поэтому любые посторонние вещи просто мешают. – bhantol

Смежные вопросы