Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Mooa 是一个为 Angular 服务的微前端框架。A independent-deployment micro-frontend Framework for Angular from single-spa.

License

NotificationsYou must be signed in to change notification settings

phodal/mooa

Repository files navigation

Build StatusCoverage StatusMaintainabilitynodenpm

A single SPA Utils for Angular 2+

Simliar Projects:https://github.com/worktile/ngx-planet (Production Ready)

based onsingle-spa &&single-spa-angular-cli

difference:

  • Host <-> Apps Architecture
  • Configurable App (no loader require)
  • Independent App in Different Repo and runnable

Mooa Architecture

Examples: see inexamples/

Online Demo:

  1. http://mooa.pho.im/ (host in AWS S3)
  2. http://mooa.phodal.com/ (host in GitHub Pages)

Features:

  1. SPA by Configurable file, ex:apps.json
  2. Pluggable APP
  3. support Child APP navigate
  4. CLI for Generate Config

Goal:

  1. 构建插件化的 Web 开发平台，满足业务快速变化及分布式多团队并行开发的需求
  2. 构建服务化的中间件，搭建高可用及高复用的前端微服务平台
  3. 支持前端的独立交付及部署

Usecase

If you are mooa, please provide you case to help this project.

Theory

Research and Application of Micro Frontends

Boilerplate

App Boilerplate:https://github.com/phodal/mooa-boilerplate

Usage

1. Install mooa

in Host and Child App

yarn add mooa

2. Config Host

  1. add get Apps logic in AppComponent (app.component.ts)
constructor(privaterenderer:Renderer2,http:HttpClient,privaterouter:Router){// config Mooathis.mooa=newMooa({mode:'iframe',debug:false,parentElement:'app-home',urlPrefix:'app',switchMode:'coexist',preload:true,includeZone:true});http.get<IAppOption[]>('/assets/apps.json').subscribe(data=>{this.createApps(data);},err=>console.log(err));}privatecreateApps(data:IAppOption[]){data.map((config)=>{this.mooa.registerApplication(config.name,config,mooaRouter.matchRoute(config.prefix));});this.router.events.subscribe((event)=>{if(eventinstanceofNavigationEnd){this.mooa.reRouter(event);}});returnthis.mooa.start();}

3. Config App

  1. config Appmain.ts for load
import{mooaPlatform}from'mooa';if(environment.production){enableProdMode();}mooaPlatform.mount('help').then((opts)=>{platformBrowserDynamic().bootstrapModule(AppModule).then((module)=>{opts['attachUnmount'](module);});});
  1. setup app routing inapp.module.ts
constappRoutes:Routes=[{path:'*',component:AppComponent}...];@NgModule({declarations:[AppComponent,    ...],imports:[BrowserModule,RouterModule.forRoot(appRoutes)],providers:[{provide:APP_BASE_HREF,useValue:mooaPlatform.appBase()},],bootstrap:[AppComponent]})exportclassAppModule{}
  1. Add for handle URL Change inapp.component.ts
constructor(privaterouter:Router){mooaPlatform.handleRouterUpdate(this.router,'app1');}

4. Setup apps.json with Mooa CLI

  1. install global cli
npm install -g mooa
  1. create URL list files

Examples:apps.txt

http://mooa.phodal.com/assets/app1http://mooa.phodal.com/assets/help
  1. Generate Config File
mooa -g apps.txt

Examples:

[  {"name":"app1","selector":"app-app1","baseScriptUrl":"/assets/app1","styles": ["styles.bundle.css"    ],"prefix":"app/app1","scripts": ["inline.bundle.js","polyfills.bundle.js","main.bundle.js"    ]  }]

Mooa Config

config in Host app'sapp.component.ts

this.mooa=newMooa({mode:'iframe',debug:false,parentElement:'app-home',urlPrefix:'app',switchMode:'coexist'})

mode: 'iframe'

use iframe as application container:

<app-home_nghost-c2=""><iframeframeborder=""width="100%"height="100%"src="http://localhost:4200/app/help/homeassets/iframe.html"id="help_206547"></iframe></app-home>

switchMode: 'coexist'

hidden application when inactive:

<app-home_nghost-c2=""><app-app1_nghost-c0=""ng-version="5.2.8"style="display: none;"><nav_ngcontent-c0=""class="navbar"></app-app1><iframeframeborder=""width="100%"height="100%"src="http://localhost:4200/app/help/homeassets/iframe.html"id="help_206547"></iframe></app-home>

For Angular Lazyload Module

inline.bundle.js will load script for/ path.

So, just copy*.chunk.js files todist/, then deploy it.

API

registerApplicationByLink

exmples:

mooa.registerApplicationByLink('help','/assets/help',mooaRouter.matchRoute('help'));

registerApplication

mooa.registerApplication(config.name,config,mooaRouter.matchRoute(config.prefix));

hybrid

if(config.sourceType){that.mooa.registerApplicationByLink(config.name,config.link,mooaRouter.matchRoute(config.name));}else{that.mooa.registerApplication(config.name,config,mooaRouter.matchRoute(config.prefix));}

navigateTo Custom App

mooaPlatform.navigateTo({appName:'help',router:'home'});

License

Phodal's Idea

Copyright (c) 2013-2014 Christopher SimpkinsCopyright (c) 2017-2018 Robin Coma Delperier

© 2018 APhodal Huang'sIdea. This code is distributed under the MIT license. SeeLICENSE in this directory.

About

Mooa 是一个为 Angular 服务的微前端框架。A independent-deployment micro-frontend Framework for Angular from single-spa.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

    Packages

    No packages published

    Contributors3

    •  
    •  
    •  
    [8]ページ先頭
    ©2009-2025 Movatter.jp