Question

我使用现有的mvc应用程序，我想将angular（2）应用程序添加到单个页面。

角度应用程序基于最新版本的angular quickstart git版本。（https://github.com/angular/quickstart）

页面的网址类似于www.mySite.com/folder/subfolder 应用内容位于其他位置www.mySite.com/Content/myApp

我在mvc cshtml文件中添加了所有需要的脚本（从index.html复制）文件。

但后来我遇到了404错误。

当然，我更改了基本href以及我在网络上找到的所有其他更改，但应用程序无效。

一些错误：找不到app.module或找不到node_modules文件夹等中的文件'

如何将quickstart角度应用程序连接到现有的mvc项目？

这里我添加了3个屏幕截图：

单独运行应用程序（使用npm start）按预期工作，结果正常
在mvc项目中，基础href到src文件夹
在mvc项目和基础href到主角项目文件夹

感谢

Answer 1

我在这种情况下的答案就是说，这不是怎么做的。您需要决定是否要使用Razor ViewEngine或使用Angular 2应用程序进行渲染。如果你想要Angular 2应用程序渲染某些东西，你需要创建一个WebApi控制器并从角度应用程序向该控制器发送请求并获取json数据以响应在屏幕上显示它。例如。这是控制器

[HttpGet]  
    public IEnumerable<string> Get()  
    {  
        return new string[] {  "Laptop", "Smart TV", "Smart Phone", "Tablet"  };  
    }

这将是你的角度服务，它将调用api

import { Injectable } from '@angular/core';  
import { Http, Response } from '@angular/http';  
import { Observable } from 'rxjs/Rx';  

import 'rxjs/add/operator/map';  
@Injectable()  
export class AppService{  
    constructor(private http: Http)  
    {  

    }  
    getItems(){  
        let apiUrl = 'api/Items';  
        return this.http.get(apiUrl)  
                   .map((res: Response) => {return res.json()  
        });  
    }  
}

您需要在app.module.ts文件中的提供程序中添加服务。然后它可以注入任何组件。因此，我们在app组件中使用此服务来获取和显示数据。 app.component.ts将如下所示：

import { Component } from '@angular/core';  
import { AppService } from './app.service'  

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  items: string[];   
  constructor(private appService: AppService)  
  {  
    this.items = [];  
    this.populateItems();  
    }  

    populateItems()  
    {  
      this.appService.getItems().subscribe(res =>{  
        this.items = res;  
      })  
    }  
}

html页面现在将显示角度应用从api获得的列表。

<li *ngFor="let item of items">  
  {{item}}  
</li>

希望这会以正确的方式帮助你。

mvc app子文件夹中的angular quickstart不起作用

1 个答案: