Можно ли создавать многостраничные приложения в angular? - PullRequest
Новая
       1

Можно ли создавать многостраничные приложения в angular?

0 голосов
/ 29 мая 2020

Я думаю о создании клона приложений для заказа еды, таких как Zomato, и я обнаружил, что оно использует Angular как маршрутизацию на определенных страницах, которые находятся во время заказа после выбора ресторана. т.е. страница не обновляется, это можно увидеть с помощью кнопки «Обновить» в браузере, и кажется, что запрос не go на сервер.

Хотя в других разделах, таких как выбор ресторана, запрос выполняется кажется, маршрутизируется сервером.

Итак, мой вопрос: возможно ли создать многостраничное приложение в angular?

, и если да, то как, пожалуйста, предоставьте несколько ссылок демонстрация или что-то в этом роде на Inte rnet, и если нет, то какой должна быть архитектура такого приложения для заказа еды?

Архитектура, о которой я думаю:

Architecture

Но я застрял в проблеме: как сервер сможет отобразить или запросить angular для получения данных, я знаю, как angular может запросить сервер для получения данные с помощью Restful Services, но я не знаю, как сервер сможет передать управление приложению angular, когда пользователь запрашивает конкретный URL-адрес, предназначенный для приложения angular, например URL-адрес во время orderi нг.

Ответы [ 3 ]

0 голосов
/ 29 мая 2020

Если я хорошо понимаю ваш вопрос - Angular - это фреймворк SPA (приложение одной страницы), который взаимодействует с веб-браузером, динамически перезаписывая текущую веб-страницу. Поэтому я думаю, что вы не можете создать несколько страниц в Angular.

Если вы хотите использовать несколько веб-страниц (например, index. html, page1. html), используйте Thymeleaf, который является шаблоном java движок и интегрируется с приложениями Spring-Boot, например: https://www.baeldung.com/spring-boot-crud-thymeleaf

Если вы используете REST API из Spring-Boot и хотите отправить запрос на внутренний сервер, сервер не будет отвечать, пока вы не добавите заголовок «Access-Control-Allow-Origin». Быстрый пример: 

@CrossOrigin(origins = "http://localhost:4200")
@GetMapping("/product")
public ResponseEntity<List<YourEntity>> getAllProducts() {
  //use service or repository for get data from db
  return new ResponseEntity(entities, HttpStatus.OK)
}

В Angular вам нужно подписать данные с помощью метода subscribe (), например: 

    export class HomeComponent implements OnInit {

      values: any;

      constructor(private http: HttpClient) { 
        this.values = [];
      }

    ngOnInit() {
      this.getDataOnStart();
   }

   getDataOnStart() {
      this.http.get('http://localhost:8080/products').subscribe(data => {
           this.values = data;
         });
  }

 }

Где localhost: 8080 - ваш Spring- Адрес загрузки (сервера).

После этого при перезагрузке страницы ngOnInit отправит запрос на сервер.

Пример приложения: https://www.baeldung.com/spring-boot-angular-web

0 голосов
/ 29 мая 2020

Мне кажется - и особенно просматривая комментарии, когда разные люди дают соответствующие ответы, - что вы точно не знаете, что такое SPA (одностраничное приложение). То, что вы пытаетесь сделать, не имеет большого смысла. Хотя я видел некоторые хакерские sh решения, которые приближаются к тому, что вы хотите, это ужасный беспорядок, который невозможно поддерживать.

Если вам нужен SSR (рендеринг на стороне сервера) (страницы обслуживаются сервером), вам следует изучить официальную документацию Angular Universal , но это потребует от вас обслуживания вашего приложения с Node.js. Если вы хотите сохранить свой Java Spring бэкэнд, вам нужно будет рассмотреть возможность взаимодействия сервера с сервером

0 голосов
/ 29 мая 2020

Если сервер хочет получить данные из внешнего интерфейса без каких-либо запросов из внешнего интерфейса. тогда вы можете использовать события, отправленные сервером. Вы можете обратиться к Angular 2 событиям на стороне сервера весенней загрузки . В этой ссылке есть пример, показывающий, как весенняя загрузка может отправлять событие в пользовательский интерфейс и как пользовательский интерфейс может получить это событие. После того, как пользовательский интерфейс получит это событие. Вы можете инициировать http-вызов из пользовательского интерфейса, чтобы серверная часть отправляла данные, требуемые серверной частью.

...