How to bootstrap two angular apps in one asp.net mvc application
来源:互联网 发布:万维网域名续费 编辑:程序博客网 时间:2024/05/17 02:15
Problem:
Angular is currently the most popular javascript framework for building SPA. In its 1.x version, you can easily embed the "ng-app" to different web pages and bootstrap several SPAs in one web application. But Angular 2 has total different architecture from 1.x, how we are going to solve this problems.
Scenario:
Suppose we have build a asp.net mvc web application with two action pages:
http://localhost/, http://localhost/admin
this first one is used as open accessbile public page and second one is for site admin.
We need to implement SPA for each page, we need bootstrap them according to which page is rendered from Server.
Solution:
1. Pass the url router path of asp.net mvc as an attribute to the top of the Angular selector,
For Admin page:
<div id="admin">
<app-admin defaultpath="@Url.RouteUrl("admin")">loading...</app-admin>
</div>
For default page:
<div id="default">
<app>loading...</app>
</div>
2. In component class use ViewContainerRef to get the defaultPath value and navigate to the it
@Component({
selector: 'app-admin',
template: require('./appadmin.component.html'),
styles: [require('./appadmin.component.css')],
encapsulation: ViewEncapsulation.None
})
export class AppAdminComponent implements OnInit {
ngOnInit(): void {
if (this.defaultpath != null && this.defaultpath !== undefined)
this.router.navigateByUrl(this.defaultpath);
}
defaultpath: string = 'admin'
constructor(private router: Router, vcr: ViewContainerRef) {
let att = vcr.element.nativeElement.getAttribute('defaultpath');
if (att !== null && att !== undefined) {
this.defaultpath = att;
}
}
3. Create separated bootstrap module for admin and default, AppAdminModule, AppModule with their own route defined
const adminRoutes: Routes = [
{ path: 'admin', component: SingleReportComponent, loadChildren: '../generalReport/generalReport.module#GeneralReportModule' },
{ path: '', redirectTo: 'admin', pathMatch:'full' },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
providers: [],
bootstrap: [AppAdminComponent],
declarations: [
AppAdminComponent, SpinnerComponent, NotFoundComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
ModelModule.forRoot(),
FormsModule,
NgIdleKeepaliveModule.forRoot(),
Ng2BreadcrumbModule.forRoot(),
ControlModule,
GeneralReportModule,
RouterModule.forRoot(appReportRoutes)
],
exports: [AppReportComponent]
})
export class AppReportModule {
}
4. Boostrap according the defaultpath's value in main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
const bootApplication = () => {
let appboost = document.querySelector("#admin");
if (appboost !== null) {
platform.bootstrapModule(AppAdminModule);
}
else {
let appreportboost = document.querySelector("#app");
if (appreportboost !== null) {
platform.bootstrapModule(AppModule);
}
}
};
if (document.readyState === 'complete') {
bootApplication();
}
else {
document.addEventListener('DOMContentLoaded', bootApplication);
}
- How to bootstrap two angular apps in one asp.net mvc application
- How to get your ASP.NET application working in IE11
- How to achive the CRUD in ASP.NET MVC(VS2010)
- [Bootstrap] How to use bootstrap in your application?
- How to capture the one-to-one dependency between two attributes in one relation?
- How to Print in ASP.NET 2.0
- How to use HTML-5 data-* attributes in ASP.NET MVC
- How to: Configure Network Tracing in .NET application
- ASP.NET WebForms and MVC together in one project
- How To Debug an ASP.NET Web Application
- How to use jquery or ajax to update razor partial view in c#/asp.net for a MVC project
- (全英文)How to install and run a simple Asp.Net 5 Application in a Docker Container
- Integrating OpenID in an ASP.NET MVC Application using DotNetOpenAuth
- How to convert XML to JSON in ASP.NET C#
- How to convert XML to JSON in ASP.NET C#
- How to debug ASP.NET MVC using source code
- ASP.NET MVC - how to make users confirm the delete
- ASP.NET MVC Bootstrap Helpers
- 复合数据类型
- Mac OS 任意显示器 开启HiDPI方法
- Spring总结之IOC原理
- 位操作和宏
- JVM内存分析工具——HProf
- How to bootstrap two angular apps in one asp.net mvc application
- Java随笔(持续更新中,想到什么写什么,各种冷知识黑科技小技巧)
- LaTeX常用语法总结
- Linux基础重点补充——第一关
- VMware通过samba和Ubuntu虚拟机共享文件
- [django]在删除文章所关联的分类的时候,属于该分类的文章都被删除了。
- 【LeetCode 35】Search Insert Position(Python)
- 环境变量PATH、 cp命令、mv命令 、 文档查看cat/more/less/head/tail
- Ubuntu mysql 报错:MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost'