<commit_before><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Introduction to AngularJS</title>

    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/gofore.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- If the query includes 'print-pdf', use the PDF print sheet -->
    <script>
      document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h1>Introduction to<br>AngularJS</h1>
          <p>
            <br>
            <a href="http://www.linkedin.com/in/jsalonen"><NAME></a>
            &amp;
            <a href="http://www.linkedin.com/in/tjaakkola"><NAME></a>
          </p>
          <br>
          <center>
            <a href="http://gofore.com/"><img src="images/gofore_cmyk.png" class="borderless"></a>
          </center>
        </section>

        <section>
          <h2>Training Materials</h2>
          <h3><a href="https://github.com/gofore/angularjs-training">github.com/gofore/angularjs-training</a></h3>
        </section>

        <section>
          <h2>Contents</h2>
          <ul>
            <li>Part 1: Background and a High-level Overview</li>
            <li>Part 2: Architecture, Concepts and Core Features</li>
            <li>Part 3: Additional Features and Aspects</li>
            <li>Part 4: Some Practical Considerations</li>
          </ul>

          <p><br><em>Hint: Use up/down arrows to navigate inside topics</em></p>
        </section>

        <!--

          Part 1

        -->
        <section>
          <h1>Part 1</h1>
          <h2>Background and a High-level Overview</h2>
        </section>

        <section>
          <section>
            <h2>Background</h2>
          </section>
          <section>
            <h2>AngularJS<sup>1</sup></h2>
            <ul>
              <li>Open-source JavaScript framework, maintained by Google</li>
              <li>JavaScript MVC Framework for building Single-Page Applications (SPAs)</li>
              <li>Notable emphasis on <b>testability and embeddability</b></li>
              <li>A framework: you either use it in full or not at all</li>
              <li>MIT licensed</li>
            </ul>
          </section>
          <section>
            <h2>Similar Libraries and Frameworks</h2>
            <ul>
              <li>
                <b><a href="http://backbonejs.org/">Backbone.js</a></b><br>Minimalistic, low-level, make-your-own-stack library</li>
              <li>
                <b><a href="http://emberjs.com/">Ember.js</a></b><br>Minimal boilerplate, opinionated, "developer-friendly", very Angularish</li>
              <li>
                <b><a href="http://knockoutjs.com/">Knockout</a></b><br>MVVM framework. Declarative bindings, automatic UI refresh
              </li>
            </ul>
          </section>
          <section>
            <h2>2013 was the Trending Year of Angular</h2>
            <p>Google trending <b>skyrocketing since early 2013</b><br>
               (230% increase in 01-07/2013)</p>
            <p><img src="images/angularjs-trending.png"></p>
          </section>
          <section>
            <h2>...Yet new kids have been seen in the block already</h2>
            <ul>
              <li><b><a href="http://facebook.github.io/react/">React</a></b><br>Virtual DOM based View implementation for JavaScript SPAs</li>
              <li>
                <b><a href="http://webcomponents.org/">Web Components</a></b><br>
                Collection of Draft W3C specifications (Shadow DOM, Custom Elements, HTML Imports) to standardise SPAs.
                Multiple implementating libraries also available (Bosonic, Polymer, Polymer.Dart, X-Tag)
              </li>
            </ul>
          </section>
        </section>
        <section>
          <section>
            <h2>Design Overview</h2>
          </section>
          <section>
            <h2>The Zen of Angular<sup>2</sup></h2>
            <blockquote>"Angular is built around the belief that declarative code is better than imperative <b>when it comes to building UIs and wiring software components together</b>, while imperative code is <b>excellent for expressing business logic</b>."</blockquote>
          </section>
          <section>
            <h2>Design goals<sup>2</sup></h2>
            <ul>
              <li>Decouple DOM manipulation from app logic (&rarr; testability)</li>
              <li>Regard application testing as equal in importance to application writing (testing difficult affects code structuring)</li>
              <li>Decouple server side and client side (&rarr; reusability, testability)</li>
              <li>Guide developers (UI design &rarr; business logic &rarr; testing)</li>
            </ul>
          </section>
        </section>
        <section>
          <section>
            <h2>Use Cases</h2>
          </section>
          <section>
            <h2>Angular Sweet Spot</h2>
            <blockquote>
              "Angular was built for the CRUD application in mind.
              Luckily CRUD applications represent the majority of web applications." <sup>2</sup>
            </blockquote>
            <br>
            <p>Application examples:
              <ul>
                <li><a href="http://angularjs.org/">The canonical AngularJS CRUD apps</a></li>
                <li><a href="http://www.sekas.de/ptr/ptr-0.2.3/src/html/ptr.html">http://builtwith.angularjs.org/project/Project-Time-Recorder</a></li>
              </ul>
            </p>
            <br>
            <p>Use of AngularJS for GUI editors and games is specifically discouraged <sup>2</sup></p>
          </section>
          <section>
            <h2>HTML5/Hybrid Mobile Applications</h2>
            <ul>
              <li>SPAs are loaded only once &rarr; more native-like experience in mobile devices</li>
              <li><a href="http://mobileangularui.com/">Mobile Angular UI</a> - a mobile-optimized version of Angular
                  on top of Bootstrap 3 (improved performance, mobile-friendly controls with swipe support, offcanvas menus, etc.)</li>
              <li><a href="http://ionicframework.com/">Ionic framework</a> - AngularJS-based framework for creating
                  hybrid mobile applications</li>
            </ul>
          </section>
          <section>
            <h2>Real-time Web Applications</h2>
            <div style="text-align: left">
              <p>Extend Angular's two-way data binding to server-side. Still a little bit experimental, but doable:</p>
              <ul>
                <li>Hook up to socket.io interface with <a href="https://github.com/btford/angular-socket-io-seed">Angular Socket.io Seed</a></li>
                <li>Use a Firebase backend with <a href="https://github.com/firebase/angularFire">AngularFire</a></li>
              </ul>
              <br><br>
              <p>Application examples: <a href="http://firebase.github.io/angularFire/examples/chat/">chatroom</a>,
                <a href="http://firebase.github.io/angularFire/examples/todomvc/#/">real-time TODO app</a></p>
              <br>
              <p>...But maybe just for real-time CRUD applications</p>
            </Jus>
          </section>
        </section>
        <section>
          <h2>References and Further Reading</h2>
          <div style="text-align: left">
            <p>[1] <a href="http://en.wikipedia.org/wiki/AngularJS">AngularJS (Wikipedia)</a></p>
            <p>[2] <a href="http://docs.angularjs.org/guide/overview">AngularJS Overview</a></p>
            <p>[3] <a href="http://docs.angularjs.org/guide/concepts">AngularJS Conceptual Overview</a></p>
            <p>[4] <a href="http://www.slideshare.net/olegp/oleg-podsechinfrontendconf">AngularJS - the folly of choice</a>, Frontend DEV Conf '13</p>
            <p>[5] <a href="http://www.slideshare.net/olegp/tips-from-angular-js-users-anonymous-25199815">Tips from AngularJS Users Anonymous</a>, HelsinkiJS August 2013 at F-Secure.</p>
            <p>[6] <a href="https://moot.it/blog/technology/frameworkless-javascript.html">Why Angular, Ember, or Backbone don't work for us</a>, Tero Piirainen</p>
          </div>
        </section>

        <!--

          Part 2

        -->
        <section>
          <h1>Part 2</h1>
          <h2>Architecture, Concepts<br>and Core Features</h2>
        </section>
