⚡️ Update curriculum

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,28 @@
+# Project
+.idea
+
+# Node
+node_modules
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Package Managers
+yarn-error.log
+npm-debug.log
+
+# Cache
+.awcache
+settings.json

01-content-projection/.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

01-content-projection/.gitignore

@@ -0,0 +1,27 @@
+# Project
+.idea
+
+# Node
+node_modules
+
+# macOS
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Package Managers
+yarn-error.log
+npm-debug.log
+
+# Cache
+.awcache

01-content-projection/README.md

@@ -0,0 +1,82 @@
+<a href="https://ultimateangular.com" target="_blank"><img src="https://toddmotto.com/img/ua.png"></a>
+
+# Angular Fundamentals Seed
+
+> This is the seed project for the [Angular Fundamentals](https://ultimateangular.com/courses/#angular-2) course by [Todd Motto](https://twitter.com/toddmotto).
+
+## Project Setup and Tooling
+
+### Tools
+
+This course is recorded with the following tools, you can optionally follow along using the same, or your favourite text editor/IDE and browser.
+
+*Text editor*: Visual Studio Code, you can [download it here](http://code.visualstudio.com) for both Mac, Windows and Linux.
+*Browser*: Google Chrome, you can [download it here](https://www.google.com/chrome)
+
+### Prerequisites
+
+Please make sure that you have the following installed:
+
+* Install the _latest version_ of [Node.js](http://nodejs.org) (Mac or Windows)
+  * Mac users can optionally `brew install node` if they have [brew](http://brew.sh) installed
+
+* Node Sass, you _may_ need it if you haven't already got it installed:
+
+```bash
+npm install -g node-sass
+```
+
+### Project Install
+
+To grab the seed project, either Fork this repo or [click here to download](https://github.com/UltimateAngular/angular-fundamentals-seed/archive/master.zip) the `.zip` folder and extract the files wherever you like on your machine.
+
+#### Step 1: Package Manager
+
+To install the project dependencies, you will need to install `yarn`. To install `yarn`, run the following in your terminal:
+
+```bash
+npm install -g yarn
+```
+
+Mac users can alternatively use `brew` to install `yarn`.
+
+```bash
+brew update
+brew install yarn
+```
+
+If you experience any issues when installing/using `yarn` you can checkout the installation instructions [here](https://yarnpkg.com/en/docs/install).
+
+##### Step 2: Project Dependencies
+
+Now that we have a package manager, we can install the project dependencies. You can do this by running:
+
+```bash
+yarn install
+```
+
+This will install our dependencies for running our Angular application.
+
+#### Step 3: Running the project
+
+During development, the project is built using `webpack-dev-server`. This provides a local development server as well as having webpack recompile our app when a file changes. The project will also automatically refresh the page whenever we make changes.
+
+To start the project in development, run:
+
+```
+yarn start
+```
+
+This will output some information about the project (such as the TypeScript version and build progress). Once you see "build completed", you are ready to code!
+
+Open your browser to [localhost:4000](http://localhost:4000) to start running the code.
+
+### Project Tooling
+
+The project uses `webpack` to build and compile all of our assets. This will do the following for us: 
+
+- Compile all our TypeScript code into JavaScript (starting from `main.ts` and branching outwards from imported files)
+- Bundle all our JavaScript into one file to use
+- Allow us to use SASS for our component's CSS files
+- Provide the polyfills needed to run our app in all modern browsers
+- Mock a JSON backend using [json-server](https://github.com/typicode/json-server)

01-content-projection/app/app.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+import { User } from './auth-form/auth-form.interface';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div>
+      <auth-form 
+        (submitted)="createUser($event)">
+        <h3>Create account</h3>
+      </auth-form>
+      <auth-form 
+        (submitted)="loginUser($event)">
+        <h3>Login</h3>
+      </auth-form>
+    </div>
+  `
+})
+export class AppComponent {
+
+  createUser(user: User) {
+    console.log('Create account', user);
+  }
+
+  loginUser(user: User) {
+    console.log('Login', user);
+  }
+
+}

01-content-projection/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AuthFormModule } from './auth-form/auth-form.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AuthFormModule
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {}

01-content-projection/app/auth-form/auth-form.component.ts

@@ -0,0 +1,34 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+import { User } from './auth-form.interface';
+
+@Component({
+  selector: 'auth-form',
+  template: `
+    <div>
+      <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
+        <ng-content></ng-content>
+        <label>
+          Email address
+          <input type="email" name="email" ngModel>
+        </label>
+        <label>
+          Password
+          <input type="password" name="password" ngModel>
+        </label>
+        <button type="submit">
+          Submit
+        </button>
+      </form>
+    </div>
+  `
+})
+export class AuthFormComponent {
+
+  @Output() submitted: EventEmitter<User> = new EventEmitter<User>();
+
+  onSubmit(value: User) {
+    this.submitted.emit(value);
+  }
+
+}

01-content-projection/app/auth-form/auth-form.interface.ts

@@ -0,0 +1,4 @@
+export interface User {
+  email: string,
+  password: string
+}

01-content-projection/app/auth-form/auth-form.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { AuthFormComponent } from './auth-form.component';
+
+@NgModule({
+  declarations: [
+    AuthFormComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [
+    AuthFormComponent
+  ]
+})
+export class AuthFormModule {}