Question

希望我在正确的道路上咆哮，但我有一个关于Angular2 / Node / Webpack的问题，并且您创建的其中一个页面访问服务器端的文件以绘制内容。

我是Angular2的新手，我正在慢慢地学习更多关于它的知识，我正努力帮助我学习这个项目的其中一个项目就是转换一个“自助服务”页面有产品许可证数量。

该页面最初基于LAMP堆栈，我使用PHP加载我的内容文件，以便我可以使用jquery呈现一些图表，显示正在使用的许可证数量。该内容文件基于json，并且每小时更新一次。

我已开始使用以下主题转换自助服务页面：

https://github.com/akveo/ng2-admin

到目前为止它一直很好，但当然我的挑战是'如何读取带有angular2的服务器端文件'。我开始查看'require（fs）'主题，但我无法让它工作，所以我不确定该库是否实际执行服务器端或客户端。

任何和所有帮助将不胜感激。基本上我想要完成的是：

用户点击链接 - 页面读取服务器端json文件 - 将内容保存到变量 - 用于创建jquery / angular / etc图表的变量。 - 刷新页面重新读取文件。

Answer 1

您无法使用fs library导致客户端角度运行！除了你的PHP脚本在服务器端执行，然后呈现的HTML被发送到客户端..

您可以通过Http获取该文件，请参阅我的plunker来演示它：https://plnkr.co/edit/wgQOPH3DjrF67n51iHKx?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {HttpModule, Http} from '@angular/http';
import 'rxjs/Rx';


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      {{data | json}}
    </div>
  `,
})
export class App {

  private data: any;

  constructor(private _http: Http) {
    this.name = 'Angular2'
  }

  ngOnInit() {
    this._http.get('server-side-file/data.json')
      .map(resp => resp.json())
      .subscribe(
        resp => {
          console.dir(resp);
          this.data = resp.data;
        },
        err => console.log(err)
    );
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Angular2，每次访问页面时加载服务器端json文件

1 个答案: