From 245f365553fe9e873f5c05f026503c0938e2d838 Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Thu, 19 Mar 2020 23:11:35 -0400 Subject: [PATCH 1/9] Added Basics page at /codelab --- apps/codelab/src/app/app-routing.module.ts | 5 + apps/codelab/src/app/app.module.ts | 2 + .../components/basics/basics.component.html | 94 +++++++++++++++++++ .../components/basics/basics.component.scss | 39 ++++++++ .../app/components/basics/basics.component.ts | 19 ++++ .../components/codelab-components.module.ts | 3 + 6 files changed, 162 insertions(+) create mode 100644 apps/codelab/src/app/components/basics/basics.component.html create mode 100644 apps/codelab/src/app/components/basics/basics.component.scss create mode 100644 apps/codelab/src/app/components/basics/basics.component.ts diff --git a/apps/codelab/src/app/app-routing.module.ts b/apps/codelab/src/app/app-routing.module.ts index 51db37503..17acbec9b 100644 --- a/apps/codelab/src/app/app-routing.module.ts +++ b/apps/codelab/src/app/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './components/login/login.component'; +import { BasicsComponent } from './components/basics/basics.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; import { AdminGuard } from './shared/services/guards/admin-guard'; import { LoginGuard } from './shared/services/guards/login-guard'; @@ -26,6 +27,10 @@ const routes: Routes = [ loadChildren: () => import('./sync/sync.module').then(m => m.SyncAdminModule) }, + { + path: 'codelab', + component: BasicsComponent + }, { path: '**', component: NotFoundComponent } ]; diff --git a/apps/codelab/src/app/app.module.ts b/apps/codelab/src/app/app.module.ts index 60dcb8a02..e23954e18 100644 --- a/apps/codelab/src/app/app.module.ts +++ b/apps/codelab/src/app/app.module.ts @@ -15,6 +15,7 @@ import { NotFoundModule } from './components/not-found/not-found.module'; import { MatButtonModule } from '@angular/material/button'; import { DirectivesModule } from './directives/directives.module'; import { HttpClientModule } from '@angular/common/http'; +import { MaterialCodelabModule } from './codelabs/angular/material/material.module'; @NgModule({ imports: [ @@ -28,6 +29,7 @@ import { HttpClientModule } from '@angular/common/http'; AngularFireDatabaseModule, NotFoundModule, MatButtonModule, + MaterialCodelabModule, DirectivesModule ], declarations: [AppComponent], diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html new file mode 100644 index 000000000..377c5cb3c --- /dev/null +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -0,0 +1,94 @@ +
+

Basics of Angular Codelab

+ +

Introduction

+

+ Angular is a + development platform for building mobile and desktop apps. Angular + lets you extend HTML's syntax to express your apps’ components + clearly and succinctly. Angular's binding and dependency injection + eliminate much of the code you would otherwise have to write. +

+ +

Benefits of Angular

+

Develop across all platforms

+

+ Learn one way to build apps with Angular and then reuse your code and + abilities to build apps for any deployment target, such as web, mobile web, + native mobile, and native desktop. +

+

Speed and performance

+

+ Achieve the maximum speed possible on the web platform today, and take it + further, with Web Workers and server-side rendering. Angular puts you in + control of scalability. Meet huge data requirements by building data models + using RxJS, Immutable.js, or another push model. +

+

Incredible tooling

+

+ Build features quickly with simple, declarative templates. Extend the + template language with your own components and use a wide array of existing + components to build your UI. Get immediate Angular-specific help and + feedback with nearly every IDE (integrated development environment) and + editor. All this comes together so you can focus on building amazing apps + rather than trying to make the code work. +

+

Loved by millions

+

+ From prototype through global deployment, Angular delivers the productivity + and scalable infrastructure that support Google's largest apps. +

+ +

+ Learn more at Angular.io! +

+

What you will create

+ +

+ In this codelab, you will start working on MewTube, a video social + network for cats only. (No dogs allowed!) +

+
+ + +
+

Prerequisites:

+

+ Familiarity with the basics of + TypeScript is + highly recommended. Check out + the TypeScript codelab. +

+

What you will learn

+

+ After completing this codelab, you’ll understand the basics of Angular and + will be able to create your first Angular app. +

+ +

+ This codelab is broken down into four milestones. Each milestone takes about + 30 minutes to complete. +

+ +

Start by clicking a milestone name:

+ +

+ or + Launch the codelab +

