add ui framework dependencies

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.check.workspaceVersion": false
+}

angular-cli.json

@@ -7,17 +7,23 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": "assets",
+      "assets": ["assets"
+        ],
       "index": "index.html",
       "main": "main.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../node_modules/primeng/resources/themes/cupertino/theme.css",
+        "../node_modules/font-awesome/css/font-awesome.min.css",
+        "../node_modules/primeng/resources/primeng.min.css"
+      ],
+      "scripts": [
+        "../node_modules/material-design-lite/dist/material.min.js"
       ],
-      "scripts": [],
       "environments": {
         "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
@@ -41,4 +47,4 @@
     "styleExt": "css",
     "prefixInterfaces": false
   }
-}
+}

batch-server.ts

@@ -1,6 +1,7 @@
+import {auth, database, initializeApp} from 'firebase';
+
+import {firebaseConfig} from "./src/app/shared/firebaseConfig";
 
-import {firebaseConfig} from "./src/environments/firebase.config";
-import {initializeApp, auth,database} from 'firebase';
 var Queue = require('firebase-queue');
 
 

package.json

@@ -14,27 +14,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "2.0.1",
-    "@angular/compiler": "2.0.1",
-    "@angular/core": "2.0.1",
-    "@angular/forms": "2.0.1",
-    "@angular/http": "2.0.1",
-    "@angular/platform-browser": "2.0.1",
-    "@angular/platform-browser-dynamic": "2.0.1",
+    "@angular/common": "2.2.0",
+    "@angular/compiler": "2.2.0",
+    "@angular/compiler-cli": "2.2.0",
+    "@angular/core": "2.2.0",
+    "@angular/forms": "2.2.0",
+    "@angular/http": "2.2.0",
+    "@angular/platform-browser": "2.2.0",
+    "@angular/platform-browser-dynamic": "2.2.0",
     "@angular/router": "3.0.0",
-    "@types/lodash": "^4.14.36",
-    "@types/request": "0.0.30",
-    "angularfire2": "^2.0.0-beta.4",
+    "angular2-materialize": "^6.3.0",
+    "angular2-mdl": "^2.5.1",
+    "angularfire2": "^2.0.0-beta.6",
     "core-js": "^2.4.0",
     "firebase-queue": "^1.5.0",
+    "font-awesome": "^4.7.0",
     "lodash": "^4.15.0",
-    "rxjs": "5.0.0-beta.12",
+    "material-design-lite": "^1.2.1",
+    "materialize-css": "^0.97.8",
+    "ng2-bootstrap": "^1.1.16",
+    "primeng": "^1.0.0",
+    "rxjs": "^5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.21"
   },
   "devDependencies": {
+    "@types/express": "^4.0.34",
+    "@types/lodash": "^4.14.36",
+    "@types/request": "0.0.30",
     "@types/jasmine": "^2.2.30",
-    "angular-cli": "1.0.0-beta.16",
+    "@types/node": "^0.0.2",
+    "angular-cli": "1.0.0-beta.18",
     "codelyzer": "~0.0.26",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
@@ -43,7 +53,6 @@
     "karma-jasmine": "0.3.8",
     "karma-remap-istanbul": "^0.2.1",
     "protractor": "4.0.3",
-    "ts-node": "1.2.1",
     "tslint": "3.13.0",
     "typescript": "^2.0.2"
   }

populate-db.ts

@@ -1,7 +1,7 @@
 import {database, initializeApp} from "firebase";
-import {firebaseConfig} from "./src/environments/firebase.config";
-import {dbData} from "./db-data";
 
+import {dbData} from "./db-data";
+import {firebaseConfig} from "./src/app/shared/firebaseConfig";
 
 console.log("WARNING VERY IMPORTANT - PLEASE READ THIS\n\n\n"); 
 console.log('WARNING Please set your own firebase config on src/environmnents/firebase.config.ts');

src/app/app-routing.module.ts

