(???) !DOCTYPE html>
(???) html>
(???) <head>
(???) <meta charset="utf-8" />
(???) <meta name="viewport" content="width=device-width, initial-scale=1.0" />
(???) <title>Angular</title>
(???) <link href="/slides.css" rel="stylesheet" />
(???) <link href="/slides-print.css" rel="stylesheet" media="print" />
(???) <script src="/slides.js" defer></script>
(???) <link href="/timer.css" rel="stylesheet" />
(???) <script src="/timer.js" defer></script>
(???) <link href="lompe-table.css" rel="stylesheet" />
(???) <!-- TODO update to angular latest -->
(???) <script type="module">
(???) const presentation = document.querySelector(".slides");
(???) const slides = presentation.querySelectorAll("section");
(???) /*
(???) for (let i = 1; i < slides.length; i++) {
(???) const slide = slides[i];
(???) const footer = document.createElement("footer");
(???) slide.appendChild(footer);
(???) footer.innerHTML = `<small>${1 + i} of ${slides.length}</small>`;
(???) }
(???) */
(???) /*
(???) let current = history.state ? history.state.current : 0;
(???) document.body.addEventListener("keydown", (event) => {
(???) switch (event.key) {
(???) case " ":
(???) case "ArrowRight":
(???) if (current < slides.length - 1) current++;
(???) pushSlide(slides[current]);
(???) break;
(???) case "ArrowLeft":
(???) if (current > 0) current--;
(???) slides[current].scrollIntoView();
(???) pushSlide(slides[current]);
(???) break;
(???) }
(???) });
(???) */
(???) function pushSlide(slide) {
(???) slides[current].scrollIntoView();
(???) const id = slides[current].getAttribute("id");
(???) const h2 = slides[current].querySelector("h2");
(???) const title = h2 ? h2.innerText : "Angular 6";
(???) history.replaceState({ title, current }, title, "#" + id);
(???) document.title = title;
(???) }
(???) </script>
(???) <style>
(???) dl {
(???) column-count: 2;
(???) }
(???) dt {
(???) break-after: avoid;
(???) }
(???) dd {
(???) break-before: avoid;
(???) }
(???) a {
(???) text-decoration: none;
(???) }
(???) article a[href^="http"]::after {
(???) content: "";
(???) }
(???) #about a,
(???) #intro a {
(???) font: 1em Phosphate, "Open Sans";
(???) }
(???) </style>
(???) </head>
(???) <body>
(???) <main class="slides" tabindex="0" autofocus>
(???) <section class="paragraph">
(???) <p><kbd>◀</kbd> prev<br /><kbd>▶</kbd> next</p>
(???) </section>
(???) <section id="intro">
(???) Angular
(???) <p class="small">Up to speed in 15 or 60 minutes</p>
(???) </section>
(???) <!-- p><small>Audience: plain javascript developers or other framework users</small></p -->
(???) <!-- <section>
(???) <small>
(???) <time>Tuesday 26 June 2018</time> -
(???) <a href="http://joriszwart.nl/" target="_blank">joriszwart.nl</a>
(???) </small>
(???) </section> -->
(???) <section id="about-joris" class="about">
(???) <a href="https://joriszwart.nl" target="_blank">
(???) <img
(???) src="/joriszwart-logo-uluru.png"
(???) alt="Joris Zwart logo"
(???) width="1000"
(???) height="125"
(???) />
(???) </a>
(???) <p class="paragraph small black">I CODE DREAMS™</p>
(???) </section>
(???) <section class="small" id="agenda">
(???) <ol>
(???) <li>
(???) <a href="#whatis">What is Angular?</a>
(???) </li>
(???) <li>
(???) <a href="#prerequisites">Prerequisites</a>
(???) </li>
(???) <li>
(???) <a href="#new-app">Create an application</a>
(???) </li>
(???) <li>
(???) <a href="#serve">Serve and hot reload</a>
(???) </li>
(???) <li>
(???) <a href="#add-component">Add a component</a>
(???) </li>
(???) <li>
(???) <a href="#model-binding">Model binding (one way, two way)</a>
(???) </li>
(???) <li>
(???) <a href="#services">Services</a>
(???) </li>
(???) </ol>
(???) </section>
(???) <section class="small">
(???) <ol>
(???) <li>
(???) <a href="#philosophy">Angular philosophy</a>
(???) </li>
(???) <li>
(???) <a href="#material"
(???) >Material design and material components (CDK)</a
(???) >
(???) </li>
(???) <li>
(???) <a href="#folder-structure">Folder structure</a>
(???) </li>
(???) <li>
(???) <a href="#demo">Demo time!</a>
(???) </li>
(???) <li>
(???) <a href="#diy">DIY tour of heroes</a>
(???) </li>
(???) </ol>
(???) </section>
(???) <section class="small about" id="whatis">
(???) <blockquote>
(???) Angular is a platform that makes it easy to build applications with
(???) the web. Angular combines declarative templates, dependency injection,
(???) end to end tooling, and integrated best practices to solve development
(???) challenges. <br /><br />
(???) Angular empowers developers to build applications that live on the
(???) web, mobile, or the desktop
(???) </blockquote>
(???) </section>
(???) <section id="prerequisites">Tools prerequisites</section>
(???) <section class="paragraph small">
(???) <p>
(???) I recommend using
(???) <a href="https://code.visualstudio.com/" target="_blank"
(???) >Visual Studio Code</a
(???) >
(???) or <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> with
(???) <a href="https://cli.angular.io/" target="_blank">Angular CLI</a>.
(???) </p>
(???) </section>
(???) <section>1. Install tools</section>
(???) <section class="paragraph">
(???) <ul>
(???) <li>
(???) <a href="https://nodejs.org/en/download/" target="_blank"
(???) >Node.js</a
(???) >
(???) >= 18.19.1 or newer
(???) </li>
(???) <li>NPM >= 3 (comes with Node.js)</li>
(???) </ul>
(???) </section>
(???) <section>2. Install angular-cli</section>
(???) <section class="paragraph">
(???) <p>
(???) Open up a terminal and execute this command <del>and wait...</del>
(???) </p>
(???) <!-- TODO esbuild makes this process really faster -->
(???) <pre
(???) class="shell"
(???) title="shell"
(???) >$ <kbd>npm install --global @angular/cli</kbd></pre>
(???) </section>
(???) <section id="new-app">Create a new application</section>
(???) <section class="paragraph small">
(???) Your new application is only one <code>ng</code> command away!
(???) </section>
(???) <section class="paragraph">
(???) <p>In a terminal:</p>
(???) <pre><output>$ ng new my-application <span class="comment"># wait again...</span>
(???) cd my-application
(???) ng serve</output></pre>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) <br />Surf to
(???) <a href="http://localhost:4200/" target="_blank">localhost:4200</a>
(???) and shiver!
(???) </p>
(???) </section>
(???) <section id="serve">
(???) <h2>Serve and hot reload</h2>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) Modify <code>app.component.ts</code> or
(???) <code>app.component.html</code> to see hot reloading in action.
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) <br />Use <kbd>Control</kbd> + <kbd>C</kbd> to interrupt the web
(???) server, go on with your life and start creating a component...
(???) </p>
(???) </section>
(???) <section>
(???) <h2>1. Create a component</h2>
(???) </section>
(???) <section id="add-component">
(???) <p>In a terminal:</p>
(???) <pre
(???) class="shell"
(???) title="shell"
(???) ><output>$ ng generate component page</output></pre>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) <br />This will result in a set of files which make up your component.
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <ul class="flat">
(???) <li><code>page.component.html</code> - template</li>
(???) <li><code>page.component.ts</code> - component class</li>
(???) <li><code>page.component.css</code> - styling (scoped!)</li>
(???) <li><code>page.component.spec.ts</code> - unit test</li>
(???) </ul>
(???) </section>
(???) <section id="use-component">
(???) <h2>2. Use the newly created component</h2>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) First run <code>ng serve</code> again to take advantage of hot
(???) reloading.
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) <br />Open up <code>app.component.html</code> and replace the content
(???) with this code:
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="HTML"><code><app-page></app-page></code></pre>
(???) <p><br />This should result in your browser displaying:</p>
(???) <pre>Page works!</pre>
(???) </section>
(???) <section class="troubleshoot">
(???) <h2>Trouble shooting</h2>
(???) <p>If the previous rendered void:</p>
(???) </section>
(???) <section class="paragraph">
(???) <ol>
(???) <li>
(???) Have a look at the output of <code>ng serve</code> in the terminal.
(???) </li>
(???) <li>
(???) Open up the <em>developers console</em> of your browser and look at
(???) the <em>console log</em>.
(???) </li>
(???) </ol>
(???) </section>
(???) <section class="paragraph">
(???) <h3>Note about hot reloading</h3>
(???) <p>
(???) After creating a component (or generating a service), run
(???) <code>ng serve</code> again and reload the application in your
(???) browser.
(???) </p>
(???) </section>
(???) <section id="model-binding">
(???) <h2>Model binding</h2>
(???) <p>Add a property to your component:</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="TypeScript">
(???) code class="comment">// page.component.ts</code>
(???) code>class {</code>
(???) code> public message: string = 'Hello, world!'</code>
(???) code class="comment"> // ...</code>
(???) code>}</code>
(???) /pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="HTML">
(???) code class="comment"><!-- page.component.html --></code>
(???) code>{{ message }}</code>
(???) /pre>
(???) <p>
(???) You can apply this concept to HTML attributes, classes and styles as
(???) well!
(???) </p>
(???) </section>
(???) <section id="twoway-binding">
(???) <h2>Model binding - Two way(s)</h2>
(???) <p>Use <var>NgModel</var>.</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="HTML"><code><input [(ngModel)]="name"></code>
(???) code><button (click)="submitForm()">Submit</button></code>
(???) /pre>
(???) <p>See also Tour of Heroes.</p>
(???) </section>
(???) <section id="services">
(???) <h2>Services</h2>
(???) <p>
(???) Where components are for view logic, services come into place for
(???) other logic. Reusable and the such.
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <pre><output>$ ng generate service my-service</output></pre>
(???) </section>
(???) <section>
(???) <p>
(???) Inject the service in the constructor using
(???) <em>dependency injection</em>:
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <pre
(???) class="TypeScript"
(???) ><code>constructor(private myService: MyService) {}</code></pre>
(???) <p>
(???) The service is now available as <code>this.myService</code> and
(???) methods can be called on it.
(???) </p>
(???) </section>
(???) <section>
(???) <h3>Standard services</h3>
(???) <p>
(???) <code>constructor(private http: HttpClient) {}</code>
(???) </p>
(???) </section>
(???) <section id="philosophy">
(???) <h2>Angular philosophy</h2>
(???) <ul>
(???) <li>Many very small components</li>
(???) <li>Services for logic</li>
(???) <li>Modules</li>
(???) </ul>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) Read more in the
(???) <a href="https://angular.io/guide/styleguide" target="_blank"
(???) >Angular Style Guide</a
(???) >.
(???) </p>
(???) </section>
(???) <section id="material">
(???) <h2>Minimal Angular Material application with gesture support</h2>
(???) </section>
(???) <section class="paragraph">
(???) <p>TODO what is Material (design)?</p>
(???) </section>
(???) <section class="paragraph">
(???) <p>Add Material Design</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre><output>$ npm install --save @angular/material @angular/cdk</output></pre>
(???) </section>
(???) <section class="paragraph">
(???) <p>Optional packages if you like!</p>
(???) <pre><output>$ npm install --save @angular/animations
(???) npm install --save @angular/flex-layout</output></pre>
(???) <pre><output>$ ng generate module material <span class="comment"># for import convenience</span></output></pre>
(???) </section>
(???) <section>
(???) <h2>Touch gesture support</h2>
(???) <p>Add touch gesture support with hammerjs</p>
(???) <pre><output>$ npm install --save hammerjs</output></pre>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) Add import to
(???) <code>main.ts</code>
(???) </p>
(???) </section>
(???) <section class="paragraph">
(???) <pre class="TypeScript"><code>import 'hammerjs'</code></pre>
(???) </section>
(???) <section id="mat-typography">
(???) <h2>Material Design Components</h2>
(???) </section>
(???) <section class="paragraph">
(???) <p>Use <code>.mat-typography</code> for global typography.</p>
(???) </section>
(???) <section class="paragraph">
(???) <pre
(???) class="TypeScript"
(???) ><code class="comment">// page.component.ts</code>
(???) code>import { MatButton } from '@angular/material'; </code>
(???) code></code>
(???) code>...</code></pre>
(???) </section>
(???) <section class="paragraph">
(???) <pre
(???) class="HTML"
(???) ><code class="comment"><!-- page.component.html --></code>
(???) code></code>
(???) code><mat-button></mat-button></code></pre>
(???) </section>
(???) <section id="build">
(???) <h2>Production build</h2>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) To create a production build that is minified, tree shaken and
(???) combined by Webpack:
(???) </p>
(???) <pre><output>$ npm build --prod</output></pre>
(???) </section>
(???) <section class="paragraph">
(???) <p>
(???) The created bundle contains a set of files that can be served by a
(???) (static) webserver. Note the cache-busting.
(???) <!-- and the sizes -->
(???) </p>
(???) </section>
(???) <section class="paragraph small">
(???) <table class="table">
(???) <thead>
(???) <tr>
(???) <th>Filename</th>
(???) </tr>
(???) </thead>
(???) <tbody>
(???) <tr>
(???) <td>index.html</td>
(???) </tr>
(???) <tr>
(???) <td>main.4241826d33942486d560.js</td>
(???) </tr>
(???) <tr>
(???) <td>polyfills.2f4a59095805af02bd79.js</td>
(???) </tr>
(???) <tr>
(???) <td>runtime.a66f828dca56eeb90e02.js</td>
(???) </tr>
(???) <tr>
(???) <td>styles.801710192fa9f58b78b4.css</td>
(???) </tr>
(???) </tbody>
(???) <!-- tfoot>
(???) <tr><td>Total: </td></tr>
(???) </tfoot -->
(???) </table>
(???) </section>
(???) <section id="folder-structure" class="small">
(???) <h2>Folder structure</h2>
(???) <ul class="tree" style="line-height: 1.5em">
(???) <li>[dist] – release bundle</li>
(???) <li>[e2e] – end-to-end tests (protractor)</li>
(???) <li>
(???) [src]
(???) <ul>
(???) <li>
(???) [app]
(???) <ul>
(???) <li>app.component.* – application component</li>
(???) <li>[models] – view models</li>
(???) <li>[page] – page component</li>
(???) <li>[services]</li>
(???) </ul>
(???) </li>
(???) <li>[assets] – static files (images, data)</li>
(???) <li>
(???) [environments] – build environment configurations
(???) (production, development)
(???) </li>
(???) <li>index.html – HTML entry point</li>
(???) <li>main.ts – entry point</li>
(???) <li>style.css – global styles</li>
(???) <li>...</li>
(???) </ul>
(???) </li>
(???) <li>angular.json – Angular-CLI configuration file</li>
(???) <li>package.json – NPM configuration file</li>
(???) <li>...</li>
(???) </ul>
(???) </section>
(???) <section id="demo" class="epilog text-center">
(???) <br />
(???) <h2>Demo time!</h2>
(???) </section>
(???) <section id="diy">
(???) <h2>Do It Yourself</h2>
(???) <p>
(???) Tour of Heroes:
(???) <a href="https://angular.io/tutorial" target="_blank"
(???) >angular.io/tutorial</a
(???) >
(???) </p>
(???) </section>
(???) <section id="next" class="small">
(???) <h2>Where to go next?</h2>
(???) <p>Read up</p>
(???) <ul>
(???) <li>
(???) <a href="https://angular.io/guide/forms" target="_blank">Forms</a>
(???) (three tastes)
(???) </li>
(???) <li>
(???) <a href="https://angular.io/guide/ngmodules" target="_blank"
(???) >Modules</a
(???) >
(???) </li>
(???) <li>
(???) <a href="https://angular.io/guide/rx-library" target="_blank"
(???) >Reactive JavaScript</a
(???) >
(???) </li>
(???) <li>
(???) <a href="https://angular.io/guide/router" target="_blank"
(???) >Routing</a
(???) >
(???) </li>
(???) <li>
(???) <a href="https://angular.io/guide/template-syntax" target="_blank"
(???) >Template syntax</a
(???) >
(???) </li>
(???) <li>
(???) <a href="https://www.typescriptlang.org/" target="_blank"
(???) >TypeScript</a
(???) >
(???) </li>
(???) <li>...and many more!</li>
(???) </ul>
(???) </section>
(???) <section class="epilog text-center">C'est tout! Des questions?</section>
(???) <section id="links" class="small">
(???) <h2>Links</h2>
(???) <dl>
(???) <dt>
(???) <a href="https://angular.io/" target="_blank">angular.io</a>
(???) </dt>
(???) <dd>Home of Angular</dd>
(???) <dt>
(???) <a href="https://cli.angular.io/" target="_blank">cli.angular.io</a>
(???) </dt>
(???) <dd>Angular command line tools</dd>
(???) <dt>
(???) <a href="https://angular.io/tutorial" target="_blank"
(???) >angular.io/tutorial</a
(???) >
(???) </dt>
(???) <dd>Tour of Heroes tutorial</dd>
(???) <dt>
(???) <a href="https://material.angular.io/" target="_blank"
(???) >material.angular.io</a
(???) >
(???) </dt>
(???) <dd>Material Design components for Angular</dd>
(???) <dt>
(???) <a href="https://code.visualstudio.com/" target="_blank"
(???) >code.visualstudio.com</a
(???) >
(???) </dt>
(???) <dd>Visual Studio Code</dd>
(???) <dt>
(???) <a href="https://nodejs.org/" target="_blank">nodejs.org</a>
(???) </dt>
(???) <dd>Node.js - needed for NPM</dd>
(???) <dt>
(???) <a href="http://joriszwart.nl/talks/angular6-cli" target="_blank"
(???) >joriszwart.nl/talks/angular6-cli</a
(???) >
(???) </dt>
(???) <dd>This presentation with step-by-step code</dd>
(???) </dl>
(???) </section>
(???) </main>
(???) <aside class="timer" data-timer data-minutes="60"></aside>
(???) </body>
(???) /html>