export function fuseBootstraper(customProviders: ProviderArray = null): ApplicationRef {
FuseDomAdapter.makeCurrent();
let platformProviders: ProviderArray = [
PLATFORM_COMMON_PROVIDERS
];
let defaultAppProviders: ProviderArray = [
FuseRenderer,
provide(Renderer, {
useClass: FuseRenderer
}),
FuseRootRenderer,
provide(RootRenderer, {
useClass: FuseRootRenderer
}),
provide(XHR, {
useClass: FileSystemXHR
}),
provide(ExceptionHandler, {
useFactory: () => new ExceptionHandler(DOM, true),
deps: []
}),
provide(PLATFORM_PIPES, {
useValue: COMMON_PIPES,
multi: true
}),
provide(PLATFORM_DIRECTIVES, {
useValue: COMMON_DIRECTIVES,
multi: true
}),
APPLICATION_COMMON_PROVIDERS,
COMPILER_PROVIDERS,
FORM_PROVIDERS,
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
bind(LocationStrategy).toClass(FuseLocationStrategy)
// ROUTER_PROVIDERS,
// provide(LocationStrategy, {
// useClass: FuseLocationStrategy
// })
];
let appProviders = [defaultAppProviders];
if (isPresent(customProviders)) {
appProviders.push(customProviders);
}
if (!_platform) {
_platform = platform(platformProviders);
}
let app = _platform.application(appProviders);
return app;
}
{ path: '/stats', component: Stats, as: 'Stats' }
])
class App {
authUser: AuthUser;
navOpen: boolean;
constructor(private _authService: AuthService) { }
ngOnInit() {
this._authService.authUser$.subscribe(user => this.authUser = user);
this._authService.loadAuthUser();
this.navOpen = false;
}
logout() {
this._authService.logout();
}
}
bootstrap(App, [
ROUTER_BINDINGS,
FORM_BINDINGS,
HTTP_BINDINGS,
bind(ROUTER_PRIMARY_COMPONENT).toValue(App),
bind(LocationStrategy).toClass(HashLocationStrategy),
[
DataService,
AuthService,
NotificationService
]
]);
import * as router from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {bind, provide} from 'angular2/core';
import {App} from './app';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
bootstrap(App, [
router.ROUTER_PROVIDERS,
bind(router.APP_BASE_HREF).toValue(location.pathname),
provide(router.LocationStrategy, {useClass: router.HashLocationStrategy}),
HTTP_PROVIDERS
]);
import {DataTableExample} from './screens/datatable/DataTableExample';
import {ReferenceData, ReferenceDataService} from './common/referenceData';
import {NV_LAYOUT_DIRECTIVES} from 'angular-velocity';
@Component({
selector: 'app',
viewBindings: [ReferenceDataService]
})
@RouteConfig([
{ path: '/', component: Main, as: 'Home' },
{ path: '/data-table-example', component: DataTableExample, as: 'DataTableExample' }
])
@View({
templateUrl: 'showcase/demo-app.html',
directives: [RouterOutlet, RouterLink, NV_LAYOUT_DIRECTIVES]
})
class DemoApp {
}
bootstrap(
DemoApp,
[
ReferenceDataService,
ROUTER_BINDINGS,
FORM_BINDINGS,
bind(ROUTER_PRIMARY_COMPONENT).toValue(DemoApp)
]);
case DeviceType.Joystick:
return 'JOYSTICK';
case DeviceType.Key:
return 'KEY';
case DeviceType.KeyTrackball:
return 'KEY_AND_TRACKBALL';
case DeviceType.KeyJoystick:
return 'KEY_AND_JOYSTICK';
default:
return 'MOUSE';
}
}
saveUserSettingsForUser(username: string, userSettings: UserSettings): Observable<UserSettings> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(this.globalService.URL_SAVE_USERSETTINGS(username),
JSON.stringify(userSettings),
{ headers: headers })
.map(res => {
let settings: UserSettings = res.json();
return settings;
});
}
}
export let userSettingsServiceInjectables: Array<any> = [
bind(UserSettingsService).toClass(UserSettingsService)
];
import {Injectable, bind} from 'angular2/core';
@Injectable()
export class LoggerService {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
export var LoggerServiceInjectables: Array<any> = [
bind(LoggerService).toClass(LoggerService)
];
}
//Add new user to db
addUser(user: User) {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(this.globalService.URL_ADDUSER,
JSON.stringify(user),
{ headers: headers })
.map(res => {
var result = res.json();
var response = new Users(result.data);
return { users: response.users, message: result.message };
});
}
//Delete user by name from db
deleteUser(name) {
return this.http.get(this.globalService.URL_DELETEUSER(name))
.map(res => {
var response = new Users(res.json());
return response.users;
});
}
}
export var userServiceInjectables: Array<any> = [
bind(UserService).toClass(UserService)
];
import {bootstrap} from 'angular2/platform/browser'
import {bind} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_BINDINGS} from 'angular2/http';
import {O365App} from './components/app'
bootstrap(O365App, [ROUTER_PROVIDERS, HTTP_BINDINGS, bind(LocationStrategy).toClass(HashLocationStrategy)]);
import {Observer} from 'rxjs/Observer';
import {Subject} from 'rxjs/Subject';
import {Action} from './flux-action';
import {StateKeeper} from './flux-state';
// -- DI config
/*
DI設定。Fluxの要。ViewとLogicを巧妙に分離している。理解に至るまでの道のりは長い。ひたすら難しい。こんなことを考案したのは一体誰だ。
それでもここが理解できないとSavkin's Redux with RxJS for Angular2は理解できない。調べるにあたっては英語力とググり能力が試される最大の難所と言っても良い。
https://laco0416.github.io/post/platform-prividers-of-angular-2/ を参考にすると理解の助けになるかもしれない。
Providerはprovide()で書いても良いが個人的にはbind()の方が書きやすくて好きだ。provideはGrunt、bindはGulpみたいな違い。
*/
// RxJSのSubjectクラスを継承してDispatcherクラスを作る。このクラスはDIで使う。
// Dispatcherをクラスとして用意しておくことでComponentのDIに関する記述がシンプルになる。シンプルさは正義である。
export class Dispatcher<T> extends Subject<T> {
constructor(destination?: Observer<T>, source?: Observable<T>) { // この記述はRxJSのソースからパクった。
super(destination, source);
}
}
// TodoAppコンポーネントのprovidersにセットしており、Angular2のbootstrap()時にインスタンス化されComponentに紐付けられる。(@laco0416 さんありがとう！)
// StateKeeperのインスタンスを生成するときにinitStateとdispatcherを引数にあてている(クロージャしている)ので、
// Componentでdispatcher.next()をコールしたときにStateKeeper内部のObservable(scan)のscanサイクルを回すことができる。
export const stateAndDispatcher = [
bind('initState').toValue({ todos: [], visibilityFilter: 'SHOW_ALL' } as AppState), // Componentから参照しないのでOpaqueTokenは使っていない。
bind(Dispatcher).toValue(new Dispatcher<Action>(null)), // 超重要。これが全てを一つの輪に紡ぎ上げる。Savkin's Fluxの循環サイクルを理解できたとき、人は悟りを知るだろう。
bind(StateKeeper).toFactory((state, dispatcher) => new StateKeeper(state, dispatcher), ['initState', Dispatcher]) // toFactoryの第二引数はTokenの配列であることに注意。bootstrap時にTokenを通じて値がStateKeeperの引数にあてられる。
];
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from 'angular2/http';
import { DataService } from './data.service';
import { bind } from 'angular2/core';
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";
// import { COMMON_DIRECTIVES } from 'angular2/platform/browser';
import 'rxjs/Rx';
bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, bind(LocationStrategy).toClass(HashLocationStrategy), DataService]);