@@ -1,7 +1,12 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { LessonComponent } from './lesson/lesson.component';
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:'', component:LessonComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,3 +1,29 @@
-<h1>
-  {{title}}
-</h1>
+<div class="demo-container" mdl-shadow="2">
+  <mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
+    <mdl-layout-header>
+      <mdl-layout-header-row>
+        <mdl-layout-title>Angular Courses</mdl-layout-title>
+        <mdl-layout-spacer></mdl-layout-spacer>
+        <!-- Navigation. We hide it in small screens. -->
+        <nav class="mdl-navigation mdl-layout--large-screen-only">
+          <a class="mdl-navigation__link">Courses</a>
+          <a class="mdl-navigation__link">Lessons</a>
+          <a class="mdl-navigation__link"></a>
+        </nav>
+      </mdl-layout-header-row>
+    </mdl-layout-header>
+    <mdl-layout-drawer>
+      <mdl-layout-title>Angular Courses</mdl-layout-title>
+      <nav class="mdl-navigation">
+        <a class="mdl-navigation__link">Courses</a>
+        <a class="mdl-navigation__link">Lessons</a>
+        <a class="mdl-navigation__link"></a>
+      </nav>
+    </mdl-layout-drawer>
+    <app-header></app-header>
+    <mdl-layout-content>
+      <!-- Your content goes here -->
+      <router-outlet></router-outlet>
+    </mdl-layout-content>
+  </mdl-layout>
+</div>

src/app/app.component.ts

@@ -1,10 +1,51 @@
+import { AngularFire, FirebaseListObservable } from 'angularfire2';
+import { database, initializeApp } from 'firebase'
+
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css',
+  ]
 })
 export class AppComponent {
-  title = 'app works!';
+
+  title = 'Intro to PrimeNG & Firebase';
+  course$;
+
+  constructor(private af: AngularFire) {
+
+    const courses: FirebaseListObservable<any> = af.database.list('courses');
+
+    const course = af.database.object('KYCQXzSvTn09jSN-BPS');
+
+
+
+    // initializeApp(firebaseConfig);
+
+    // let root=database().ref();
+
+    // root.on('value', function(snap){
+    //   console.log(snap.val());
+    // });
+  }
+
+
+
+
+
+  onPush() {
+
+  }
+  onRemove() {
+
+  }
+  onUpdate() {
+
+  }
+  on() {
+
+  }
 }
+

src/app/app.module.ts

@@ -1,20 +1,40 @@
+import 'rxjs/add/operator/do';
+
+import { AngularFire, AngularFireModule } from 'angularfire2';
+import { ButtonModule, DataTableModule, SharedModule } from 'primeng/primeng';
+
+import { AppComponent } from './app.component';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { Course } from "./course/course";
+import { CoursesService } from "./service/courses.service";
 import { FormsModule } from '@angular/forms';
+import { HeaderComponent } from './header/header.component';
+import { HelloWorldRoutingModule } from './app-routing.module';
 import { HttpModule } from '@angular/http';
-
-import { AppComponent } from './app.component';
+import { LessonComponent } from './lesson/lesson.component';
+import { LessonsService } from './service/lessons.service';
+import { MdlModule } from 'angular2-mdl';
+import { NgModule } from '@angular/core';
+import { firebaseConfig } from './shared/firebaseConfig';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    LessonComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    AngularFireModule.initializeApp(firebaseConfig),
+    DataTableModule,
+    SharedModule,
+    ButtonModule,
+    MdlModule,
+    HelloWorldRoutingModule
   ],
-  providers: [],
+  providers: [AngularFire, CoursesService, LessonsService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/course/course.component.html

@@ -0,0 +1,3 @@
+<p>
+  course works!
+</p>

src/app/course/course.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CourseComponent } from './course.component';
+
+describe('CourseComponent', () => {
+  let component: CourseComponent;
+  let fixture: ComponentFixture<CourseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CourseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CourseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/course/course.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-course',
+  templateUrl: './course.component.html',
+  styleUrls: ['./course.component.css']
+})
+export class CourseComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/course/course.ts

@@ -0,0 +1,15 @@
+export class Course{
+    description:string;
+    longDescription?:string;
+    url:string;
+    courseListIcon?:string;
+    iconUrl?:string;
+    lessionId:string;
+
+    constructor(){
+
+    }
+
+
+
+}

src/app/eoc25-pro/eoc25-pro.component.html

@@ -0,0 +1,3 @@
+<p>
+  eoc25-pro works!
+</p>

src/app/eoc25-pro/eoc25-pro.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { EOC25ProComponent } from './eoc25-pro.component';
+
+describe('EOC25ProComponent', () => {
+  let component: EOC25ProComponent;
+  let fixture: ComponentFixture<EOC25ProComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EOC25ProComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EOC25ProComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/eoc25-pro/eoc25-pro.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-eoc25-pro',
+  templateUrl: './eoc25-pro.component.html',
+  styleUrls: ['./eoc25-pro.component.css']
+})
+export class EOC25ProComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/eoc25-pro/my-blogger/my-blogger.component.html

@@ -0,0 +1,3 @@
+<p>
+  my-blogger works!
+</p>