Skip to content

Commit

Permalink
chore(angular): Upgrade to 2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
joaogarin committed Sep 21, 2016
1 parent 94196ec commit 5cded05
Show file tree
Hide file tree
Showing 15 changed files with 209 additions and 242 deletions.
31 changes: 16 additions & 15 deletions package.json
Expand Up @@ -27,24 +27,26 @@
},
"homepage": "",
"dependencies": {
"@angular/http": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/platform-server": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"core-js": "^2.2.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/http": "2.0.0",
"@angular/forms": "^2.0.0",
"@angular/router": "3.0.0",
"@ngrx/core": "^1.1.0",
"@ngrx/store": "^2.1.2",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"electron-prebuilt": "^0.35.4",
"webpack-target-electron-renderer": "^0.4.0"
},
"devDependencies": {
"awesome-typescript-loader": "^0.15.10",
"codelyzer": "0.0.19",
"codelyzer": "0.0.28",
"electron-packager": "^5.2.1",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
Expand All @@ -65,7 +67,6 @@
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "0.5.1",
"redux": "^3.3.1",
"reflect-metadata": "0.1.2",
"remap-istanbul": "^0.6.3",
"rimraf": "^2.5.2",
Expand All @@ -74,7 +75,7 @@
"tslint": "^3.5.0",
"tslint-loader": "^2.1.0",
"typescript": "~1.8.9",
"typings": "^0.6.9",
"typings": "^1.3.2",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"source-map-loader": "^0.1.5"
Expand Down
52 changes: 0 additions & 52 deletions src/app/actions.ts

This file was deleted.

9 changes: 9 additions & 0 deletions src/app/app.routes.ts
@@ -0,0 +1,9 @@
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { LoginComponent } from './components/login.component';

export const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
];
93 changes: 34 additions & 59 deletions src/app/app.ts
@@ -1,73 +1,48 @@
/*
* Providers provided by Angular
* Angular Modules
*/
import {provide, enableProdMode, OnInit} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

// ROUTER
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';

// HTTP
import {HTTP_PROVIDERS} from '@angular/http';

// Decorators
import {Component} from '@angular/core';
import { enableProdMode, NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { RouterModule, Router } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

// Setup redux with ngrx
import { Store, StoreModule } from '@ngrx/store';
import { authStore, authInitialState } from './store/auth.store';

/**
* setup redux
* Import our child components
*/
import {createStore} from 'redux';
import {rootReducer} from './rootReducer';
import {Actions} from './actions';
const appStore = createStore(rootReducer);
import { LoginComponent } from './components/login.component';
import { HomeComponent } from './components/home.component';
import { AppComponent } from './components/app.component';

import { routes } from './app.routes';

/**
* Import our child components
* Import the authentication service to be injected into our component
*/
import {LoginComponent} from './components/login';
import {HomeComponent} from './components/home';
import { Authentication } from './services/authentication';


/*
* App Component
* Top Level Component
* provide('AppStore', { useValue: appStore }),
*/
@Component({
// The selector is what angular internally uses
selector: 'ae-app', // <app></app>
directives: [ROUTER_DIRECTIVES, LoginComponent, HomeComponent],
template: `
<div>
<router-outlet></router-outlet>
</div>
`
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
RouterModule.forRoot(routes, { useHash: true }),
StoreModule.provideStore({ authStore }, { authStore: authInitialState }),
],
providers: [Authentication],
declarations: [AppComponent, HomeComponent, LoginComponent],
bootstrap: [AppComponent]
})
@RouteConfig([
{ path: '/', component: LoginComponent, name: 'Login' },
{ path: '/login', component: LoginComponent, name: 'Login' },
{ path: '/home', component: HomeComponent, name: 'Home' }
])
export class AppComponent implements OnInit {
//component initialization
ngOnInit() {
//check authentication
}

checkAuthentication() {

}
}

/*
* Bootstrap our Angular app with a top level component `App` and inject
* our Services and Providers into Angular's dependency injection
*/
bootstrap(AppComponent, [
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide('AppStore', { useValue: appStore }),
Actions
]).catch(err => console.error(err));
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
26 changes: 26 additions & 0 deletions src/app/components/app.component.ts
@@ -0,0 +1,26 @@
/**
* Import decorators and services from angular
*/
import { Component, OnInit } from '@angular/core';

/*
* App Component
* Top Level Component
*/
@Component({
// The selector is what angular internally uses
selector: 'ae-app', // <app></app>
template: `
<div>
<router-outlet></router-outlet>
</div>
`
})
export class AppComponent implements OnInit {
//component initialization
ngOnInit() {
//check authentication
}

checkAuthentication() {}
}
38 changes: 38 additions & 0 deletions src/app/components/home.component.ts
@@ -0,0 +1,38 @@
/**
* Import decorators and services from angular
*/
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

/**
* Import the ngrx configured store
*/
import { Store } from '@ngrx/store';
import { AppState } from './../store/appState.store';

@Component({
selector: 'ae-home',
template: `
<div [formGroup]="messageForm">
<h1>{{messageForm.controls['messageText'].value}}</h1>
<input type="text" formControlName="messageText"/>
</div>
`
})
export class HomeComponent implements OnInit {
name: string;

messageForm = new FormGroup({
messageText: new FormControl('Angular2'),
});

constructor(public store: Store<AppState>) {
let state = this.store.select('authStore').subscribe((state: any) => {
this.name = state.username;
});
}

ngOnInit() {
// Our API
}
}
26 changes: 0 additions & 26 deletions src/app/components/home.ts

This file was deleted.

@@ -1,13 +1,14 @@
/**
* Import decorators and services from angular
*/
import {Component, Inject, NgZone, OnDestroy} from '@angular/core';
import {Router} from '@angular/router-deprecated';
import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';

/**
* Include action representations from our list of actions to dispatch
* Import the ngrx configured store
*/
import {Actions} from './../actions';
import { Store } from '@ngrx/store';
import { AppState } from './../store/appState.store';

/**
* Import the authentication service to be injected into our component
Expand All @@ -16,32 +17,32 @@ import { Authentication } from './../services/authentication';

@Component({
selector: 'ae-login',
providers: [Authentication],
template: `
<div>
Authenticate
<button *ngIf='!authenticated' (click)='authenticate()'>Authenticate with Github</button>
</div>
`
})
export class LoginComponent implements OnDestroy {
export class LoginComponent {
unsubscribe: any;
authenticated: boolean;

//Inject Authentication service on construction
constructor(private _router: Router, private _ngZone: NgZone, @Inject('AppStore') private appStore, @Inject(Authentication) private auth, private actions: Actions) {
constructor(private _router: Router, private _ngZone: NgZone, private auth: Authentication, public store: Store<AppState>) {
this.auth = auth;

this.checkAuth();

this.unsubscribe = this.appStore.subscribe(() => {
let state = this.appStore.getState();
this.store.map((fullStore: any) => {
return fullStore.authStore;
}).subscribe((state: any) => {
console.log(state);
this.authenticated = state.authenticated;

//Because the BrowserWindow runs outside angular for some reason we need to call Zone.run()
this._ngZone.run(() => {
if (state.username != '') {
this._router.navigate(['Home']);
this._router.navigate(['home']);
}
});
});
Expand All @@ -62,9 +63,4 @@ export class LoginComponent implements OnDestroy {
authenticate() {
this.auth.githubHandShake();
}

ngOnDestroy() {
//remove listener
this.unsubscribe();
}
}

0 comments on commit 5cded05

Please sign in to comment.