Skip to content

Commit 11e4c61

Browse files
jhadesjhades
committed
Angular Universal Course
1 parent 41857e8 commit 11e4c61

File tree

8 files changed

+13845
-0
lines changed

8 files changed

+13845
-0
lines changed

‎angular-universal-course/package-lock.json

+13,547
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-universal-course/package.json

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "angular-universal-course",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"test": "ng test",
9+
"lint": "ng lint",
10+
"e2e": "ng e2e"
11+
},
12+
"private": true,
13+
"dependencies": {
14+
"@angular/animations": "~10.0.3",
15+
"@angular/cdk": "~10.0.0",
16+
"@angular/common": "~10.0.3",
17+
"@angular/compiler": "~10.0.3",
18+
"@angular/core": "~10.0.3",
19+
"@angular/forms": "~10.0.3",
20+
"@angular/material": "~10.0.0",
21+
"@angular/material-moment-adapter": "^10.0.2",
22+
"@angular/platform-browser": "~10.0.3",
23+
"@angular/platform-browser-dynamic": "~10.0.3",
24+
"@angular/router": "~10.0.3",
25+
"rxjs": "~6.5.5",
26+
"tslib": "^2.0.0",
27+
"zone.js": "~0.10.3"
28+
},
29+
"devDependencies": {
30+
"@angular-devkit/build-angular": "~0.1000.2",
31+
"@angular/cli": "~10.0.2",
32+
"@angular/compiler-cli": "~10.0.3",
33+
"@types/node": "^12.11.1",
34+
"@types/jasmine": "~3.5.0",
35+
"@types/jasminewd2": "~2.0.3",
36+
"codelyzer": "^6.0.0",
37+
"jasmine-core": "~3.5.0",
38+
"jasmine-spec-reporter": "~5.0.0",
39+
"karma": "~5.0.0",
40+
"karma-chrome-launcher": "~3.1.0",
41+
"karma-coverage-istanbul-reporter": "~3.0.2",
42+
"karma-jasmine": "~3.3.0",
43+
"karma-jasmine-html-reporter": "^1.5.0",
44+
"protractor": "~7.0.0",
45+
"ts-node": "~8.3.0",
46+
"tslint": "~6.1.0",
47+
"typescript": "~3.9.5"
48+
}
49+
}

‎angular-universal-course/src/app/app-routing.module.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
import {HomeComponent} from "./home/home.component";
4+
import {CourseComponent} from "./course/course.component";
5+
import {CourseResolver} from "./services/course.resolver";
6+
import {AboutComponent} from './about/about.component';
7+
8+
const routes: Routes = [
9+
{
10+
path: "",
11+
component: HomeComponent
12+
13+
},
14+
{
15+
path: 'about',
16+
component: AboutComponent
17+
},
18+
{
19+
path: 'courses/:id',
20+
component: CourseComponent,
21+
resolve: {
22+
course: CourseResolver
23+
}
24+
},
25+
{
26+
path: "**",
27+
redirectTo: '/'
28+
}
29+
];
30+
31+
@NgModule({
32+
imports: [RouterModule.forRoot(routes)],
33+
exports: [RouterModule]
34+
})
35+
export class AppRoutingModule { }

‎angular-universal-course/src/app/app.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'app-root',
6+
templateUrl: './app.component.html',
7+
styleUrls: ['./app.component.scss']
8+
})
9+
export class AppComponent {
10+
11+
12+
}