<commit_msg>Added a new slide relating to counter-arguments on using Angular<commit_after><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Introduction to AngularJS</title>

    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/gofore.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- If the query includes 'print-pdf', use the PDF print sheet -->
    <script>
      document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h1>Introduction to<br>AngularJS</h1>
          <p>
            <br>
            <a href="http://www.linkedin.com/in/jsalonen"><NAME></a>
            &amp;
            <a href="http://www.linkedin.com/in/tjaakkola"><NAME></a>
          </p>
          <br>
          <center>
            <a href="http://gofore.com/"><img src="images/gofore_cmyk.png" class="borderless"></a>
          </center>
        </section>

        <section>
          <h2>Training Materials</h2>
          <h3><a href="https://github.com/gofore/angularjs-training">github.com/gofore/angularjs-training</a></h3>
        </section>

        <section>
          <h2>Contents</h2>
          <ul>
            <li>Part 1: Background and a High-level Overview</li>
            <li>Part 2: Architecture, Concepts and Core Features</li>
            <li>Part 3: Additional Features and Aspects</li>
            <li>Part 4: Some Practical Considerations</li>
          </ul>

          <p><br><em>Hint: Use up/down arrows to navigate inside topics</em></p>
        </section>

        <!--

          Part 1

        -->
        <section>
          <h1>Part 1</h1>
          <h2>Background and a High-level Overview</h2>
        </section>

        <section>
          <section>
            <h2>Background</h2>
          </section>
          <section>
            <h2>AngularJS<sup>1</sup></h2>
            <ul>
              <li>Open-source JavaScript framework, maintained by Google</li>
              <li>JavaScript MVC Framework for building Single-Page Applications (SPAs)</li>
              <li>Notable emphasis on <b>testability and embeddability</b></li>
              <li>A framework: you either use it in full or not at all</li>
              <li>MIT licensed</li>
            </ul>
          </section>
          <section>
            <h2>Similar Libraries and Frameworks</h2>
            <ul>
              <li>
                <b><a href="http://backbonejs.org/">Backbone.js</a></b><br>Minimalistic, low-level, make-your-own-stack library</li>
              <li>
                <b><a href="http://emberjs.com/">Ember.js</a></b><br>Minimal boilerplate, opinionated, "developer-friendly", very Angularish</li>
              <li>
                <b><a href="http://knockoutjs.com/">Knockout</a></b><br>MVVM framework. Declarative bindings, automatic UI refresh
              </li>
            </ul>
          </section>
          <section>
            <h2>2013 was the Trending Year of Angular</h2>
            <p>Google trending <b>skyrocketing since early 2013</b><br>
               (230% increase in 01-07/2013)</p>
            <p><img src="images/angularjs-trending.png"></p>
          </section>
          <section>
            <h2>...Yet new kids have been seen in the block already</h2>
            <ul>
              <li><b><a href="http://facebook.github.io/react/">React</a></b><br>Virtual DOM based View implementation for JavaScript SPAs</li>
              <li>
                <b><a href="http://webcomponents.org/">Web Components</a></b><br>
                Collection of Draft W3C specifications (Shadow DOM, Custom Elements, HTML Imports) to standardise SPAs.
                Multiple implementating libraries also available (Bosonic, Polymer, Polymer.Dart, X-Tag)
              </li>
            </ul>
          </section>
        </section>
        <section>
          <section>
            <h2>Design Overview</h2>
          </section>
          <section>
            <h2>The Zen of Angular<sup>2</sup></h2>
            <blockquote>"Angular is built around the belief that declarative code is better than imperative <b>when it comes to building UIs and wiring software components together</b>, while imperative code is <b>excellent for expressing business logic</b>."</blockquote>
          </section>
          <section>
            <h2>Design goals<sup>2</sup></h2>
            <ul>
              <li>Decouple DOM manipulation from app logic (&rarr; testability)</li>
              <li>Regard application testing as equal in importance to application writing (testing difficult affects code structuring)</li>
              <li>Decouple server side and client side (&rarr; reusability, testability)</li>
              <li>Guide developers (UI design &rarr; business logic &rarr; testing)</li>
            </ul>
          </section>
        </section>
        <section>
          <section>
            <h2>Use Cases</h2>
          </section>
          <section>
            <h2>Angular Sweet Spot</h2>
            <blockquote>
              "Angular was built for the CRUD application in mind.
              Luckily CRUD applications represent the majority of web applications." <sup>2</sup>
            </blockquote>
            <br>
            <p>Application examples:
              <ul>
                <li><a href="http://angularjs.org/">The canonical AngularJS CRUD apps</a></li>
                <li><a href="http://www.sekas.de/ptr/ptr-0.2.3/src/html/ptr.html">http://builtwith.angularjs.org/project/Project-Time-Recorder</a></li>
              </ul>
            </p>
            <br>
            <p>Use of AngularJS for GUI editors and games is specifically discouraged <sup>2</sup></p>
          </section>
          <section>
            <h2>HTML5/Hybrid Mobile Applications</h2>
            <ul>
              <li>SPAs are loaded only once &rarr; more native-like experience in mobile devices</li>
              <li><a href="http://mobileangularui.com/">Mobile Angular UI</a> - a mobile-optimized version of Angular
                  on top of Bootstrap 3 (improved performance, mobile-friendly controls with swipe support, offcanvas menus, etc.)</li>
              <li><a href="http://ionicframework.com/">Ionic framework</a> - AngularJS-based framework for creating
                  hybrid mobile applications</li>
            </ul>
          </section>
          <section>
            <h2>Real-time Web Applications</h2>
            <div style="text-align: left">
              <p>Extend Angular's two-way data binding to server-side. Still a little bit experimental, but doable:</p>
              <ul>
                <li>Hook up to socket.io interface with <a href="https://github.com/btford/angular-socket-io-seed">Angular Socket.io Seed</a></li>
                <li>Use a Firebase backend with <a href="https://github.com/firebase/angularFire">AngularFire</a></li>
              </ul>
              <br><br>
              <p>Application examples: <a href="http://firebase.github.io/angularFire/examples/chat/">chatroom</a>,
                <a href="http://firebase.github.io/angularFire/examples/todomvc/#/">real-time TODO app</a></p>
              <br>
              <p>...But maybe just for real-time CRUD applications</p>
            </Jus>
          </section>
          <section>
            <h2>When You Probably Should Not Use Angular</h2>
            <ul>
              <li>You already happily use another SPA framework :)</li>
              <li>You need specific JavaScript components that are laborous to integrate with Angular</li>
              <li>You need a lightweight application and/or need to make an embeddable application [6]</li>
              <li>Generally when you are creating something that doesn't need Angular's core features
                  (controllers, two-way data binding, etc.)</li>
            </ul>
          </section>
        </section>
        <section>
          <h2>References and Further Reading</h2>
          <div style="text-align: left">
            <p>[1] <a href="http://en.wikipedia.org/wiki/AngularJS">AngularJS (Wikipedia)</a></p>
            <p>[2] <a href="http://docs.angularjs.org/guide/overview">AngularJS Overview</a></p>
            <p>[3] <a href="http://docs.angularjs.org/guide/concepts">AngularJS Conceptual Overview</a></p>
            <p>[4] <a href="http://www.slideshare.net/olegp/oleg-podsechinfrontendconf">AngularJS - the folly of choice</a>, Frontend DEV Conf '13</p>
            <p>[5] <a href="http://www.slideshare.net/olegp/tips-from-angular-js-users-anonymous-25199815">Tips from AngularJS Users Anonymous</a>, HelsinkiJS August 2013 at F-Secure.</p>
            <p>[6] <a href="https://moot.it/blog/technology/frameworkless-javascript.html">Why Angular, Ember, or Backbone don't work for us</a>, <NAME>irainen</p>
          </div>
        </section>

        <!--

          Part 2

        -->
        <section>
          <h1>Part 2</h1>
          <h2>Architecture, Concepts<br>and Core Features</h2>
        </section>

{'fraction_non_alphanumeric': 0.14686973018549748, 'fraction_numerical': 0.01143549747048904, 'mean_word_length': 2.0022148394241417, 'pattern_counts': {'":': 0, '<': 650, '<?xml version=': 0, '>': 650, 'https://': 8, 'lorem ipsum': 0, 'www.': 10, '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': '6712178', 'n_tokens_mistral': 5871, 'n_tokens_neox': 5517, 'n_words': 1355}