2016-08-23 1 views
0

Я хочу использовать Angular 2 как front end и Zend framework 2 как основу для проекта. Как я могу подключить вид угловой 2 к каркасу zend 2.Как использовать представления углового2 для работы с бэкэнд в zf2 (маршрутизация вида с использованием #)

+0

Я практикую студенческое приложение. Написал контроллер и модель, которые могут извлекать данные из базы данных и хотят, чтобы эти данные просматривались с помощью углового2. Контроллеры возвращают данные json, как я могу использовать данные в angular2.? – Hema

+0

Опять же, что вы пытались использовать данные Json у своего контроллера. Вы читали учебники AngularJs? Вы что-то пробовали в своем взгляде с угловатой? – Hooli

+0

Да, я читаю учебник по Angular2 Typcript. Я просто следовал примеру героя, писал службы, компоненты, маршруты, модули и все. Angular2 работает отлично, я просто не понимаю, как получить доступ к данным, возвращаемым контроллером. – Hema

ответ

1

Angular2 сильно отличается от AngularJS.

Но вы можете общаться с PHP, если считаете свой zf2 как приложение для угловой2 стороны.

Ваш контроллер рамки zend должен только вернуть JsonData. Поскольку вы уже сделали эту часть, вам просто нужно настроить angular2, чтобы узнать о вашем приложении zf2:

this link может быть объяснено все, чтобы сделать эту работу.

Вы можете адаптировать этот код по ссылке

Он говорит, что вы должны импортировать некоторые переменные (используйте свой собственный конфиг здесь):

Мы собираемся нужно Http Client чтобы иметь возможность отправлять запросы на наш сервер , чтобы использовать его в нашем проекте, мы должны зарегистрировать его как поставщик услуг на нашем main.ts:

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import { AppComponent } from './app.component'; 
bootstrap(AppComponent, [HTTP_PROVIDERS]); 

и это в (app.component.ts):

import {Http, Response} from '@angular/http'; 
import {Injectable, Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<ul> 
     <li *ngFor="let person of data"> 
      {{person.id}} - {{person.first_name}} 
     </li> 
     </ul>` 
}) 
export class AppComponent { 

    private data; 

    constructor(private http:Http){ 
    } 

    ngOnInit(){ 
     this.getData(); 
    } 

    getData(){ 
     this.http.get('http://{your host}/{your project}/') 
       .subscribe(res => this.data = res.json()); 
    } 
} 

автор объясняет все его кода по ссылке выше, но я вставил его здесь perennity этого ответа:

Наиболее того, что в этом коде, вероятно, не нова для вас, поэтому я не буду потрудиться, чтобы объяснить все основные вещи снова. Здесь имеет значение метод getData() , вот откуда мы получаем данные с этого веб-сервиса php , который мы создали в начале.

Теперь давайте посмотрим, как это на самом деле работает, если вы посмотрите на код вы увидите, что я использовал две функции, чтобы иметь возможность получить данные: Get() и подписаться(). Первый получает URL-адрес веб-службы, а вызывает сервер для получения данных, а второй определяет действия , которые должны быть приняты, когда он получает ответ, в этом случае я просто назначаю полученные данные этому .data variable, довольно простой правый?