Anguarl UI-Router с базовыми проблемами с файлами на сервере

Я работаю над "простым" сайтом, чтобы помочь освоить некоторые навыки. Я не использовал стек MEAN более года, и кажется, что я немного заржавел с частью Node/Express в сочетании с Angular Framework. Мне сказали попробовать UI-Router, потому что он поможет с главной целью моего проекта в возможности повторно использовать "шаблон" продукта для примерно 15 URL-адресов, так как моя страница будет заполнена значениями свойств из JSON файл, который содержит информацию о продукте, такую ​​как имя, описание, изображение и т. д.

Я использую только nodemon для обслуживания моего файла server.js, но когда я перехожу на localhost:9000, на вкладке исходного кода в dev-tools не отображается полное дерево файлов. Что я делаю неправильно?

Вот моя установка:

УЗЕЛ / ЭКСПРЕСС server.js

// set up 
var express         = require('express');
var app             = express();
var port            = process.env.PORT || 9000;
var apiRoutes       = require('./app/routes.js');
app.use(express.static(__dirname + '/public/'));
app.use('/node_modules', express.static('/node_modules'));
// routes 
app.use('/', apiRoutes);
// launch 
app.listen(port);

apiRoutes.js

var apiRouter = require('express').Router();
var express = require('express');
apiRouter.get('/', function (req, res, next){
  res.sendFile('index.html', {root: './public/html'})
});
// Exports
module.exports = apiRouter;

УГЛОВОЙ app.js

angular.module(‘myApp’,['ui.router','ngResource']);

app_routes.js

angular.module(‘myApp’)
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/');

$stateProvider
  .state('home', {
    url : '/',
    templateUrl : '/index.html',
    controller  : 'controller_index'
  })
  .state('product', {
    url : '/:id',
    templateUrl : '/template_product.html',
    controller  : 'controller_prods'
  });
  $locationProvider.html5Mode(true)
}]);`

shell.html (содержит мой навигационный и нижний колонтитулы с конкретными представлениями URL внутри)

<html ng-app=“myApp”>
<body ng-controller="controller_shell">
  <Nav goes here>
  </nav>
    <ui-view></ui-view>
</body>
<footer>
</footer>

index.html (загружает содержимое внутри по основному URL www.myapp.com)

<main>
  <div> all the stuff </div>
</main>

template_product.html (динамически загружает содержимое внутри оболочки)

<main>
  <div> all the stuff </div>
</main>

Я не достаточно знаком с Grunt, чтобы сделать процесс сборки, поэтому в настоящее время у меня есть nodemon server.js работает и обслуживает Прямо сейчас, когда я захожу на localhost:9000, он загружает только содержимое index.html, но не загружает все сценарии /css/dependencies из shell.html.

Источник

1 ответ

Давайте посмотрим на файл вашего сервера:

Вы запускаете экземпляр сервера на порту 9000, это первая точка.

После этого вы сообщаете серверу, что для любого маршрута, начинающегося с '/', он должен использовать маршрутизатор apiRoutes.

app.use('/', apiRoutes);
//Think of this line of code like defining a middleware which will intercept all request starting with '/'

Следовательно, когда вы переходите на localhost:9000, вы перенаправляетесь на этот маршрутизатор.

Как мы можем видеть здесь:

apiRouter.get('/', function (req, res, next){
  res.sendFile('index.html', {root: './public/html'})
});

Для запроса '/' он отправит файл index.html. Замечательно!

Теперь давайте посмотрим на файл yout index.html:

<main>
  <div> all the stuff </div>
</main>

Это просто шаблон, а не настоящая HTML-страница, которая вам нужна.

AngularJS в одностраничном приложении MVC, следовательно, то, что вам нужно сделать, это:

  • Наличие одной "настоящей" html-страницы со всеми зависимостями и прочим. Эта страница вызывает ваш пользовательский интерфейс.
  • Наличие небольших шаблонов HTML-файлов, которые отображаются в зависимости от состояния UI-маршрутизатора.

Здесь shell.html кажется вашим "настоящим" html-файлом, который вызывает зависимости и ui-маршрутизатор, который позволит вам перемещаться по вашим состояниям.

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

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

Источник
Другие вопросы по тегам