‎angular-universal-course/src/app/app.module.ts

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
2+
import {NgModule} from '@angular/core';
3+
4+
import {AppRoutingModule} from './app-routing.module';
5+
import {AppComponent} from './app.component';
6+
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
7+
import {MatMenuModule} from '@angular/material/menu';
8+
import {MatButtonModule} from '@angular/material/button'
9+
import {MatIconModule} from '@angular/material/icon';
10+
import {MatCardModule} from '@angular/material/card';
11+
import { HomeComponent } from './home/home.component';
12+
import {MatTabsModule} from '@angular/material/tabs';
13+
import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
14+
import {CourseComponent} from "./course/course.component";
15+
import { MatDatepickerModule } from "@angular/material/datepicker";
16+
import { MatDialogModule } from "@angular/material/dialog";
17+
import { MatInputModule } from "@angular/material/input";
18+
import { MatListModule } from "@angular/material/list";
19+
import { MatPaginatorModule } from "@angular/material/paginator";
20+
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
21+
import { MatSelectModule } from "@angular/material/select";
22+
import { MatSidenavModule } from "@angular/material/sidenav";
23+
import { MatSortModule } from "@angular/material/sort";
24+
import { MatTableModule } from "@angular/material/table";
25+
import { MatToolbarModule } from "@angular/material/toolbar";
26+
import {CoursesService} from "./services/courses.service";
27+
import {CourseResolver} from "./services/course.resolver";
28+
import { CourseDialogComponent } from './course-dialog/course-dialog.component';
29+
import {ReactiveFormsModule} from "@angular/forms";
30+
import {MatMomentDateModule} from "@angular/material-moment-adapter";
31+
import { HttpClientModule} from '@angular/common/http';
32+
import {AboutComponent} from './about/about.component';
33+
34+
35+
36+
37+
38+
@NgModule({
39+
declarations: [
40+
AppComponent,
41+
HomeComponent,
42+
CourseComponent,
43+
CoursesCardListComponent,
44+
CourseDialogComponent,
45+
AboutComponent
46+
],
47+
imports: [
48+
BrowserModule,
49+
BrowserAnimationsModule,
50+
MatMenuModule,
51+
MatButtonModule,
52+
MatIconModule,
53+
MatCardModule,
54+
MatTabsModule,
55+
MatSidenavModule,
56+
MatListModule,
57+
MatToolbarModule,
58+
MatInputModule,
59+
MatTableModule,
60+
MatPaginatorModule,
61+
MatSortModule,
62+
MatProgressSpinnerModule,
63+
MatDialogModule,
64+
AppRoutingModule,
65+
MatSelectModule,
66+
MatDatepickerModule,
67+
MatMomentDateModule,
68+
ReactiveFormsModule,
69+
HttpClientModule
70+
],
71+
providers: [
72+
CoursesService,
73+
CourseResolver
74+
],
75+
bootstrap: [AppComponent],
76+
entryComponents: [CourseDialogComponent]
77+
})
78+
export class AppModule {
79+
}

‎angular-universal-course/src/app/course/course.component.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div class="course">
2+
3+
<h2>{{course?.description}}</h2>
4+
5+
<img class="course-thumbnail mat-elevation-z10" [src]="course?.iconUrl">
6+
7+
<div class="spinner-container" *ngIf="dataSource.data?.length == 0">
8+
9+
<mat-spinner></mat-spinner>
10+
11+
</div>
12+
13+
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
14+
15+
<ng-container matColumnDef="seqNo">
16+
17+
<mat-header-cell *matHeaderCellDef>#</mat-header-cell>
18+
19+
<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
20+
21+
</ng-container>
22+
23+
<ng-container matColumnDef="description">
24+
25+
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
26+
27+
<mat-cell class="description-cell"
28+
*matCellDef="let lesson">{{lesson.description}}</mat-cell>
29+
30+
</ng-container>
31+
32+
<ng-container matColumnDef="duration">
33+
34+
<mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
35+
36+
<mat-cell class="duration-cell"
37+
*matCellDef="let lesson">{{lesson.duration}}</mat-cell>
38+
39+
</ng-container>
40+
41+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
42+
43+
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
44+
45+
</mat-table>
46+
47+
48+
49+
</div>
50+
51+
52+
53+
54+
55+

‎angular-universal-course/src/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular Universal In Depth</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
</head>
12+
<body class="mat-typography">
13+
<app-root></app-root>
14+
</body>
15+
</html>
16+

‎angular-universal-course/src/styles.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
3+
4+
5+
6+
@import "~@angular/material/theming";
7+
8+
// Include non-theme styles for core.
9+
@include mat-core();
10+
11+
$mat-custom-green: (
12+
50: #e8f5e9,
13+
100: #c8e6c9,
14+
200: #a5d6a7,
15+
300: #81c784,
16+
400: #66bb6a,
17+
500: rgb(76,175,80),
18+
600: #43a047,
19+
700: #388e3c,
20+
800: #2e7d32,
21+
900: #1b5e20,
22+
A100: #b9f6ca,
23+
A200: #69f0ae,
24+
A400: #00e676,
25+
A700: #00c853,
26+
contrast: (
27+
50: $dark-primary-text,
28+
100: $dark-primary-text,
29+
200: $dark-primary-text,
30+
300: $dark-primary-text,
31+
400: $dark-primary-text,
32+
500: $light-primary-text,
33+
600: $light-primary-text,
34+
700: $light-primary-text,
35+
800: $light-primary-text,
36+
900: $light-primary-text,
37+
A100: $dark-primary-text,
38+
A200: $light-primary-text,
39+
A400: $light-primary-text,
40+
A700: $light-primary-text
41+
)
42+
);
43+
44+
45+
// Define a theme.
46+
$primary: mat-palette($mat-custom-green);
47+
$accent: mat-palette($mat-pink, A200, A100, A400);
48+
49+
$theme: mat-light-theme($primary, $accent);
50+
51+
// Include all theme styles for the components.
52+
@include angular-material-theme($theme);

0 commit comments

Comments
 (0)