Как обновить маршруты с помощью angular.js, ui-router и node.js

У меня есть приложение angularjs и nodejs с ui-router, которое хорошо работает с домашней страницы. Проблема в том, что я не могу обновить какое-либо другое состояние или набрать другой URL-адрес штата в браузере и перейти непосредственно к нему.

У меня есть nodejs, которые отвечают на запросы для URL-адресов штата с файлом index.html

app.get('/*', function (req, res) {
 res.sendfile('client/index.html');
});

Приложение получает index.html и запрашивает все скрипты из index.html, но по какой-то причине он добавляет URL-адрес состояния перед запросом. Например, в моем заголовке index.html есть этот скрипт

Если я обновляю браузер из состояния, отличного от дома, тогда сценарий запрашивается следующим образом:

GET /albums/css/normalize.css

edit: Я исправил эту проблему ^^, добавив в ссылку '/', например: href= "/css/normalize.css". Теперь файл индекса загружается, но угловой не отправляет запрос на получение частичного файла, связанного с состоянием. Он загружает только файл index.html.

Это мой файл app.js для углового

angular.module('myApp', [
 'ngTouch',
 'ui.router',
 'ngRoute',
 'ngAnimate',
 'myApp.controllers',
 'myApp.directives',
 'myApp.restServices',
 'ui.bootstrap',
 'ngCookies',
 'ngResource',
 'ngSanitize',
 'snap',
 'angular.css.injector'
]).
config(['$stateProvider', '$httpProvider', '$urlRouterProvider', '$locationProvider','snapRemoteProvider', function ($stateProvider, $httpProvider, $urlRouterProvider, $locationProvider, snapRemoteProvider) {
 snapRemoteProvider.globalOptions.disable = 'right';
 $httpProvider.interceptors.push('authInterceptor');
 $urlRouterProvider.otherwise("home");

 $stateProvider
 .state('home', {url: "/",templateUrl: "partials/home.html",controller: 'homeCtrl'})
 .state('albums', {url: "/albums",templateUrl: "partials/albums/albums.html",controller: 'albumsCtrl'})

.config(['$locationProvider', function ($locationProvider) {
 $locationProvider.html5Mode(true);
 $locationProvider.hashPrefix('!');
}]);

Это мой узел-узел

var express = require('express'),
 url = require('url');
 path = require('path'),
 bodyParser = require('body-parser'),
 directory = require('./routes/directory'),
 app = express();

app.use(function (req, res, next) {
 res.setHeader('Access-Control-Allow-Origin', 'http://curtwphillips.com');
 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
 res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Accept, X-api-key, X-auth-token, Content-Type, Content-Length');
 res.setHeader('Access-Control-Allow-Credentials', true);
 if (req.headers && req.headers.authorization) { delete req.headers.authorization; }
 next();
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '/client')));
app.use(function(req, res, next){
 console.log('%s %s', req.method, req.url);
 next();
});

app.get('/*', function (req, res) {
 res.sendfile('client/index.html');
});


app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {

});
1 ответ

Я понял проблему. Я назвал некоторые из моих состояний с теми же именами, что и папки в папке клиента.

Когда я попытался обновить состояние "альбомов", показано здесь:

.state('albums', {url: "/albums",templateUrl: "partials/albums/albums.html",controller: 'albumsCtrl'})

url "/albums" был сопоставлен с моим каталогом "/client/albums" этим кодом узла

app.use(express.static(path.join(__dirname, '/client')));

Я исправил проблему, переименовав мои папки, чтобы они не соответствовали угловым URL-адресам. Таким образом, общий код отправляет index.html. Надеюсь, это поможет кому-то там.

licensed under cc by-sa 3.0 with attribution.