From 38f2cd6e8e4d2c6b77cc91928ac490d8d6482ffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Mar=C3=ADn?= Date: Thu, 18 Aug 2016 08:54:11 -0500 Subject: [PATCH] Demo initial update to Angular2 RC5 and fixes --- app/app.component.ts | 21 ++++++++++++ app/app.module.ts | 44 +++++++++++++++++++++++++ app/app.routing.ts | 60 ++++++++++++++++++++++++++++++++++ app/app.ts | 43 ------------------------ app/components/index.ts | 10 ++++++ app/components/side-nav.ts | 9 ----- app/components/tabs-routing.ts | 12 +++---- app/main.ts | 10 ++---- config.js | 42 ++++++++++++++++++++++-- package.json | 28 ++++++++-------- src/materialize-module.ts | 3 ++ 11 files changed, 200 insertions(+), 82 deletions(-) create mode 100644 app/app.component.ts create mode 100644 app/app.module.ts create mode 100644 app/app.routing.ts delete mode 100644 app/app.ts create mode 100644 app/components/index.ts diff --git a/app/app.component.ts b/app/app.component.ts new file mode 100644 index 0000000..f5f964c --- /dev/null +++ b/app/app.component.ts @@ -0,0 +1,21 @@ + +import {Component} from "@angular/core"; +import {Location} from '@angular/common'; +import "../src/index"; + +@Component({ + selector: "my-app", + styles: [`header, main, footer { padding-left: 260px; }`], + template: ` + + + +
+

Angular2 Materialize Examples

+
+ +
+ + ` +}) +export class AppComponent { } diff --git a/app/app.module.ts b/app/app.module.ts new file mode 100644 index 0000000..ebd0d43 --- /dev/null +++ b/app/app.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; + +import { AppComponent } from './app.component'; +import { + Buttons, + Collapsible, + Dropdown, + Dialogs, + Tabs, + TabsRouting, + Forms, + SideNav, + DatePicker, + ModelBindings +} from './components/index'; +import { routing } from './app.routing' + + +@NgModule({ + declarations: [ + AppComponent, + Buttons, + Collapsible, + Dropdown, + Dialogs, + Tabs, + TabsRouting, + Forms, + SideNav, + DatePicker, + ModelBindings + ], + imports: [ + BrowserModule, + routing + ], + providers: [ + { provide: LocationStrategy, useClass: HashLocationStrategy }, + ], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/app/app.routing.ts b/app/app.routing.ts new file mode 100644 index 0000000..485b57c --- /dev/null +++ b/app/app.routing.ts @@ -0,0 +1,60 @@ +import { Routes, RouterModule } from '@angular/router'; +import { + Buttons, + Collapsible, + Dropdown, + Dialogs, + Tabs, + TabsRouting, + Forms, + SideNav, + DatePicker, + ModelBindings +} from './components/index'; + + +const appRoutes: Routes = [ + { + path: '', + redirectTo: 'buttons', + pathMatch: 'full' + }, + { + path: 'buttons', + component: Buttons + }, + { + path: 'collapsible', + component: Collapsible + }, + { + path: 'dialogs', + component: Dialogs + }, + { + path: 'dropdowns', + component: Dropdown + }, + { + path: 'forms', + component: Forms + }, + { + path: 'tabs', + component: Tabs + }, + { + path: 'tabs-routing/...', + component: TabsRouting + }, + { + path: 'datepicker', + component: DatePicker + }, + { + path: 'modelbindings', + component: ModelBindings + } +]; + +export const routing = RouterModule.forRoot(appRoutes); \ No newline at end of file diff --git a/app/app.ts b/app/app.ts deleted file mode 100644 index 82f5124..0000000 --- a/app/app.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {SideNav} from "./components/side-nav"; -import {Forms} from "./components/forms"; -import {Tabs} from "./components/tabs"; -import {TabsRouting} from "./components/tabs-routing"; -import {Dialogs} from "./components/dialogs"; -import {Dropdown} from "./components/dropdown"; -import {Collapsible} from "./components/collapsible"; -import {Buttons} from "./components/buttons"; -import {DatePicker} from "./components/datepicker"; -import {ModelBindings} from "./components/model-bindings/model-bindings"; -import {Component} from "@angular/core"; -import {RouteConfig, ROUTER_DIRECTIVES} from "@angular/router-deprecated"; -import {Location} from '@angular/common'; -import "../src/index"; - -@Component({ - selector: "my-app", - directives: [ROUTER_DIRECTIVES, Buttons, Collapsible, Dropdown, Dialogs, Tabs, TabsRouting, Forms, SideNav, ModelBindings], - styles: [`header, main, footer { padding-left: 260px; }`], - template: ` - - - -
-

Angular2 Materialize Examples

-
- -
- - ` -}) -@RouteConfig([ - {path: "/buttons", component: Buttons, name: "Buttons", useAsDefault:true}, - {path: "/collapsible", component: Collapsible, name: "Collapsible"}, - {path: "/dialogs", component: Dialogs, name: "Dialogs"}, - {path: "/dropdowns", component: Dropdown, name: "Dropdown"}, - {path: "/forms", component: Forms, name: "Forms"}, - {path: "/tabs/", component: Tabs, name: "Tabs"}, - {path: "/tabs-routing/...", component: TabsRouting, name: "TabsRouting"}, - {path: "/datepicker", component: DatePicker, name: "DatePicker"}, - {path: "/modelbindings", component: ModelBindings, name: "ModelBindings"}, -]) -export class App { } diff --git a/app/components/index.ts b/app/components/index.ts new file mode 100644 index 0000000..3c27aee --- /dev/null +++ b/app/components/index.ts @@ -0,0 +1,10 @@ +export { SideNav } from "./side-nav"; +export { Forms } from "./forms"; +export { Tabs } from "./tabs"; +export { TabsRouting } from "./tabs-routing"; +export { Dialogs } from "./dialogs"; +export { Dropdown } from "./dropdown"; +export { Collapsible } from "./collapsible"; +export { Buttons } from "./buttons"; +export { DatePicker } from "./datepicker"; +export { ModelBindings } from "./model-bindings/model-bindings"; \ No newline at end of file diff --git a/app/components/side-nav.ts b/app/components/side-nav.ts index 88981fa..225cee5 100644 --- a/app/components/side-nav.ts +++ b/app/components/side-nav.ts @@ -1,11 +1,9 @@ import {MaterializeDirective} from "../../src/index"; import {Component} from "@angular/core" -import {Router, RouterLink} from "@angular/router-deprecated" import {Location} from '@angular/common'; @Component({ selector: "sideNav", - directives: [MaterializeDirective, RouterLink], styles: [` nav { height: 0px; @@ -29,11 +27,4 @@ export class SideNav { private routeNames = ["Buttons", "Collapsible", "Dialogs", "Dropdown", "Forms", "Tabs", "TabsRouting", "DatePicker", "ModelBindings"]; - constructor(private _location:Location, private _router:Router) { - } - - public isActive(routeName) { - return this._router.isRouteActive(this._router.generate([routeName])) - } - } diff --git a/app/components/tabs-routing.ts b/app/components/tabs-routing.ts index 34b8960..1c87bff 100644 --- a/app/components/tabs-routing.ts +++ b/app/components/tabs-routing.ts @@ -1,8 +1,8 @@ import {MaterializeDirective} from "../../src/index"; import {Component,OnDestroy} from "@angular/core" import {Subscription} from "rxjs/subscription"; -import {Router, RouteConfig, ROUTER_DIRECTIVES} from "@angular/router-deprecated"; import {Location} from '@angular/common'; +import { Router } from '@angular/router'; @Component({selector: "tabs-test1",template: `
Test 1
`}) class TabsTest1 {} @@ -15,7 +15,7 @@ class TabsTest4 {} @Component({ selector: "tabs-routing", - directives: [ROUTER_DIRECTIVES,MaterializeDirective,TabsTest1,TabsTest2,TabsTest3,TabsTest4], + directives: [TabsTest1,TabsTest2,TabsTest3,TabsTest4], template: `
@@ -30,12 +30,12 @@ class TabsTest4 {}
` }) -@RouteConfig([ +/*@RouteConfig([ {path: "/test1", component: TabsTest1, name: "TabsTest1", useAsDefault:true}, {path: "/test2", component: TabsTest2, name: "TabsTest2"}, {path: "/test3", component: TabsTest3, name: "TabsTest3"}, {path: "/test4", component: TabsTest4, name: "TabsTest4"} -]) +])*/ export class TabsRouting implements OnDestroy { private tabs = [ @@ -48,9 +48,9 @@ export class TabsRouting implements OnDestroy { private tabSelectionParams = null; constructor(private router:Router, private location:Location) { - this.routerSubscription = router.parent.subscribe(() => { + /*this.routerSubscription = router.parent.subscribe(() => { this.updateSelectionParams(router); - }); + });*/ } routeTo(route) { diff --git a/app/main.ts b/app/main.ts index e344642..302c6e0 100644 --- a/app/main.ts +++ b/app/main.ts @@ -2,11 +2,7 @@ import "zone.js"; import "reflect-metadata"; import "es6-shim"; -import {bootstrap} from "@angular/platform-browser-dynamic"; -import {provide} from "@angular/core"; -import {App} from "./app"; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; -import {LocationStrategy, HashLocationStrategy} from '@angular/common'; - -bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/config.js b/config.js index f6ca49f..e41a12c 100644 --- a/config.js +++ b/config.js @@ -30,6 +30,7 @@ System.config({ "@angular/core": "npm:@angular/core@2.0.0-rc.1", "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.1", "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0-rc.1", + "@angular/router": "npm:@angular/router@3.0.0-rc.1", "@angular/router-deprecated": "npm:@angular/router-deprecated@2.0.0-rc.1", "clean-css": "npm:clean-css@3.4.12", "crypto": "github:jspm/nodelibs-crypto@0.1.0", @@ -41,7 +42,7 @@ System.config({ "reflect-metadata": "npm:reflect-metadata@0.1.3", "rxjs": "npm:rxjs@5.0.0-beta.6", "typescript": "npm:typescript@1.8.10", - "zone.js": "npm:zone.js@0.6.12", + "zone.js": "npm:zone.js@0.6.4", "github:jspm/nodelibs-assert@0.1.0": { "assert": "npm:assert@1.3.0" }, @@ -96,14 +97,27 @@ System.config({ "@angular/core": "npm:@angular/core@2.0.0-rc.1", "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:@angular/common@2.0.0-rc.5": { + "@angular/core": "npm:@angular/core@2.0.0-rc.5", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:@angular/compiler@2.0.0-rc.1": { "@angular/core": "npm:@angular/core@2.0.0-rc.1", "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:@angular/compiler@2.0.0-rc.5": { + "@angular/core": "npm:@angular/core@2.0.0-rc.5", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:@angular/core@2.0.0-rc.1": { "process": "github:jspm/nodelibs-process@0.1.2", "rxjs": "npm:rxjs@5.0.0-beta.6", - "zone.js": "npm:zone.js@0.6.12" + "zone.js": "npm:zone.js@0.6.4" + }, + "npm:@angular/core@2.0.0-rc.5": { + "process": "github:jspm/nodelibs-process@0.1.2", + "rxjs": "npm:rxjs@5.0.0-beta.6", + "zone.js": "npm:zone.js@0.6.4" }, "npm:@angular/platform-browser-dynamic@2.0.0-rc.1": { "@angular/common": "npm:@angular/common@2.0.0-rc.1", @@ -112,17 +126,39 @@ System.config({ "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.1", "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:@angular/platform-browser-dynamic@2.0.0-rc.5": { + "@angular/common": "npm:@angular/common@2.0.0-rc.5", + "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5", + "@angular/core": "npm:@angular/core@2.0.0-rc.5", + "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.5", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:@angular/platform-browser@2.0.0-rc.1": { "@angular/common": "npm:@angular/common@2.0.0-rc.1", "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.1", "@angular/core": "npm:@angular/core@2.0.0-rc.1", "process": "github:jspm/nodelibs-process@0.1.2" }, + "npm:@angular/platform-browser@2.0.0-rc.5": { + "@angular/common": "npm:@angular/common@2.0.0-rc.5", + "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5", + "@angular/core": "npm:@angular/core@2.0.0-rc.5", + "process": "github:jspm/nodelibs-process@0.1.2" + }, "npm:@angular/router-deprecated@2.0.0-rc.1": { "@angular/common": "npm:@angular/common@2.0.0-rc.1", "@angular/core": "npm:@angular/core@2.0.0-rc.1", "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.1" }, + "npm:@angular/router@3.0.0-rc.1": { + "@angular/common": "npm:@angular/common@2.0.0-rc.5", + "@angular/compiler": "npm:@angular/compiler@2.0.0-rc.5", + "@angular/core": "npm:@angular/core@2.0.0-rc.5", + "@angular/platform-browser": "npm:@angular/platform-browser@2.0.0-rc.5", + "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0-rc.5", + "process": "github:jspm/nodelibs-process@0.1.2", + "rxjs": "npm:rxjs@5.0.0-beta.6" + }, "npm:amdefine@1.0.0": { "fs": "github:jspm/nodelibs-fs@0.1.2", "module": "github:jspm/nodelibs-module@0.1.0", @@ -412,7 +448,7 @@ System.config({ "npm:vm-browserify@0.0.4": { "indexof": "npm:indexof@0.0.1" }, - "npm:zone.js@0.6.12": { + "npm:zone.js@0.6.4": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" } diff --git a/package.json b/package.json index 412c6fb..302b2fa 100644 --- a/package.json +++ b/package.json @@ -35,32 +35,32 @@ "url": "https://github.com/InfomediaLtd/angular2-materialize/issues" }, "homepage": "https://github.com/InfomediaLtd/angular2-materialize#readme", - "dependencies": { - }, + "dependencies": {}, "devDependencies": { "@angular/common": "^2.0.0-rc.5", "@angular/compiler": "^2.0.0-rc.5", "@angular/core": "^2.0.0-rc.5", "@angular/platform-browser": "^2.0.0-rc.5", - "@angular/platform-browser-dynamic": "^2.0.0-rc.5" + "@angular/platform-browser-dynamic": "^2.0.0-rc.5", + "@angular/router": "^3.0.0-rc.1", "commitizen": "^2.4.6", "css-loader": "^0.23.1", "cz-conventional-changelog": "^1.1.5", "es6-promise": "^3.1.2", "es6-shim": "^0.35.0", "expose-loader": "^0.7.1", - "file-loader": "^0.8.5", + "file-loader": "^0.9.0", "ghooks": "^1.0.1", "gulp": "^3.9.0", "gulp-rimraf": "^0.2.0", "gulp-typescript": "^2.10.0", "hammerjs": "^2.0.6", "imports-loader": "^0.6.5", - "jquery": "^2.2.1", - "jspm": "0.16.34", + "jquery": "^2.2.4", + "jspm": "0.16.42", "materialize-css": "^0.97.5", - "npm-run-all": "^1.5.1", - "reflect-metadata": "0.1.2", + "npm-run-all": "^3.0.0", + "reflect-metadata": "0.1.8", "rimraf": "^2.4.4", "run-sequence": "^1.1.5", "rxjs": "5.0.0-beta.6", @@ -86,12 +86,12 @@ "jspm": { "dependencies": {}, "devDependencies": { - "@angular/common": "npm:@angular/common@^2.0.0-rc.1", - "@angular/compiler": "npm:@angular/compiler@^2.0.0-rc.1", - "@angular/core": "npm:@angular/core@^2.0.0-rc.1", - "@angular/platform-browser": "npm:@angular/platform-browser@^2.0.0-rc.1", - "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.0.0-rc.1", - "@angular/router-deprecated": "npm:@angular/router-deprecated@^2.0.0-rc.1", + "@angular/common": "npm:@angular/common@^2.0.0-rc.5", + "@angular/compiler": "npm:@angular/compiler@^2.0.0-rc.5", + "@angular/core": "npm:@angular/core@^2.0.0-rc.5", + "@angular/platform-browser": "npm:@angular/platform-browser@^2.0.0-rc.5", + "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.0.0-rc.5", + "@angular/router": "npm:@angular/router@^3.0.0-rc.1", "clean-css": "npm:clean-css@^3.4.9", "crypto": "github:jspm/nodelibs-crypto@^0.1.0", "css": "github:systemjs/plugin-css@^0.1.20", diff --git a/src/materialize-module.ts b/src/materialize-module.ts index bc9032d..10134c4 100644 --- a/src/materialize-module.ts +++ b/src/materialize-module.ts @@ -8,6 +8,9 @@ import { MaterializeDirective } from "./materialize-directive"; ], imports: [ CommonModule + ], + exports: [ + MaterializeDirective ] }) export class MaterializeModule {