Angular-ui-router не загружает представления

Я работал с Angular раньше, но прошло некоторое время, поэтому я немного заржавел. Я не могу, кажется, получить угловой ui-маршрутизатор, чтобы загрузить шаблоны html для любого из моих состояний. Это очень простое приложение, оно не требует никаких ajax-вызовов, только html-шаблоны через ui-router. Состояние, которого я сейчас пытаюсь достичь, это состояние / projects, но когда я ввожу /#/projects, я вижу только пустую страницу. Так же путь после /# становится #!#%2Fprojects; я не уверен, что это нормально. Никаких ошибок не появляется в консоли, и все журналы, которые я поставил в состояние и контроллер, похоже, выходят из системы, указывая, что они правильно загружаются. Поэтому я считаю, что Angular просто не находит templateUrl, но я не знаю, почему нет.Я использую Angular 1.6. Вот все соответствующие файлы:
сервер.js

'use strict';
/* eslint-disable global-require */

var express=require('express');
var app=express();

app.use("/", express.static(__dirname));

var port=app.listen(process.env.PORT || 8080);
app.listen(port, function(){
    console.log("Server working!");
})

app.get('*', function(request, response){
    console.log(request);
    response.sendFile(__dirname+'/browser/index.html');
})

мой индекс.HTML-файл:

<html>
<head>
<title> My Portfolio</title>
<script src="/node_modules/angular/angular.js" defer></script>
<script src="/node_modules/angular-ui-router/release/angular-ui-router.js"   defer></script>
<script src="browser/js/app.js" defer></script>
<script src="browser/js/projects/projects_controller.js" defer></script>
<script src="browser/js/projects/projects_state.js" defer></script>
</head>
<body ng-app="app">
<div id="main">
<ui-view></ui-view>
</div>
</body>
</html>

мое приложение.js

'use strict';

var app = angular.module('app', ['ui.router']);

app.run(function($rootScope) {
  $rootScope.$on("$stateChangeError", console.log.bind(console));
});

состояние моего проекта:

‘use strict’;

console.log("project state");
app.config(function($stateProvider){
    $stateProvider.state('projects', {
        url:'/projects',
        templateUrl: '/js/projects/projects.html',
        controller: 'projects_ctrl'
    })
})
console.log("state out!")

контроллер проектов:

'use strict';

console.log("controller");
app.controller('projects_ctrl', function($scope){
    console.log("hi!")
})

И проекты.html страница (которая никогда не достигается…)

<div>
<h1>Hi, this is the projects page!</h1>
</div>

Пожалуйста, помогите!

3 ответа

  1. Существует три основных способа активации состояния:
    1) звоните $state.go().
    2) Нажмите на ссылку, содержащую ui-sref, как <a ui-sref="stateName">State</a>
    3) переход к определенному URL, связанному с состоянием
    Так как в вашем коде не было возможности активировать состояние, ваш код не смог добраться до проекта till.формат html
    Пожалуйста, проверьте ниже ссылку:

     https://plnkr.co/edit/AVhuZJsO8ujySLZQG4TL?p=preview
    
  2. Я решил проблему. Проблема заключалась в том, что я неправильно указал путь в templateUrl. Правильный путь был browser/js/projects / projects.html, не js / проекты / проекты.формат html. Странно, потому что я мог бы поклясться, что я пробовал это раньше, но я думаю, что на этот раз это просто волшебно сработало. Я думаю, что урок, который я выучил, угловой, перемещается от статического пути, предоставленного на сервере, а не от индекса.html, где он загружен, как я ранее думал.