kmaraz

export class Events {

  config: Config; // Configuration of this component (mainly UI stuff)
  currentUser: User; // User is needed to fetch his event list
  events: Event[]; // Event list
  eventsCount: number; // Number of events
  searchedEvents: Event[]; // List of search results
  userUuid: string; // UUID of current user

  constructor(

kmaraz

<div id="module-events">
  <div ng-show="!$ctrl.config.isLoaded">
    <div class="spinner">Loading...</div>
  </div>

  <div ng-show="$ctrl.config.isLoaded && !$ctrl.config.search">
    <!-- No events -->
    <div ng-show="$ctrl.eventsCount === 0">
      No events for you.
    </div>

kmaraz

/**
 * ListStore is our custom implementation of general Store,
 * which handles manipulation with collections. List store also
 * extends the EventEmitter, so it can notify the views about
 * its change.
 */
export class EventsStore extends ListStore<Event> {

  private config: Config;

kmaraz

export class EventsActions {

  constructor(
    private ActionTypes: ActionTypes, // List of actions we can do in our app
    private Dispatcher: FluxDispatcher, // Dispatcher from vendor
    private API: API, 
    private Reporter: Reporter, // New Relic or stuff
    private Notifications: Notifications, 
    private ngDialog: Dialog
  ) {

kmaraz

<div id="module-events">
  <div *ngIf="!config.isLoaded">
    <div class="spinner">Loading...</div>
  </div>

  <div *ngIf="config.isLoaded && !config.search">
    <!-- No events -->
    <div *ngIf="eventsCount === 0">
      No events for you.
    </div>

kmaraz

export interface RegisterEffects { ngRegisterEffects(): void; }

export const EFFECTS_CLASS = new InjectionToken<RegisterEffects[]>('EFFECTS_CLASS');

export function EffectsProvider<T extends RegisterEffects>(
  effectsClass: Type<T>): ClassProvider {
  return {
    multi: true,
    provide: EFFECTS_CLASS,
    useClass: effectsClass

kmaraz

// The original AngularJs application
const ngModule = angular.module('admin', [
  // We are leaving all the old module untouched
  'ng1.modules',
  // We can downgrade Components, Directives, Services, etc.
  // And use them in the AngularJs app
  'ng2.modules'
]);

@NgModule({

kmaraz

export const selectFeatureA = fromFeatureA.selectFeatureA;
export const selectFeatureB = fromFeatureB.selectFeatureB;
export const selectCombinedFeature = createSelector(selectFeatureA, selectFeatureB,
  (a, b) => a.find((x) => x.id === b.id)
);

kmaraz

// InjectionToken is a solution when choosing a provider token for non-class dependencies
// In this case we are redistering the reducers for this particular module
export const EVENTS_REDUCER_TOKEN = new InjectionToken<ActionReducerMap<fromEvents.State>>('Events');

// Map of our reducers
export function getReducers(): ActionReducerMap<fromEvents.State> {
  return {
    events: fromEvents.eventsReducer
  };
}

kmaraz

@Injectable()
export class EvnetsEffects implements RegisterEffects {

  // Effects would not work by default in the hybrid application,
  // therefore we need to preload them during the bootstrap of our app.
  // See: app.module.ts and app.effects.ts examples.
  @Effect()
  deleteEvent$: Observable<EventsActions.All> = this.actions$
    .ofType<EventsActions.DeleteEvent>(EventsActions.DELETE_EVENT)
    .pipe(