CK's Notepad

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class CkBookPage {}

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.Native
})
export class CkBookPage {}

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.Emulated
})

import { Component } from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, Validators, ControlGroup, Control} from 'angular2/common';

@Component({
    selector: 'ck-book',
    directives: [FORM_DIRECTIVES],
    template: require('./book.html')
})
export class CkBookPage {
    private form: ControlGroup;
    private amon: Control;
    private category: Control;
    private books = [];

    constructor(private builder: FormBuilder) {

        this.amon = new Control("", Validators.required);
        this.category = new Control("", Validators.required);
                
        this.form = builder.group({
            category: this.category,
            amon: this.amon
        });
    }

    add(event) {
        console.log(this.form.value);        
        let _value = Object.assign({}, this.form.value);
        _value.date = new Date();
        this.books.push(_value);
        
        event.preventDefault();
    }
};

import { HTTP_PROVIDERS, BaseRequestOptions, RequestOptions, Headers } from 'angular2/http';

class requestOption extends BaseRequestOptions {
    headers: Headers = new Headers({ 'X-Custom-Header': 'api' });
}


bootstrap(CkDemoApp, [
    ...
    provide(RequestOptions, { useClass: requestOption })
]);

import isPromise from '../utils/is-promise';

export default function promiseMiddleware({ dispatch }) {
    return next => action => {
        if (!isPromise(action.payload)) {
            return next(action);
        }

        const { types, payload, meta } = action;
        const { promise, data } = payload;
        const [PENDING, FULFILLED, REJECTED] = types;

        /**
         * Dispatch the pending action
         */
        let pendingAction = { type: PENDING, payload: null, meta: null };
        if (_.isEmpty(data)) {
            pendingAction.payload = data;
        }
        if (_.isEmpty(meta)) {
            pendingAction.meta = meta;
        }
        dispatch(pendingAction);


        /**
         * If successful, dispatch the fulfilled action, otherwise dispatch
         * rejected action.
         */
        return promise.then(
            result => {
                dispatch({
                    type: FULFILLED,
                    payload: result,
                    meta,
                });
            },
            error => {
                dispatch({
                    type: REJECTED,
                    payload: error,
                    meta,
                });
            }
        );
    };
}

function configureStore(initialState) {
    const store = compose(
        _getMiddleware()
    )(createStore)(rootReducer, initialState);

    return store;
}

function _getMiddleware() {
    // 這裡加入middleware
    let middleware = [
        promiseMiddleware,
        ReduxThunk
    ];

    if (__DEV__) {
        middleware = [...middleware];
    }

    return applyMiddleware(...middleware);
}

export function loadTodo() {
	 return dispatch => {
        return fetch('api/Values')
            .then((response) => {
                return response.json()
            })
            .then((data) => {
                return ({
                    type: TODO_INIT,
                    payload: data
                });
            })
            .then((action) => {
                dispatch(action);
            })
    }
}

import {Injectable, Inject } from 'angular2/core';

import {Http, Response} from 'angular2/http';
import 'rxjs/Rx';
import {TODO_INIT} from '../constants';

@Injectable()
export class TodoService {
    constructor(
        @Inject('ngRedux') private store,
        private http: Http) {

    }

    loadTodo() {
        return this.http.get('api/Values')
            .map((res) => { return res.json() })
            .map((d) => ({
                type: TODO_INIT,
                payload: d
            }))
            .subscribe((action) => {
                this.store.dispatch(action);
            })
    }
}

import {
    Component,    
    Inject,
    ApplicationRef
} from 'angular2/core';

import * as TodoAction from '../../actions/ToDo';


@Component({
    selector: 'ck-todo-app',    
    template: require('./TodoPage.html')
})
export class CkTodoApp {
    private disconnect: Function;
    private unsubscribe: Function;
        
    private items: any;
    private task: any;

    constructor(
        @Inject('ngRedux') private ngRedux,
        private applicationRef: ApplicationRef) {       
    }    

    ngOnInit() {
        this.disconnect = this.ngRedux.connect(
            this.mapStateToThis,
            this.mapDispatchToThis)(this);

        this.unsubscribe = this.ngRedux.subscribe(() => {
            this.applicationRef.tick();
        });
    }

    ngOnDestroy() {
        this.unsubscribe();
        this.disconnect();
    }

   // 註冊store到變數上
    mapStateToThis(state) {
        return {
            items: state.todo,
            task: state.newtodo
        };
    }
   
    // 註冊功能到這個Class裡
    mapDispatchToThis(dispatch) {
        return {
            add: (task) => dispatch(TodoAction.add(Object.assign({}, task))),
            remove: (task) => dispatch(TodoAction.remove(task))
        };
    }
};

import { enableProdMode, provide } from 'angular2/core';
import { bootstrap} from 'angular2/bootstrap';
import { ROUTER_PROVIDERS, APP_BASE_HREF } from 'angular2/router';
import { CkDemoApp } from './containers/main-app';

// 註冊redux store用
import configureStore from './store/configure-store';
const provider = require('ng2-redux').provider;
const store = configureStore({});

declare let __PRODUCTION__: any;

if (__PRODUCTION__) {
    enableProdMode();
}

bootstrap(CkDemoApp, [
    provider(store),
    ROUTER_PROVIDERS,
    provide(APP_BASE_HREF, { useValue: '/' })
]);

///<reference path="./dev-types.d.ts"/>

import {createStore, applyMiddleware, compose} from 'redux';
import {fromJS} from 'immutable';
import ReduxThunk from 'redux-thunk';
import rootReducer from '../reducers';
const persistState = require('redux-localstorage');

function configureStore(initialState) {
    const store = compose(
        _getMiddleware()
    )(createStore)(rootReducer, initialState);

    return store;
}

function _getMiddleware() {
    let middleware = [
        ReduxThunk
    ];

    if (__DEV__) {
        middleware = [...middleware];
    }

    return applyMiddleware(...middleware);
}

export default configureStore;

import { TODO_ADD, TODO_REMOVE } from '../constants';
export function add(task) {
    return {
        type: TODO_ADD,
        data: task
    }
}

export function remove(task) {
    return {
        type: TODO_REMOVE,
        data: task
    }
}

import { combineReducers } from 'redux';
// reducer functions
import {todo, newtodo} from './todo';

// 下面的名稱是要存取store資料時的名稱
// ex. state.todo
export default combineReducers({
    todo,
    newtodo
});

import { fromJS, List } from 'immutable';
import { TODO_ADD, TODO_REMOVE } from '../constants';

const INITIAL_STATE = List<any>();

// todo Reducer
export function todo(state = INITIAL_STATE, action: any = { type: '' }) {
    switch (action.type) {
        case TODO_ADD:
            return state.push(action.data);
        case TODO_REMOVE:
            return state.remove(state.indexOf(action.data));
        default:
            return state;
    }
}

// newtodo Reducer
export function newtodo(state = { content: '' }, action: any = { type: '' }) {
    switch (action.type) {
        case TODO_ADD:
            return { content: '' };
        default:
            return state;
    }
}