+
diff --git a/apps/codelab/src/app/components/basics/basics.component.scss b/apps/codelab/src/app/components/basics/basics.component.scss new file mode 100644 index 000000000..c62345f41 --- /dev/null +++ b/apps/codelab/src/app/components/basics/basics.component.scss @@ -0,0 +1,39 @@ +.theme-basic { + font-family: 'Helvetica Neue', sans-serif; + padding: 2vw; + + h1, + h2, + h3, + h4, + h5, + h6, + li:not(.action-item) { + margin: 0; + padding: 0; + font-weight: 300; + } + + b { + color: #c04e22; + font-weight: 300; + background-color: #ffe; + } + + h2, + li:not(.action-item) { + font-size: 3vw; + margin-bottom: 1vw; + } + + li { + font-size: 18px !important; + } + + h1 { + margin-bottom: 20px; + } + h3 { + margin: 10px 0; + } +} diff --git a/apps/codelab/src/app/components/basics/basics.component.ts b/apps/codelab/src/app/components/basics/basics.component.ts new file mode 100644 index 000000000..e28486a45 --- /dev/null +++ b/apps/codelab/src/app/components/basics/basics.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { + ExerciseConfigTemplate, + Ng2TsExercises +} from '../../../../../../ng2ts/ng2ts'; + +@Component({ + selector: 'codelab-basics', + templateUrl: './basics.component.html', + styleUrls: ['./basics.component.scss'] +}) +export class BasicsComponent implements OnInit { + exercise: ExerciseConfigTemplate; + constructor(private exercises: Ng2TsExercises) { + this.exercise = this.exercises.getExercises(6, 0); + } + + ngOnInit(): void {} +} diff --git a/apps/codelab/src/app/components/codelab-components.module.ts b/apps/codelab/src/app/components/codelab-components.module.ts index 5923330f2..473529527 100644 --- a/apps/codelab/src/app/components/codelab-components.module.ts +++ b/apps/codelab/src/app/components/codelab-components.module.ts @@ -19,6 +19,7 @@ import { CodeDemoModule } from '@codelab/code-demos'; import { CodelabPreviewComponent } from './slides-preview/codelab-preview.component'; import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-results.module'; +import { BasicsComponent } from './basics/basics.component'; @NgModule({ imports: [ @@ -37,6 +38,7 @@ import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-resu TitleSlideComponent, BabelTestRunnerComponent, BreadcrumbComponent, + BasicsComponent, CodelabExerciseComponent, CodelabPreviewComponent, CodelabClosingSlideComponent, @@ -50,6 +52,7 @@ import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-resu TitleSlideComponent, BabelTestRunnerComponent, BreadcrumbComponent, + BasicsComponent, CodelabExerciseComponent, CodelabPreviewComponent, CodelabClosingSlideComponent, From 9807b5d5eed43cfa7dcaa431882cfaec9df195d1 Mon Sep 17 00:00:00 2001 From: NothingEverHappens Date: Thu, 9 Apr 2020 18:49:15 -0400 Subject: [PATCH 2/9] Update basics.component.html --- apps/codelab/src/app/components/basics/basics.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index 377c5cb3c..5701f09ea 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -87,8 +87,7 @@

What you will learn

or - Launch the codelabLaunch the codelab

From bac78f8b138e18c73c3be2a76542cb3509fb82cc Mon Sep 17 00:00:00 2001 From: NothingEverHappens Date: Thu, 9 Apr 2020 18:49:29 -0400 Subject: [PATCH 3/9] Update basics.component.html --- apps/codelab/src/app/components/basics/basics.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index 5701f09ea..34ac9d90e 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -87,7 +87,6 @@

What you will learn

or - Launch the codelab + Launch the codelab

From 699a8b7e57f3e5f242feef0495b3e3981e3993e2 Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 17:45:15 -0400 Subject: [PATCH 4/9] fixed formatting + remove unused styles --- apps/codelab/src/app/components/basics/basics.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.scss b/apps/codelab/src/app/components/basics/basics.component.scss index c62345f41..516c89d7a 100644 --- a/apps/codelab/src/app/components/basics/basics.component.scss +++ b/apps/codelab/src/app/components/basics/basics.component.scss @@ -8,7 +8,7 @@ h4, h5, h6, - li:not(.action-item) { + li { margin: 0; padding: 0; font-weight: 300; @@ -21,7 +21,7 @@ } h2, - li:not(.action-item) { + li { font-size: 3vw; margin-bottom: 1vw; } From d9cc61234c36dc86a22d22bd3aaf2b75d4e24990 Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 18:41:08 -0400 Subject: [PATCH 5/9] fixed formatting + remove unused styles --- .../components/basics/basics.component.html | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index 377c5cb3c..fbc67c48d 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -49,11 +49,7 @@

What you will create

network for cats only. (No dogs allowed!)

- +

Prerequisites:

@@ -61,11 +57,8 @@

Prerequisites:

Familiarity with the basics of TypeScript is highly recommended. Check out - the TypeScript codelab. + the TypeScript codelab.

What you will learn

@@ -85,10 +78,5 @@

What you will learn

  • Learn the basics of Angular Dependency Injection
  • Combine multiple Angular components together
    • -

    - or - Launch the codelab -

    +

    or Launch the codelab

    From 00f81a27fabdf3562d973f0c5b9a308f45403d34 Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 18:45:49 -0400 Subject: [PATCH 6/9] fixed formatting + remove unused styles --- .../app/components/basics/basics.component.html | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index 377c5cb3c..48201ce70 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -52,8 +52,7 @@

    What you will create

    + [url]="'/assets/runner/'">

    Prerequisites:

    @@ -61,11 +60,8 @@

    Prerequisites:

    Familiarity with the basics of TypeScript is highly recommended. Check out - the TypeScript codelab. + the TypeScript codelab.

    What you will learn

    @@ -86,9 +82,6 @@

    What you will learn

  • Combine multiple Angular components together

    • - or - Launch the codelab + or Launch the codelab

    From cbbe76d045b63f5c70752a22dd65cac9b2257f83 Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 18:57:33 -0400 Subject: [PATCH 7/9] fixed host styles and issue with exercise component shrinking --- .../app/components/basics/basics.component.html | 17 ++++++++++++----- .../app/components/basics/basics.component.scss | 3 ++- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index 48201ce70..df6a0fe61 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -50,9 +50,10 @@

    What you will create

    + [url]="'/assets/runner/'" +>

    Prerequisites:

    @@ -60,8 +61,11 @@

    Prerequisites:

    Familiarity with the basics of TypeScript is highly recommended. Check out - the TypeScript codelab. + the TypeScript codelab.

    What you will learn

    @@ -82,6 +86,9 @@

    What you will learn

  • Combine multiple Angular components together

    • - or Launch the codelab + or + Launch the codelab

    diff --git a/apps/codelab/src/app/components/basics/basics.component.scss b/apps/codelab/src/app/components/basics/basics.component.scss index 516c89d7a..6270c4db9 100644 --- a/apps/codelab/src/app/components/basics/basics.component.scss +++ b/apps/codelab/src/app/components/basics/basics.component.scss @@ -1,4 +1,5 @@ -.theme-basic { +:host { + display: block; font-family: 'Helvetica Neue', sans-serif; padding: 2vw; From 7c38d36b2c7b0c8c82e96009e8cfde01288076aa Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 18:58:49 -0400 Subject: [PATCH 8/9] fixed host styles and issue with exercise component shrinking --- .../app/components/basics/basics.component.html | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index df6a0fe61..f0f14fe5b 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -52,8 +52,7 @@

    What you will create

    + [url]="'/assets/runner/'">

    Prerequisites:

    @@ -61,11 +60,8 @@

    Prerequisites:

    Familiarity with the basics of TypeScript is highly recommended. Check out - the TypeScript codelab. + the TypeScript codelab.

    What you will learn

    @@ -86,9 +82,6 @@

    What you will learn

  • Combine multiple Angular components together

    • - or - Launch the codelab + or Launch the codelab

    From a85e991cc93aa72c564bed5178eb4e45703c1e3f Mon Sep 17 00:00:00 2001 From: alekseisafin Date: Sun, 12 Apr 2020 19:49:16 -0400 Subject: [PATCH 9/9] ran commit hook formatting --- .../app/components/basics/basics.component.html | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/codelab/src/app/components/basics/basics.component.html b/apps/codelab/src/app/components/basics/basics.component.html index f0f14fe5b..df6a0fe61 100644 --- a/apps/codelab/src/app/components/basics/basics.component.html +++ b/apps/codelab/src/app/components/basics/basics.component.html @@ -52,7 +52,8 @@

    What you will create

    + [url]="'/assets/runner/'" +>

    Prerequisites:

    @@ -60,8 +61,11 @@

    Prerequisites:

    Familiarity with the basics of TypeScript is highly recommended. Check out - the TypeScript codelab. + the TypeScript codelab.

    What you will learn

    @@ -82,6 +86,9 @@

    What you will learn

  • Combine multiple Angular components together

    • - or Launch the codelab + or + Launch the codelab