vsternbach / tasks-playground

A sample task manager application

tasks-playground

A sample tasks manager application to demonstrate the use of angular-ts-decorators library. It will serve as a playground for future porting of it to angular 4, react and maybe vue.js frameworks for self-learning and as an experiment to demonstrate the process of migration of angularjs applications to the most recent and popular frameworks. Future plans are to make application available as mobile and desktop application using native script/react-native and electron.

Some highlights of features and technologies used in the project:

• written in typescript 2.2 using angularjs 1.6 and component based architecture
• uses Google Tasks API with OAuth 2 authentication
• uses Material Design Lite for styling
• uses new async/await syntax in asynchronous code
• project based on angularjs-typescript-webpack boilerplate
• has integration with Travis CI for testing(yet to be implemented) and deployment to firebase

You can see the working demo of the project at https://tasks-162620.firebaseapp.com

Getting Started

To get you started you can simply clone the repository.

Running the App during Development

npm run start will run dev build task with watch and serve the application on http://localhost:3000/.

Building and running the App for Production

To build the application for production just run npm build, it creates dist directory that have the production optimized build.

tasks-playground's Issues

Selector as undefined

sorry wrongly posted in this repo
I cloned this repo. The routing is not happening for "view1" or "view2". On debugging the selector is coming as 'undefined'

Routing doesn't work

In main.ts:28, the code attempts to get the state.component.selector property, which doesn't (any longer?) exist. I worked around this by doing the following, but it sure would be nice if the workaround wasn't needed. (And save people a LOT of hours!)

import "reflect-metadata";
...
export interface IComponentState extends ng.ui.IState {
    componentClass: any;
}
...
const routes: IComponentState[] = [
    { name: "home", url: "/", componentClass: RootComponent }
];
...
    private static provideStates(states: IComponentState[], $stateProvider: ng.ui.IStateProvider) {
        states.map((config) => {

            // Set component name by reflecting metadata from component's @Component decorator
            const componentName = Reflect.getMetadata("custom:name", config.componentClass);
            config.component = componentName;
            delete config.componentClass;

            return { name: config.name, config };
        }).forEach(state => $stateProvider.state(state.name, state.config));
    }