First Commit 🕶

.gitignore

@@ -0,0 +1,6 @@
+.idea/
+.history/
+.DS_Store/
+.grunt
+node_modules
+_OLD_

1.quickstart/0.overview/index.adoc

@@ -0,0 +1,9 @@
+= Overview
+
+The course is going to begin with a quickstart.
+
+We use a web editor called http://plnkr.co[plunker] and create a basic Angular application from scratch.
+
+In this quickstart you get a 50,000 foot view of the major features of Angular and since we use a web editor it means you can start writing code ASAP without having to spend time setting up your computer.
+
+Let's get started!

1.quickstart/1.plunker/index.adoc

@@ -0,0 +1,151 @@
+---
+lecture_video: -es-Ciy5_2g
+---
+:toc:
+= Plunker
+
+Later on I'll be showing you how to install Angular and run the required development tools locally on your computer. 
+
+But for now we are going to use an online editor called http://plnkr.co/[plunker].
+
+The goal of this chapter is to explain how plunker works and the different files that make up an Angular plunker.
+
+== Learning Outcomes
+
+* Understand what plunker is, why and how we use it.
+* Understand the structure of an Angular plunker.
+* Know what each of the included libraries do.
+
+== What is plunker and how to use it?
+
+* It's a web based editor and development environment. With it you can create, edit and run HTML, css and JavaScript files directly from your browser.
+* No setup required, everyone can code in the browser instantly.
+* Each plunker has it's own unique URL which you can share with others so it's a useful way to show others your work.
+* You _can't_ edit someone else's plunker but you can _fork_ it. Forking creates a new plunker that you own with all the files copied across.
+* If your plunker has an `index.html` file pressing the _Run_ button will preview the plunker in the preview pane.
+
+== Structure of an Angular Plunker
+
+An Angular plunker is composed of:
+
+index.html:: The main HTML file which includes the required libraries and bootstraps our Angular application
+script.ts:: The main file in which we'll be placing our Angular code
+system.config.js:: Configuration for SystemJS which handles module loading (*) and compilation of TypeScript into JavaScript
+tsconfig.json:: Configuration for the TypeScript transpiler (*)
+
+_(*) We will be covering these topics in more detail later._
+
+In our index.html we are including 4 javascript files, like so:
+
+[source,html]
+----
+  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+  <script src="https://unpkg.com/[email protected]?main=browser"></script>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
+----
+
+=== core-js
+
+The version of javascript that has the broadest support across all browsers is ES5.
+
+Then next version of javascript is ES6. ES6 does not have full support across _all_ browsers yet. (See https://kangax.github.io/compat-table/es6/)[https://kangax.github.io/compat-table/es6/].
+
+This library enables a browser which doesn't have support for ES6 to run ES6 code, just maybe not in the most  efficient way
+
+For further details take a look at the project homepage: https://github.com/zloirock/core-js[https://github.com/zloirock/core-js]
+
+=== zone
+
+"Zone is a mechanism for intercepting and keeping track of asynchronous work" - https://github.com/angular/zone.js[https://github.com/angular/zone.js]
+
+You don't need to know details about this yet, it's an advanced topic, but to summarise.
+
+One of the problems with Angular 1 was that Angular didn't know when things happened outside of Angular, for example in asynchronous callbacks.
+
+When Angular 1 knew about callbacks it could do wonderful things, like automatically update the page. When it didn't know about callbacks it frustratingly didn't update the page.
+
+No matter how experienced you were with Angular 1 bugs with these kinds of issues cropped up time and time again.
+
+_Zones_ solves this problem, it keeps track of all _pending_ asynchronous work and tells Angular when things happen. So in Angular you don't have to worry about whether Angular knows about your callback or not, zones tracks this for you and notifies Angular when something happens.
+
+=== reflect
+
+Angular is written in TypeScript, this file lets us use a feature of TypeScript called annotations (or decorators).
+
+You'll learn a lot more about annotations later on in this course.
+
+=== SystemJS
+
+Instead of including all the files we need as script tags in our index.html, in Angular we break up all our code into files called _modules_. We then leave it to a _module loader_ to load the _modules_ when they are needed, in the order they are needed.
+
+It's a complicated problem, in a browser we can't make hundreds of requests to load JavaScript modules one at a time when a module loader requests them so a module loader needs to be clever.
+
+It will become part of the core JavaScript language but until then we use a _module loader_, there are several available but the one we use in our plunker is SystemJS.
+
+NOTE: If we build an application locally with the Angular command line tools it will use another module loader called https://webpack.github.io/[Webpack].
+
+=== systemjs.config.js
+
+SystemJS needs help to figure out when and how to load up certain modules, e.g. if we ask for a module called `@angular` what does that mean? What should it load up? Which version? This configuration is stored in the `systemjs.config.js` file.
+
+=== System.import
+
+Now we've loaded up the SystemJS library and configured it by loading up the `systemjs.config.js` file, we can use the `System.import` function to load up our `script.ts` file, like so:
+
+[source,javascript]
+----
+System.import('script.ts').catch(function(err) {
+  console.error(err);
+});
+----
+
+_Why not just add script.ts as a script tag?:_
+
+[source,html]
+----
+<script src="script.ts"></script>
+----
+
+Because in `script.ts` we include other modules, if we loaded via a script tag the browser doesn't know how to load those other dependant js files.
+
+By loading with `System.import` we make SystemJS figure out which dependant modules are required and loads the files for those automatically.
+
+== Summary
+
+We can code up Angular in the browser using an online editor called plunker. It gives us the ability to try our Angular quickly without requiring complex setup.
+
+It also gives us a unique URL so:
+
+1. We can quickly take a look at some code another person has written.
+2. We can share our code with other people, which is especially useful when we are stuck with some broken code and need help.
+
+== Listing
+
+http://plnkr.co/edit/NzQ1skgIrliMIGgEPkp8?p=preview[http://plnkr.co/edit/NzQ1skgIrliMIGgEPkp8?p=preview]
+
+[source,html]
+----
+<!DOCTYPE html>
+<!--suppress ALL -->
+<html>
+<head>
+  <link rel="stylesheet"
+        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
+
+  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+  <script src="https://unpkg.com/[email protected]?main=browser"></script>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
+  <script src="systemjs.config.js"></script>
+  <script>
+    System.import('script.ts').catch(function (err) {
+      console.error(err);
+    });
+  </script>
+</head>
+
+<body>
+</body>
+</html>
+----

1.quickstart/10.summary/index.adoc

@@ -0,0 +1,21 @@
+= Wrapping Up
+
+In this quick start section you created your first Angular Application!
+
+You should now have at least a top level view of what an Angular application is, how it functions and how to go about architecting it.
+
+We covered:
+
+
+Environment:: How to use link:stackblitz.com[stackblitz.com] to write Angular apps in a browser
+Components:: Which let us extend the HTML language to create new tags and forms the basis of an Angular application.
+Bootstrapping:: How to actually make Angular load and take control of a HTML page.
+Binding:: String interpolation with `{{ }}` and both input property binding as well as output event binding.
+NgFor:: How to render multiple elements using the the built-in `NgFor` *directive*.
+Data Modelling:: We touched on *data modelling*, by creating our own Joke class which encapsulated all our data and logic relate to a joke.
+Template Local Variables:: Capturing user input from users by adding `#` variables to input controls.
+Architecture:: We started to see how we go about building Angular apps by wiring together _inputs_ and _outputs_ in order to glue Components together.
+
+We'll be going into _much_ more detail into each of these topics, and others, in future chapters.
+
+However since Angular is based on TypeScript it makes sense to get a good understanding of those features before we dive into the rest of this course so that's the topic of the next section.

1.quickstart/12.activity/code/@activity/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

1.quickstart/12.activity/code/@activity/.gitignore

@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

1.quickstart/12.activity/code/@activity/README.md

@@ -0,0 +1,37 @@
+# Codecraft Angular Examples 
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8. Check the respective tutorial from [codecraft.tv](https://codecraft.tv/courses/angular/)
+
+## Examples Live Preview on Stackblitz
+
+To run the examples on stackblitz, respective example url can be:
+
+`stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}`
+
+## To Run Locally
+
+To run the examples locally, clone the [repository](https://github.com/codecraftpro/angular-sample-code) & in any example directory first do `npm install` then use below angular cli commands to run/debug the example app.
+
+### Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+### Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+### Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+### Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+### Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+### Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).