如何将 angular2 的视图用于 zf2 中完成的后端工作（使用 # 路由视图）

Question

我想使用 Angular 2 作为项目的前端，Zend framework 2 作为后端。我如何将 angular 2 的视图连接到 zend 框架 2。

Answer 1

Angular2 确实与 AngularJS 完全不同。

但是你可以和PHP交流，只要你把你的zf2当成angular2端的应用程序。

您的 zend 框架控制器刚刚 return JsonData。由于您已经完成了这一部分，您只需配置 angular2 以了解您的 zf2 应用程序：

this link 可以解释使这项工作成功的一切。

Your may adapt this code from the link

它说你必须导入一些变量（在这里使用你自己的配置）:

We’re going to need Http Client to be able to send requests to our server, in order to use it on our project we have to register it as a service provider on our 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());
    }
}

作者在上面的 link 中解释了他的所有代码，但我将其粘贴在这里以确保此答案的永久性：

Most of what’s in this code probably isn’t new for you, so I won’t bother to explain all the basic things again. What matters here is the getData() method, that’s where we’re getting the data from that php web service we created at the beginning.

Now let’s see how it actually works, if you take a look at the code you’ll see that I’ve used two functions to be able to get the data: get() and subscribe(). The first receives the web service url and calls the server to get the data, while the second one specifies the actions that should be taken when it receives the response, in this case I’m just assigning the received data to the this.data variable, pretty simple right?

如何将 angular2 的视图用于 zf2 中完成的后端工作（使用 # 路由视图）

How to use the views of angular2 for the backend work done in zf2 (routing the view using #)

zend-framework2

angular2-routing

angular