Angular.JS – You want it before you know you do –

View Github Repository Open presentation in a new window

ESimmonds

See all presentation from ESimmonds

Angular.JS – You want it before you know you do –

0 0

AngularJSDevSession

Html Presentation of AngularJS

On Github ESimmonds / AngularJSDevSession

Angular.JS

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.

Reveal: Framework for creating presentation in HTML
  • Inspired by Paul Irish awesomeness, created his presentation as his presenation
  • I'm no where close but this is the first step
  • Because powerpoint just isn't fun to me
  • Export to PDF, speakernotes
  • Anything you can do with html
  • Started off embedding examples but just split them off
  • Please try Leap Motion and let me know https://www.leapmotion.com/

String and duck tape

  • reveal.js
  • Grunt
  • Markdown
  • Node
  • A few others but you get the point
Reveal: Framework for creating presentation in HTML
  • Grunt task runner for server and compiling files, jhint
  • Easier to write a portion of the content for the slides
  • Running on Node
  • Notes.js
  • Nagivate, have a progress of the slides
  • Route to a slide
  • Change the theme, more slide transitions
  • See running time and clock with next slide ahead
  • First time trying this so I'll let you know how it goes

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
  • months of frustration with Development speed
  • 17,000 lines of front end code
  • Told his team in two weeks he could replace code in Google Feedback
  • Transformed about 1700 lines of code to 1500 hundred
  • AngularJs file is only 97 KiB in production
  • Reason: Makes it easy to create an SPA (Single Page Application) Declarative Programming: Shows the logic without describing the control flow Teach HTML new tricks
Enter your name

Accomplished with JQuery, familiar right?

$(function(){

    var name = $('#name');
    var greeting = $('#greeting');
    name.keyup(function(){
        greeting.text('Where is ' + name.val() + '!');

    })
})
  • Where is fido!
  • Wait for main function when document is ready
  • Search the DOM
  • Bind to the events, with a call back
  • Update the data
Enter your name

Hey {{name}}!

		<input id="name" ng-model="name">
		<h2>Hello {{name}}!</h2>
7 lines to 2
  • Hey Jude!
  • Double Curleys, used for bindings
  • Declare
  • Add data binding, which will update the html
  • Intuitive

Composition

Directives and Bindings

  • ng-App
  • ng-model
  • To the bat cave
  • Step 1: http://localhost:8188/AngularJSDevSession/HelloAngular/step1.htm
  • Directives
    • Markers on a DOM element [attribute, element name, CSS class]
    • Tells AngularJS’s compiler to attach a specified behavior
    • Can use ng-model, ng:model, data-ng-model
    • Can bind to an element using ng-bind=”name” or {{name}}
  • ng-App
    • Auto-bootstrap
    • Designates the root element of the application
    • Placed on Body or html tags
  • ng-model
    • Binds input, select, text areas to a property in the scope [later]
    • Provides validation: required number, email, url
    • Set css classes ng-valid, ng-invalid
    • Bindings are case sensitive

At the Heart of it all

  • Controllers
    • Inheritance may be tricky
  • Scope
  • Modules
  • I know, Just show me the code
Step 2:
  • Controllers
  • Purpose is to provide code or logic to execute the user’s wishes as they interact with the view
  • Contains the business logic behind the application for a particular scope.
  • Tied to the piece of the DOM they are managing
    • By declaring the ng-controller attribute
    • Dynamically loaded through routes (which we will see later)
  • Scope
  • Part of a program in which a name that refers to some entity can be used to find the entity. [link]
  • Tied to the piece of the DOM they are managing
    • By declaring the ng-controller attribute
    • Dynamically loaded through routes (which we will see later)
  • Duplicate Controllers
    • What happens?
    • Each controller has its instance, Change name and click
  • Modules
  • Angular Apps don’t have a main method for bootstrapping. Modules specify how the application should be boot strapped.
  • Purposes: Unit testing, don’t need all modules to test the application
  • Group dependencies for a functional area within your application. Used for dependency injection
    • By declaring the ng-controller attribute
    • Dynamically loaded through routes (which we will see later)
  • How many modules do I need?
    • What happens?
    • Most applications work well enough with a single module
  • Recommended have separate modules
    • Service, directive, filter, application level with a dependency

Factory, Service, Provider, Value

  • Organize Me
  • Avoid defining objects in each
  • Factory: Create an object inside factory and return it
  • Service: Function that uses this key word to define functions
  • Provider: $getFunction, can be used to get the data
  • Value: Get a simple config value, might just want the version of a script. name, value pair

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?
  • HomeBrewd directives
    • Chapter 6, Hi There
    • Chapter 6, Expander
  • Form Validation
    • Chapter 2, formValidation
  • GrubHub
    • Chater 4, Grubhub
    • Scripts are orgaized by directives, services, and controllers
  • Angular Seed
    • Application Skeleton for a typical app
    • Contains tests libraries
  • Karma Test Runner
    • angular seed / scripts/test.bat
    • Contains tests libraries
  • Pages Made with Angular
    • http://builtwith.angularjs.org/
    • http://www.trailersfornetflix.com/browse
    • http://hat.jit.su/
Homebrewed directives http://localhost:8188/angularjs-book/chapter6/hiThere.html

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.

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

Thank You

+EquanSimmonds

@ESimmonds