AngularJS, Node.js, проблема интеграции приложений ExpressJS

Я создал службу RESTful, используя Node.js и ExpressJS. Теперь я хотел бы реализовать View part. Для этого я выбрал AngularJS.

Проблема в том, что я не уверен, как организовать структуру папок и как интегрировать AngularJS с Node.js и ExpressJS.

Я смотрел это видео, но для этого не было никакого исходного кода образца.

Пусть Get CRUDdy: AngularJS и Node.js Пример Ferrari

Структура папки проекта

Файл ExpressJS

var express = require('express'),
http = require('http'),
path = require('path'),
photos = require('./routes/photos');

var app = express();

app.configure(function () {
    app.use(express.logger('dev'));     /* 'default', 'short', 'tiny', 'dev' */
    app.use(express.bodyParser());
    app.use(app.router);
});

app.get('/photos', photos.findAll);
app.get('/view1', photos.index);

AngularJS:

 // Declare app level module which depends on filters, and services
 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

Когда я нажимаю url http://www.domain/view1, он должен отображать index.html. Но я получаю код 404.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Ответ 1

Если вы используете AngularJS для реализации одностраничного опыта, вы должны каждый раз обслуживать один и тот же код переднего плана, а затем AngularJS берет на себя обработку URL-адресов и отображение содержимого.

Помните, что вы управляете двумя системами маршрутизации. Один для front-end и один для бэкэнда. Экспресс-маршруты сопоставляются с вашими данными, обычно возвращаемыми в формате JSON. (Вы также можете напрямую отобразить html, см. Вариант №1.) Angular маршрутизирует карту к вашим шаблонам и контроллерам.

Вариант №1:

Установите статическую папку для обслуживания внешнего кода (HTML/CSS/JS/AngularJS).

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

Посмотрите на них для примера кода:

Структура каталогов:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html

app/
node_modules/
routes/
web-server.js

Вариант № 2:

Служите интерфейсный код и внутренний код на отдельных серверах.

Это не значит, что у вас должно быть две машины.

Ниже приведена работоспособная настройка на локальной машине с Apache:

Структура каталогов:

public/
  index.html
  js/
    angular.js
  css/
  partials/
     partial1.html
     partial2.html
node/
  app/
  node_modules/
  routes/
  web-server.js

Настройка файла хостов

    127.0.0.1       domain.dev

Настройте http://domain.dev/, чтобы указать на public/

<VirtualHost *:80>
  DocumentRoot "/path/to/public"
  ServerName domain.dev
  ServerAlias www.domain.dev
</VirtualHost>

Настройте http://api.domain.dev/, чтобы указать на веб-сервер node

<VirtualHost *:80>
  ServerName api.domain.dev
  ProxyPreserveHost on
  ProxyPass / http://localhost:3000/
</VirtualHost>

(Адаптировано из: http://www.chrisshiplet.com/2013/how-to-use-node-js-with-apache-on-port-80/)

Запустите (или перезапустите) Apache и запустите сервер node:

node web-server.js

Angular Маршруты:

 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 
   'myApp.controllers'])
   .config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
     $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
     $routeProvider.otherwise({redirectTo: '/view1'});
 }]);

index.html

   <!DOCTYPE html> 
   <html>
     <head><title>Angular/Node exmaple</title></head>
     <body>
       <div id="main" ng-view></div>
     </body>
   </html>

Экспресс-маршруты:

app.get('/', photos.index);
app.get('/photos', photos.findAll);

Доступ к этим маршрутам в контроллере Angular через службу $http или $resource:

$http.get('http://api.domain.dev/photos').success(successCallback);

Дополнительные ресурсы:

Ответ 2

У меня был существующий проект angular с такой файловой структурой (примерно):

/
  app/
    img/
    scripts/
    styles/
    templates/
    index.html
  test/

Я только что создал новое экспресс-приложение и скопировал содержимое каталога моего приложения в каталог /public в экспресс, после удаления всего существующего контента из /public

Затем в файле app.js в express я внес следующие изменения в конфигурацию по умолчанию:

var express = require('express');
var routes = require('./routes');
// ** required my route module
var menu = require('./routes/menu'); 
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
// ** I moved this above the app.router line below, so that static routes take precedence
app.use(express.static(path.join(__dirname, 'public'))); 
app.use(app.router);


// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// ** removed the default index route
// app.get('/', routes.index); 
// ** defined my route
app.get('/api/menu', menu.list); 

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Затем я, очевидно, написал файл маршрута в экспресс и изменил URL-адрес в службе angular, чтобы использовать новый api.

Также была задействована большая работа, решающая, где разместить спецификации, а также слияние бесед и зависимостей node и т.д., но это, вероятно, слишком специфично для моей ситуации, чтобы включить этот ответ, но с удовольствием сообщаю, сможет ли кто-нибудь найти его полезным.