很古椎的業務跳惹 實在寫不太下去 哀
See the Pen
YalaryByeBye by 喇賽人 (@weber87na)
on CodePen.
今天被問到說要怎麼升 angularjs 到 angular … 老實說沒啥心情想管 , wtf 硬著頭皮寫這篇
目前只研究到讓他活在 cshtml 裡面 , 不過這種方式感覺不是很優 , 整個超亂 XD
可以參考這篇
先開個 asp.net core mvc 專案 , 接著在專案底下開個 angular 專案
找到 angular.json
調整設定 outputPath
為 ../Scripts/ClientApp
1 2 3 4 5
| "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "../Scripts/ClientApp",
|
設定完後編譯他就會在專案底下的 Script\ClientApp
產生出 angular 網站的東西
安裝 WebOptimizer
並在 Program
底下設定這樣
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| builder.Services.AddWebOptimizer(pipeline => { pipeline.AddJavaScriptBundle("/js/clientapp", "Scripts/ClientApp/runtime.*", "Scripts/ClientApp/polyfills.*", "Scripts/ClientApp/main.*" ) .UseContentRoot();
pipeline.AddCssBundle("/css/clientapp", "Scripts/ClientApp/styles.*") .UseContentRoot();
});
|
記得要設定 UseWebOptimizer
在 UseStaticFiles
才會生效
1 2
| app.UseWebOptimizer(); app.UseStaticFiles();
|
設定 MapFallbackToController
路徑 , 這樣 angular 的 route 才能動
1 2 3 4 5 6
| app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}" );
app.MapFallbackToController("Index", "Home");
|
最後設定 _Layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - WebApplication1</title> <base href="/" /> @* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" /> *@ <link rel="stylesheet" href="~/css/clientapp" /> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container-fluid"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div>
@* <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> *@ <script src="~/js/clientapp"></script> @await RenderSectionAsync("Scripts", required: false) </body> </html>
|
在 angular 專案上則是讓 app.component.html
只留下 <router-outlet></router-outlet>
即可
app-routing.module.ts
則需要設定 routing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HelloWorldComponent } from './HelloWorld/HelloWorld.component';
const routes: Routes = [ { path: 'HelloWorld', component: HelloWorldComponent, }, ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {}
|
然後新開的頁面也是需要一個 Index.cshtml
當作入口
1 2 3 4 5
| public class HelloWorldController : Controller { public IActionResult Index(){ return View(); } }
|
接著 cshtml
大概會長下面這樣
1 2 3 4 5 6 7 8 9 10
| @{ ViewBag.Title = "HelloWorld"; Layout = "_LayoutAngular"; }
@Html.Partial("_PartialBreadCrumb")
<app-root></app-root> <app-hello-world></app-hello-world>
|