Angular.JS

AngularIcon

You want it before you know you do

Created by Equan Simmonds/@ESimmonds

What is under the hood?

reaval.js is a framework for creating html presentations.

String and duck tape

  • reveal.js
  • Grunt
  • Markdown
  • Node
  • A few others but you get the point

Quick Overview

  • Google Feedback 2009
  • 17,000 lines
  • Misko Hevery: Dare to be bold
  • Then be concise: Reduced to 1,500 lines
  • For a good reason
    • Decouple DOM Manipulation
    • SPA
    • Declarative

Accomplished with JQuery, familiar right? ``` $(function(){ var name = $('#name'); var greeting = $('#greeting'); name.keyup(function(){ greeting.text('Where is ' + name.val() + '!'); }) }) ```

Hey {{name}}!


		
		
Hello {{name}}!
7 lines to 2

Composition

Directives and Bindings

  • ng-App
  • ng-model
  • To the bat cave

At the Heart of it all

  • Controllers
    • Inheritance may be tricky
  • Scope
  • Modules
  • I know, Just show me the code

Factory, Service, Provider, Value

Interesting Extras

  • Homebrewed directives
  • Form Validation
  • GrubHub
  • Angular Seed (skeleton)[https://github.com/angular/angular-seed]
  • Karma Test Runner
  • Pages Made with Angular
  • Anything you had in mind?

Transition Styles

You can select from different transitions, like:
Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Down arrow

Image Backgrounds

<section data-background="image.png">

Repeated Image Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide".

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code

						
function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += ' roll';
      }
    };
  }
}

Intergalactic Interconnections

You can link between slides internally, like this.

Support

  • http://docs.angularjs.org/api
  • No IE 8 http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

## References
[Presentation Code on GitHub](https://github.com/ESimmonds/AngularJS-vs-KnockoutJS)

Thank You

+EquanSimmonds

@ESimmonds