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

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

/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>

В моем приложении.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, но помимо этого я хочу обрабатывать вещи на стороне клиента. Кто-нибудь знает, как заставить angular-ui-router найти мою часть с этой настройкой?


node.js express angularjs partial-views angular-ui-router
person Zack    schedule 25.08.2015    source источник
comment
А если вы замените ваш templateUrl на template:'<div>test</div>'? Также просмотр запросов (сетевая вкладка инструментов разработчика) может дать подсказку о том, какие файлы он пытается получить.   -  person ippi    schedule 25.08.2015
comment
замена на шаблон '‹div›test‹/div›' не дает мне частичного:/   -  person Zack    schedule 25.08.2015
comment
вы действительно пытаетесь загрузить yourdomain.com/#/home?   -  person Matt Way    schedule 25.08.2015
comment
только что попробовал, не повезло.   -  person Zack    schedule 25.08.2015
comment
можете ли вы поделиться своим кодом (скажем, на скрипке)?   -  person Matt Way    schedule 25.08.2015
comment
вечером постараюсь сделать, когда дома буду   -  person Zack    schedule 25.08.2015
comment
github.com/ZackBotkin/voodoodev/tree/reintegrate вот моя учетная запись github. Я не знаю, как сделать скрипку, но не могли бы вы взглянуть, когда у вас будет возможность? Я полностью застрял на этом, не знаю, что делать.   -  person Zack    schedule 26.08.2015
comment
там есть какая-то старая хрень, но ключевые элементы это /app, /config, /public и server.js   -  person Zack    schedule 26.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person T Dog    schedule 22.10.2015