Загрузка файла html через UI-маршрутизатор углового с помощью templateUrl

Я использую Угловой UI-Router для объявления состояний. Мои состояния настроены правильно, и угловой работает на моей странице, но файл html шаблона загружается неправильно. Когда яЗагрузка файла html через UI-маршрутизатор углового с помощью templateUrl

template: 'template: 'js/timer/timer.template.html'

в мой контроллер, текст (выше путь) оказывается, как и ожидалось, но когда я включаю его

templateUrl: 'js/timer/timer.template.html',

файл timer.template.html не обрабатывается. Что происходит, хотя мой файл index.html кажется загруженным дважды. После того, как ожидается, и второй раз, когда он копируется и вводится в <ui-view> </ui-view> здесь мой index.html файл:

<!DOCTYPE html> 
<html> 
    <head> 
     <base href="/"> 
     <link rel="stylesheet" href="index.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
     <script src="https://unpkg.com/[email protected]/release/angular-ui-router.min.js"> </script> 
     <script src="main.js"> </script> 
    </head> 

    <body ng-app='PomodoroTimer'> 
     <ui-view> </ui-view> 
     <p>1+2={{1+2}}</p> 
    </body> 
</html>

Когда я иду на локальный: 1337/таймер (состояние, что я настроил) этот файл index.html, кажется, получает дважды, как и ожидалось, а затем снова в ui-view, 1 + 2 = 3 отображается дважды.

Это мой файл timer.state.js. Я пробовал использовать разные пути, но ничто не указывает на правильный html-файл.

app.config(function($stateProvider) { 
    $stateProvider.state('timer', { 
     url: '/timer', 
     templateUrl: 'js/timer/timer.template.html', 
     controller: 'TimerCtrl' 
    }); 
});

Есть ли что-то я пропускаю о UI-маршрутизатор или templateUrl или что-то я не установили правильно? Я использую express для обработки маршрутизации, но просто отправляю все запросы в/* в файл index.html, чтобы UI-Router мог взять верх. Должен ли я обрабатывать шаблонные html-файлы статически через экспресс, как и для файлов css?

Вот timer.template.html где timerMessage определяется на $scope контроллера

<p>This is the timer state and message is: {{timerMessage}}</p>

Вот ссылка GitHub: github.com/sbernheim4/pomodoro-timer

источник

2016-12-21 sam4444

Получите ваш шаблон, когда вы нажмете 'localhost: 1337/js/timer/timer.template.html'? – rob

Нет, я не загружаю файл index.html и '1 + 2 = 3' отображается – sam4444

справа. так что это ваша проблема. Вам нужно изменить свой сервер или процесс сборки, чтобы URL-адрес, который вы указываете для шаблона, фактически загружает шаблон – rob

Да ваш последний абзац раздал, что происходит. Узел не может соответствовать пути js/timer/timer.template.html для любого маршрута, поэтому все catch выполняется (возвращает индекс вместо фактического файла).

Вот пример того, как настроить экспресс для html5mode:

//Look for statics first - this is important! 
var oneHour = 3600 * 1000; 
app.use(express.static(path.join(__dirname, 'public'), {maxAge: oneHour})); 
//Return the index for any other GET request 
app.get('/*', function (req, res) { 
    res.sendFile('index.html', {root: path.join(__dirname, 'public')}); 
});

Так что да, в основном вы должны служить шаблоны, как вы делаете с JS и CSS файлов.

источник

2016-12-21 22:16:30

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

В приведенном выше примере рекурсивно работает, поэтому любой каталог и файлы, вложенные в '/ public', будут статически экспортироваться. –

О, круто. спасибо – sam4444

Загрузка файла html через UI-маршрутизатор углового с помощью templateUrl

ответ

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