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..df6a0fe61 --- /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..6270c4db9 --- /dev/null +++ b/apps/codelab/src/app/components/basics/basics.component.scss @@ -0,0 +1,40 @@ +:host { + display: block; + font-family: 'Helvetica Neue', sans-serif; + padding: 2vw; + + h1, + h2, + h3, + h4, + h5, + h6, + li { + margin: 0; + padding: 0; + font-weight: 300; + } + + b { + color: #c04e22; + font-weight: 300; + background-color: #ffe; + } + + h2, + li { + 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,