2015-10-20 1 views
3

У меня есть простое угловое приложение, и оно находится в папке www моего проекта. Он работает нормально в браузере, когда я запускаю его через http: // сервер или виртуальный хост. Но index.js загружает этот файл в качествеКак правильно загрузить мое угловое приложение с электронным файлом: ///?

mainWindow.loadUrl('file://' + __dirname + '/www/index.html'); 

Так что, когда я каламбур electron . это показывает пустое окно. Я попытался открыть мой index.html в браузере Chrome через файл: /// и он также пуст. Ошибка в консоли

XMLHttpRequest не может загрузить файл: ///Users/Sergey/Sites/Electron-test/www/partials/layout.html. Перекрестные запросы происхождения поддерживаются только для схем протокола:. HTTP, данные, хром, хром-расширения, HTTPS, хром-расширение-ресурсов (анонимные функции) @ angular.js: 10722

Это потому, что на маршрутизаторе UI

$stateProvider.state("app", { 
    url: '/', 
    templateUrl: 'partials/layout.html' 
}); 

Есть и другие ошибки, связанные с изображением.

Я думаю, есть 2 решения.

  1. Запуск сервера с узлом и изменить loadUrl('file:///...') к loadUrl('http:///...'), но я понятия не имею, как это сделать.
  2. Сделайте что-нибудь еще. Может быть какой-то заголовок или параметр, чтобы разрешить запросы на кросс-начало, и я не знаю, как это сделать.

Как я могу решить эту проблему?

+0

Ваши две опции связаны друг с другом, поскольку CORS - это конфигурация сервера, которая не может быть настроена на 'file: ///'. Вы должны действительно исследовать, как развернуть сервер, поскольку обычно рекомендуется повторить среду, которую вы планируете размещать на вашей машине разработки. Если вы планируете размещать на узловом сервере, то узел в разработке является хорошим (и простым); если вы планируете использовать что-то еще, например PHP, тогда установите это в своей среде разработки, если это возможно. – Claies

+0

Это приложение AngularJS SPA. Он загружает только статические файлы JS/CSS/HTML. Все запросы на данные выполняются на онлайн-сервер JSON API. Поэтому я думаю, что любой сервер будет работать. –

ответ

5

Через некоторое время я выяснил, как это сделать, и теперь приложение Electron создает приложение, и оно работает отлично. Вот целая index.js, потребляемая электроном в качестве отправной точки.

'use strict'; 
var http = require('http'); 
var path = require('path'); 
var fs = require('fs'); 
var app = require('app'); 
var BrowserWindow = require('browser-window'); 

require('crash-reporter').start(); 

var mainWindow = null; 

app.on('window-all-closed', function() { 
    if(process.platform != 'darwin') { 
     app.quit(); 
    } 
}); 

app.on('ready', function() { 
    mainWindow = new BrowserWindow({ 
     width: 800, 
     height: 600 
    }); 

    var server = http.createServer(requestHandler).listen(9527); 

    mainWindow.loadUrl('http://localhost:9527/index.html'); 
    mainWindow.webContents.on('did-finish-load', function() { 
     mainWindow.setTitle(app.getName()); 
    }); 
    mainWindow.on('closed', function() { 
     mainWindow = null; 
     server.close(); 
    }); 
}); 

function requestHandler(req, res) { 
    var 
     file = req.url == '/' ? '/index.html' : req.url, 
     root = __dirname + '/www', 
     page404 = root + '/404.html'; 

    getFile((root + file), res, page404); 
}; 

function getFile(filePath, res, page404) { 

    fs.exists(filePath, function(exists) { 
     if(exists) { 
      fs.readFile(filePath, function(err, contents) { 
       if(!err) { 
        res.end(contents); 
       } else { 
        console.dir(err); 
       } 
      }); 
     } else { 
      fs.readFile(page404, function(err, contents) { 
       if(!err) { 
        res.writeHead(404, {'Content-Type': 'text/html'}); 
        res.end(contents); 
       } else { 
        console.dir(err); 
       } 
      }); 
     } 
    }); 
}; 

Это отправная точка. Все, что вам нужно сделать, это изменить параметр root, чтобы указать свою корневую папку index.html. Но я уверен, что если вы создадите универсальное приложение, оно будет www.

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