2017-06-08 20 views
1

角度4とMVC 5を使用してハイブリッドアプリケーションを作成しようとしています。角度4の構造をangular-cliを使用して生成しました。私はどちらかのインターネット上で見ていドキュメンテーションの大半は、asp.netcoreとMVC 5の統合を統合したり、 角度cliとASP.Net MVC5を使用した角度4の統合

  • する

    1. マニュアルの方法を示しています。

    システムインテグレーションでは、systemjsが使用されていますが、最新の角度cliではwebpackで置き換えられます。誰かが私に角度をつけているように私に指示を与える例を共有することができますか?

  • 答えて

    1

    あなただけのルートの世話をすると、デフォルトのビューとして角度CHTMLファイルを使用するためにHomeControllerでいくつか変更する必要があります:角度-CLIプロジェクトにdistのフォルダ(生産)を生成するための「ng build」を使用)

    2)新しいchtml fileView -> Homeフォルダ名を作成します)プロジェクトにあなたの角度distフォルダをコピーし、 を好きなように名前を変更、それngApp.chtml

    4)それはこのように見えるしなければならないngApp.chtmlにすでにプロジェクトにコピーされたdistフォルダ内のindex.htmlファイルの内容をコピーします。

    @{ 
    Layout = null; 
    } 
    
    <!doctype html> 
    <html lang="en"> 
    
    <head> 
    <meta charset="utf-8"> 
    <title>IchartApp</title> 
    <base href="/"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    </head> 
    
    <body> 
    <app-root>Loading...</app-root> 
    <script type="text/javascript" src="~/ngApp/inline.bundle.js"></script> 
    <script type="text/javascript" src="~/ngApp/polyfills.bundle.js"></script> 
    <script type="text/javascript" src="~/ngApp/scripts.bundle.js"></script> 
    <script type="text/javascript" src="~/ngApp/styles.bundle.js"></script> 
    <script type="text/javascript" src="~/ngApp/vendor.bundle.js"></script> 
    <script type="text/javascript" src="~/ngApp/main.bundle.js"></script> 
    </body> 
    
    </html> 
    

    5)必要にApp_Startフォルダ内RoutingConfig.csにAttribute Routes有効:

    public class RouteConfig 
        { 
        public static void RegisterRoutes(RouteCollection routes) 
        { 
         routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
    
         //Add this to Enable Angular Routing 
         routes.MapMvcAttributeRoutes(); 
    
         routes.MapRoute(
          name: "Default", 
          url: "{controller}/{action}/{id}", 
          defaults: new { action = "Index", id = UrlParameter.Optional } 
         ); 
        } 
    } 
    

    6)オープンHomeController.csをデフォルトルート更新する:

    public class HomeController : Controller 
    { 
        [Route("")] //Specify default route 
        public ActionResult Index() 
        { 
         return View("NgApp"); //Use NgApp.chtml View instead of index.chtml of HomeContoller 
        } 
    //Specify other Angular Routes 
        [Route("company")] 
        [Route("login")] 
        [Route("overview")] 
        public ActionResult AppBookmarkableRoutes() 
        { 
         return View("NgApp"); 
        } 
    } 
    

    7)F5キーを押してAsp.net MVCと統合されたアングルアプリを表示する