использование angular-ui-router с экспресс / узлом, файловая структура

0

Я следую этому руководству, и у меня такая структура приложения. Я пытался показать только соответствующие биты, поскольку это довольно много кода.

/app
    /views
        index.ejs
/config
    express.js
/public
    /external_libs
        angular.js
        angular-ui-router.js
    /js
        app.js
        controllers.js
    /partials
        home.html
server.js

Внутри моего express.js (соответствующий бит)

app.use(express.static('./public');

Я могу настроить свои угловые контроллеры, поэтому я знаю, что этот каталог попал. Например, мой index.ejs

<html ng-app="myapp">
    <head>
        <script src="external_libs/angular.js"></script>
        <script src="external_libs/angular-ui-router.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"</script>
    </head>
    <body ng-controller= "MainCtrl"> <!-- an alert in my controller fires, so I know the public directory is accessible, at least the js folder-->
        <div ui-view></div>
    </body>
</html>

В моем app.js

var app = angular.module('myapp', ['ui.router']);
app.config([
    function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'partials/home.html'
            });
    }
]);

В контроллерах.js

var app = angular.module('myapp', []);
app.controller('MainCtrl', [
    '$scope', function($scope) {
        alert("This alert is indeed alerted");
    }
]);

home.html

<h1> This is a test to see if the view on index.ejs is being populated </h1>

Я пробовал много разных комбинаций для "templateUrl" внутри app.js, включая

"partials/home.html"
"/partials/home.html"
"../partials/home.html"

Ни один из них не приводит к тому, что home.html помещается внутри элемента div ui-view на моей странице index.ejs. Я понимаю, что я опубликовал несколько ограниченное количество кода, но тот факт, что я могу ударить по моим контроллерам и увидеть сообщение с предупреждением, заставляет меня поверить, что я почти там. Я использую маршрутизацию на стороне сервера для рендеринга исходного index.ejs, но кроме этого я хочу обрабатывать все стороны клиента. Кто-нибудь знает, как сделать угло-ui-router найти мои частичные с этой настройкой?

  • 0
    А если вы замените свой templateUrl template:'<div>test</div>' ? Кроме того, просмотр запросов (сетевая вкладка dev tools) может дать подсказку, какие файлы он пытается получить.
  • 0
    замена на шаблон <div> test </ div> не дает мне частичного: /
Показать ещё 6 комментариев
Теги:
express
angular-ui-router
partial-views

1 ответ

1

Проблема заключается в объявлении вашего контроллера. Вместо ссылки на модуль вы воссоздаете его (и переопределите существующий модуль), включив квадратные скобки.

Если вы перепишете свой контроллер, как показано ниже, он должен работать:

var app = angular.module('myapp');
app.controller('MainCtrl', [
  '$scope',
  function($scope) {
    alert("This alert is indeed alerted");
  }
]);

Для получения дополнительной информации ознакомьтесь с "Создание против поиска" на странице https://docs.angularjs.org/guide/module

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню