music store v1

music-store/app/administrator/administrator.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'administrator',
+ template: `<h1>Administrator</h1>`
+})
+export class AdministratorComponent {
+}

music-store/app/administrator/administrator.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { administratorRouting } from './administrator.routing';
+
+import { AdministratorComponent } from './administrator.component';
+
+@NgModule({
+ imports: [
+ FormsModule,
+ HttpModule,
+ administratorRouting
+ ],
+ declarations: [AdministratorComponent],
+ providers: []
+})
+export class AdministratorModule {
+}

music-store/app/administrator/administrator.routing.ts

@@ -0,0 +1,12 @@
+import { Routes, RouterModule } from '@angular/router'
+import { AdministratorComponent } from './administrator.component';
+
+const administratorRoutes: Routes = [
+ {
+ path: 'administrator',
+ component: AdministratorComponent,
+ children: []
+ }
+];
+
+export const administratorRouting = RouterModule.forChild(administratorRoutes);

music-store/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'music-store',
+ template: '<router-outlet></router-outlet>'
+})
+export class AppComponent {
+}

music-store/app/app.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { appRouting, appRoutingProviders } from './app.routing';
+
+import { VisitorModule } from './visitor/visitor.module';
+import { UserModule } from './user/user.module';
+import { AdministratorModule } from './administrator/administrator.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ appRouting,
+ VisitorModule,
+ UserModule,
+ AdministratorModule
+ ],
+ declarations: [AppComponent],
+ providers: [appRoutingProviders],
+ bootstrap: [AppComponent]
+})
+export class AppModule {
+}

music-store/app/app.routing.ts

@@ -0,0 +1,13 @@
+import { Routes, RouterModule } from '@angular/router'
+
+const appRoutes: Routes = [
+ {
+ path: '',
+ redirectTo: '/visitor',
+ pathMatch: 'full'
+ }
+];
+
+export const appRoutingProviders: any[] = [];
+
+export const appRouting = RouterModule.forRoot(appRoutes);

music-store/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

music-store/app/user/user.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'user',
+ template: `
+ <h1>User</h1>
+ <router-outlet></router-outlet>
+ `
+})
+export class UserComponent {
+}

music-store/app/user/user.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { userRouting } from './user.routing';
+
+import { UserComponent } from './user.component';
+
+@NgModule({
+ imports: [
+ FormsModule,
+ HttpModule,
+ userRouting
+ ],
+ declarations: [UserComponent],
+ providers: []
+})
+export class UserModule {
+}

music-store/app/user/user.routing.ts

@@ -0,0 +1,13 @@
+import { Routes, RouterModule } from '@angular/router'
+
+import { UserComponent } from './user.component';
+
+const userRoutes: Routes = [
+ {
+ path: 'user',
+ component: UserComponent,
+ children: []
+ }
+];
+
+export const userRouting = RouterModule.forChild(userRoutes);

music-store/app/visitor/chart-toppers/chart-toppers.component.html

@@ -0,0 +1,21 @@
+<h1>Chart Toppers</h1>
+<div class="mdl-grid">
+ <div class="mdl-cell mdl-cell--2-col">&nbsp;</div>
+ <div class="mdl-cell mdl-cell--8-col">
+ <table class="mdl-data-table mdl-js-data-table" style="width: 100%">
+ <thead>
+ <tr>
+ <th style="width: 10%">Rank</th>
+ <th style="width: 90%" class="mdl-data-table__cell--non-numeric">Song</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let chartTopper of chartToppersList">
+ <td>{{chartTopper.rank}}</td>
+ <td class="mdl-data-table__cell--non-numeric">{{chartTopper.song}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">&nbsp;</div>
+</div>

music-store/app/visitor/chart-toppers/chart-toppers.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartToppersService } from './chart-toppers.service';
+import { ChartTopper } from './chartTopper';
+
+@Component({
+ moduleId: module.id,
+ selector: 'chart-toppers',
+ templateUrl: 'chart-toppers.component.html',
+ providers: [ChartToppersService]
+})
+export class ChartToppersComponent implements OnInit {
+
+ chartToppersList: ChartTopper[];
+
+ constructor (private _chartToppersService: ChartToppersService) {
+ this.chartToppersList = [
+ {rank: 1, song: 'Cheap Thrills'},
+ {rank: 2, song: 'Cold Water'},
+ {rank: 3, song: 'This Is What You Came For'},
+ {rank: 4, song: 'Heathens'},
+ {rank: 5, song: 'One Dance'},
+ {rank: 6, song: 'Closer'},
+ {rank: 7, song: 'Ride'},
+ {rank: 8, song: 'Don\'t Let Me Down'},
+ {rank: 9, song: 'Can\'t Stop The Feeling!'},
+ {rank: 10, song: 'Needed Me'}
+ ];
+ }
+
+ ngOnInit () {
+ //this._getChartToppers();
+ }
+
+ private _getChartToppers () {
+ this._chartToppersService.getChartToppers();
+ }
+}

music-store/app/visitor/chart-toppers/chart-toppers.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+@Injectable()
+export class ChartToppersService {
+
+ constructor(private _http: Http) {
+
+ }
+
+ getChartToppers() {
+ return this._http.get('');
+ }
+}

music-store/app/visitor/chart-toppers/chartTopper

@@ -0,0 +1,4 @@
+export class ChartTopper {
+ rank: number;
+ song: string;
+}

music-store/app/visitor/help/help.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'help',
+ template: ``
+})
+export class HelpComponent {
+}

music-store/app/visitor/home/home.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'home',
+ template: `<h1>HOME</h1>`
+})
+export class HomeComponent {
+}

music-store/app/visitor/login/login.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'login',
+ template: ``
+})
+export class LoginComponent {
+}

music-store/app/visitor/new-releases/new-releases.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'new-releases',
+ template: ``
+})
+export class NewReleasesComponent {
+}

music-store/app/visitor/registration/registration.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'registration',
+ template: ``
+})
+export class RegistrationComponent {
+}

music-store/app/visitor/search/search.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'search',
+ template: ``
+})
+export class SearchComponent {
+}

music-store/app/visitor/visitor.component.html

@@ -0,0 +1,39 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+ <header class="mdl-layout__header">
+ <!--<div class="mdl-layout__drawer-button">-->
+ <!--<i class="material-icons"></i>-->
+ <!--</div>-->
+ <div class="mdl-layout__header-row">
+ <span class="mdl-layout-title">MusicStore</span>
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation mdl-layout--large-screen-only">
+ <a class="mdl-navigation__link" routerLink="chart-toppers" routerLinkActive="active">Chart Toppers</a>
+ <a class="mdl-navigation__link" routerLink="help" routerLinkActive="active">Help</a>
+ <a class="mdl-navigation__link" routerLink="home" routerLinkActive="active">Home</a>
+ <a class="mdl-navigation__link" routerLink="login" routerLinkActive="active">Login</a>
+ <a class="mdl-navigation__link" routerLink="new-releases" routerLinkActive="active">New Releases</a>
+ <a class="mdl-navigation__link" routerLink="registration" routerLinkActive="active">Registration</a>
+ <a class="mdl-navigation__link" routerLink="search" routerLinkActive="active">Search</a>
+ <a class="mdl-navigation__link" routerLink="vote" routerLinkActive="active">Vote</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">MusicStore</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" routerLink="chart-toppers" routerLinkActive="active">Chart Toppers</a>
+ <a class="mdl-navigation__link" routerLink="help" routerLinkActive="active">Help</a>
+ <a class="mdl-navigation__link" routerLink="home" routerLinkActive="active">Home</a>
+ <a class="mdl-navigation__link" routerLink="login" routerLinkActive="active">Login</a>
+ <a class="mdl-navigation__link" routerLink="new-releases" routerLinkActive="active">New Releases</a>
+ <a class="mdl-navigation__link" routerLink="registration" routerLinkActive="active">Registration</a>
+ <a class="mdl-navigation__link" routerLink="search" routerLinkActive="active">Search</a>
+ <a class="mdl-navigation__link" routerLink="vote" routerLinkActive="active">Vote</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content">
+ <router-outlet></router-outlet>
+ </div>
+ </main>
+</div>

music-store/app/visitor/visitor.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'visitor',
+ templateUrl: 'visitor.component.html'
+})
+export class VisitorComponent {
+}

music-store/app/visitor/visitor.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { visitorRouting } from './visitor.routing';
+
+import { VisitorComponent } from './visitor.component';
+import { ChartToppersComponent } from './chart-toppers/chart-toppers.component';
+import { HelpComponent } from './help/help.component';
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+import { NewReleasesComponent } from './new-releases/new-releases.component';
+import { RegistrationComponent } from './registration/registration.component';
+import { SearchComponent } from './search/search.component';
+import { VoteComponent } from './vote/vote.component';
+
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ HttpModule,
+ visitorRouting
+ ],
+ declarations: [
+ VisitorComponent,
+ ChartToppersComponent,
+ HelpComponent,
+ HomeComponent,
+ LoginComponent,
+ NewReleasesComponent,
+ RegistrationComponent,
+ SearchComponent,
+ VoteComponent
+ ],
+ providers: []
+})
+export class VisitorModule {
+}