UCMS.Angular

צעדים ראשונים לשימוש בתשתית

• npm i edu.ucms.app --save
• יש להוסיף למודול הראשי את ה imports הבאים כדי שרכיבי התשתית יתנהלו כמו שצריך: UcmsSharedModule.forRoot(), HttpClientModule בנוסף כמובן ניתן לייבא את ה modules השונים בהתאם לצורך.
• ל UcmsSharedModule יש לשלוח נתוני קונפיגורציה עבור השליפות מה SharePoint. ניתן לעשות זאת ע"י אספקת provider ושימוש ב MY_CONFIG_TOKEN באופן הבא: {provide: MY_CONFIG_TOKEN, useClass: ConfigService} וזאת כאשר ConfigService מממש את IConfig של ה UCMS ומכיל את ה data members הבאים מאותחלים כמו שצריך: AppId: string; //application code. Ex: Shr WebApiRootUrl: string; //url of ucms.api. Ex: http://ucms.stage.education.gov.il/UcmsApi/Api Lang: string; //application language. Ex: HE

•   ע"מ לתמוך בניווט יש  ליצור מודול (בפרויקט התשתית מצויה דוגמא כזו בשם AppRoutingModule) שמטפל בכל הענין הזה. מודול זה צורך את ה routerService של התשתית.

• בשלב זה ניתן להטמיע את ה component על הדף:

קונפיגורציה

מבנה המחלקה ב Ucms:

ניווט

הניווט באפליקציה מתבסס על נתוני "רשימה לניווט" הקיימת ב SharePoint (נוצרת בהפעלת הפיצ'ר "יצירת סוגי תוכן ורשימות לתשתית פורטלים"). פירוט על רשימה זו ואופן השימוש בה ניתן למצוא במדריך לעורך תוכן.

האפליקציה החיצונית אחראית לבצע את הגדרת הניווט בפועל. מהקריאה ל NavigationController שבפרויקט ה api יחזרו כל הנתונים עבור הניווט בצורה הירארכית כפי שהם מופיעים ב SP. השלב הבא יהיה ליצור מודול ייעודי עבור הניווט - appRouting.module שיזין את הנתונים בצורה נכונה ל Router המובנה של אנגולר. עיקר העבודה הנעשית בפונקציה הרקורסיבית setConfig כפי הנראה למטה, זה לתאם בין שם הפריסה למודול המתאים לה. לאחר הריצה על כל הרשומות כולל קידוח עד הרמה הנמוכה ביותר של הניווט, יחזר מפונקציה זו מערך מתאים עם הגדרת path ו loadChildren לכל פריט. דוגמא למודול כזה:

export const ROUTES: Routes = [
{ path: 'tmp1', loadChildren: '../../modules/news-and-updates-page-wrap#NewsAndUpdatesPageWrapModule' },
{ path: 'tmp2', loadChildren: './pages/daf-sherut/daf-sherut.module#DafSherutModuleExt' },
{ path: 'tmp3', loadChildren: '../../pages/not-found/not-found.module#NotFoundPageModule' }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
        [],
        {
            enableTracing: false, // <-- debugging purposes only
            initialNavigation: false
        }
        )
    ],
    declarations: [],
    exports: [
        RouterModule
    ],
    providers: [RouterService,
        { provide: APP_INITIALIZER, useFactory: init_app, deps: [Injector, RouterService], multi: true }
    ]
})
export class AppRoutingModule { }

export function init_app(injector: Injector, configService: RouterService): Function {
    try {
        return () => {
        configService.getNavigation().then((res) => {
            let router: Router = injector.get(Router);
            let routerConfig: Routes = [];
            configService.navigationItems = res;
            for (let nav of configService.navigationItems) {
            routerConfig = setConfig(nav, 0, routerConfig);
            }
            router.config.splice(0, router.config.length);
            router.config = router.config.concat(routerConfig);
        
            router.config.push({ path: 'not-found', loadChildren: () => NotFoundPageModule });
            router.config.push({ path: '**', redirectTo: 'not-found' });
            router.resetConfig(router.config)
            router.initialNavigation();
            configService.emitConfigLoaded();
        }, (reason) => {
            console.log(reason);
        });
        };
    }
    catch (err) {
        console.error(err);
    }
}

function setConfig(navigation, ind, routerConfig) {
    switch (navigation["PageName"]) {
        case "daf-nose": routerConfig.push({ path: navigation["Path"], loadChildren: () => DafSherutModuleExt });
        break;
        case "news-and-updates-page": routerConfig.push({ path: navigation["Path"], loadChildren: () => NewsAndUpdatesPageModule });
        break;
        default: break;
    }
    if (navigation["Children"]) {
        for (let nav of navigation["Children"]) {
        routerConfig = setConfig(nav, 0, routerConfig);
        }
    }

    return routerConfig;
}

<div style="direction:rtl; text-align:right">

#### צריכה של רכיבי התשתית ואזורי מידע מתחלף

לאחר יישום כל הגדרות הקונפיגורציה (והניווט אם יש בכך צורך), ניתן לייבא את המודול הרצוי ולצרוך את רכיב התשתית בהתאם לצורך.
צריכת רכיב שאלות ותשובות:
</div>

import { QuestionsAnswersModule } from 'edu.ucms.app';

@NgModule({ declarations: […], imports: [ QuestionsAnswersModule ] … }) export class NewPageModule {

}

<div style="direction:rtl; text-align:right">
    כעת ניתן להטמיע על ה template של ה html את הרכיב באופן הבא ולהוסיף לו inputs בהתאם לצורך.
</div>

< questions-answers (setIsDisplay)="setDisplayQuestionsAnswers()" *ngIf="category" [lang]="'He'" [appId]="'Shr'" [category]='category'> < /questions-answers>

<div style="direction:rtl; text-align:right">
    בנוסף, ישנה אפשרות להכניס תוכן דינאמי עבור מידע מתחלף בתבנית של דף תוכן. ראשית יש לייבא את ה directive מתוך חבילת התשתית.
</div>

import { QueryFilterFields, ApiQuery, NetworkManagerService, ConfigurationService, BaseComponent, PersonalInfoHostDirective } from 'edu.ucms.app';

<div style="direction:rtl; text-align:right">
    וכן לייבא מתוך ה angular/core:
</div>

import { Component, OnInit, Output, ViewChild, ViewChildren, ComponentFactoryResolver, ElementRef, Type, QueryList, ChangeDetectorRef} from '@angular/core';

<div style="direction:rtl; text-align:right">
    ב HTML:
</div>

< ng-template personal-Info-host> < /ng-template>

<div style="direction:rtl; text-align:right">
    בצד ה TS הכרזה על משתנה מקושר לאלמנט:
</div>

@ViewChildren(PersonalInfoHostDirective) componentHost: QueryList < PersonalInfoHostDirective>;

<div style="direction:rtl; text-align:right">
    להלן פונקציה שמשתילה רכיב מתחלף ע"פ קלט כלשהו:
</div>

ngAfterViewInit() { switch (this._piComponent) { case "hatamot-kpi": this.component = HatamotKpiComponent; break; case "bagruyot-kpi": this.component = BagruyotKpiComponent; break; case "hasaot-kpi": this.component = HasaotKpiComponent; break; } if (this.component) { let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component); this.componentHost.forEach((item, ind) => { let viewContainerRef = item.viewContainerRef; /ניקוי האזור הדינאמי אם יש צורך רק בקומפוננטה אחת/ viewContainerRef.clear(); let componentRef = viewContainerRef.createComponent(componentFactory); this.changeDetectionRef.detectChanges(); }); } else { console.log("no component selector as " + this._piComponent); } }