<commit_before><!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Angular Workshop | 08 Component Architecture</title>

    <link rel="stylesheet" href="../css/reveal.css">
    <link rel="stylesheet" href="../css/theme/baloise.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="../lib/css/atom-one-dark.css">

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/print/pdf.css' : '../css/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section class="deck-slide">
            <h1>Component Architecture</h1>
        </section>
        <section>
            <section>
                <h2>Eigene Komponenten</h2>
                <h3>Eine Komponente integrieren</h3>
                <ul>
                    <li>wie in der Index.html: einfach mit dem Selektor als HTML Element einbinden</li>
                    <li>Komponenten können beliebig verschachtelt werden</li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - weitere Komponente</h3>
                <ul>
                    <li>Branch: <span class="code">08_ComponentArchitecture_0</span></li>
                    <li>Erstelle in <span class="code">src/app</span> einen Unterordner <span class="code">cinema</span>
                    </li>
                    <li>Erstelle eine <span class="code">cinema.component.ts</span> mit einem <span class="code">cinema.component.html</span>
                        Template
                    </li>
                    <li>Das Template enthält eine <span class="code">h1</span> Überschrift "Cinema"</li>
                    <li>Die <span class="code">app.component</span> soll nur noch unsere Cinema Komponente enthalten
                    </li>
                    <li>Denke daran, die neue Komponente im <span class="code">app.module.ts</span> in Declarations
                        hinzuzufügen
                    </li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - Allgemeines</h3>
                <ul>
                    <li>Das UI startest Du mit <span class="code">npm start</span></li>
                    <li>Du findest eine Übersicht der Befehle auch im README.MD im root des Projekts</li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - Possible Solution</h3><commit_msg>Translate some component architecture slides<commit_after><!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Angular Workshop | 08 Component Architecture</title>

    <link rel="stylesheet" href="../css/reveal.css">
    <link rel="stylesheet" href="../css/theme/baloise.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="../lib/css/atom-one-dark.css">

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/print/pdf.css' : '../css/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section class="deck-slide">
            <h1>Component Architecture</h1>
        </section>
        <section>
            <section>
                <h2>Your own components</h2>
                <h3>integrate components</h3>
                <ul>
                    <li>Same as in index.html: simply include with its selector as an html element</li>
                    <li>components can be nested unlimitedly - common sense applies ;-)</li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - another component</h3>
                <ul>
                    <li>Branch: <span class="code">08_ComponentArchitecture_0</span></li>
                    <li>Erstelle in <span class="code">src/app</span> einen Unterordner <span class="code">cinema</span>
                    </li>
                    <li>Erstelle eine <span class="code">cinema.component.ts</span> mit einem <span class="code">cinema.component.html</span>
                        Template
                    </li>
                    <li>Das Template enthält eine <span class="code">h1</span> Überschrift "Cinema"</li>
                    <li>Die <span class="code">app.component</span> soll nur noch unsere Cinema Komponente enthalten
                    </li>
                    <li>Denke daran, die neue Komponente im <span class="code">app.module.ts</span> in Declarations
                        hinzuzufügen
                    </li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - Allgemeines</h3>
                <ul>
                    <li>Das UI startest Du mit <span class="code">npm start</span></li>
                    <li>Du findest eine Übersicht der Befehle auch im README.MD im root des Projekts</li>
                </ul>
            </section>
            <section>
                <h3>Task 8.1 - Possible Solution</h3>
{'fraction_non_alphanumeric': 0.13936301249340138, 'fraction_numerical': 0.010557803976772832, 'mean_word_length': 1.7713310580204777, 'pattern_counts': {'":': 0, '<': 171, '<?xml version=': 0, '>': 171, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '114175', 'n_tokens_mistral': 1711, 'n_tokens_neox': 1624, 'n_words': 374}