Transcript
Page 1: AngularJS Weekend Immersive Day #1

AngularJS Weekend Immersive TrainingTroy Miles 18 & 19 October 2014

Page 2: AngularJS Weekend Immersive Day #1

codepen.io/collection/sIaCb/

Page 3: AngularJS Weekend Immersive Day #1
Page 4: AngularJS Weekend Immersive Day #1

Me

Troy Miles

30+ years of programming experience

[email protected]

@therockncoder

Page 5: AngularJS Weekend Immersive Day #1

–The Rockncoder

“Once users have had a cool feature, they will always want it or something better.”

Page 6: AngularJS Weekend Immersive Day #1

Day One Agenda

Introduction

CodePen

Core Concepts

Filters

Controllers

Directives

Form input + validation

Firebase

$apply + $watch

Page 7: AngularJS Weekend Immersive Day #1

Day Two Agenda

$http

Providers

Services

Factories

Routing

Custom Directives

Animation

Unit Testing

Page 8: AngularJS Weekend Immersive Day #1

Day One Agenda (continue)

Directives

Lab - jQuery UI Widget

Day One Wrap-up

Page 9: AngularJS Weekend Immersive Day #1

Introduction to AngularJS

Page 10: AngularJS Weekend Immersive Day #1

Modern JavaScript Heavy Web Applications

1996 - Microsoft introduces the iframe in IE

1999 -Microsoft introduces the XMLHTTP ActiveX control

2004 - GMail & Kayak, two heavily ajax’ed apps

2005 - Jesse James Garrett’s article coins the phrase AJAX

2006 - Prototype and jQuery released

Page 11: AngularJS Weekend Immersive Day #1

Text

Single Page Applications Explained

Page 12: AngularJS Weekend Immersive Day #1

Early Single Page Apps

Difficult to write

Even worse to maintain and enhance

Broke the back button

Broke web crawlers

Page 13: AngularJS Weekend Immersive Day #1

Frameworks to the rescue

Imposed structure

Included plumbing code

Tested by other developers

Documented

Page 14: AngularJS Weekend Immersive Day #1

Disadvantages of Frameworks

Code bloat

Learning the framework

Page 15: AngularJS Weekend Immersive Day #1

JavaScript MVC Frameworks

Backbone.js

Knockout

EmberJS

http://todomvc.com/

Page 16: AngularJS Weekend Immersive Day #1

Backbone.jsCreated by Jeremy Ashkenas in 2010

19 kb production version (minimized, not gzipped)

One dependency - Underscore.js, optional jQuery

Three core concepts: models, collections, & views

Uses lots of custom events

Page 17: AngularJS Weekend Immersive Day #1

KnockoutCreated by Steve Sanderson in 2010

47 kb production version (minimized, not gzipped)

Uses MVVM pattern

Two way data-binding

No dependencies

Supports all mainstream browsers

Page 18: AngularJS Weekend Immersive Day #1

EmberCreated by Yehuda Katz and Tom Dale in 2011

Convention over configuration

Ember Data, a separate package, handles RESTful data

Handlebars.js, a separate package, handles templates

337 kb production version (minimized, not gzipped)

Page 19: AngularJS Weekend Immersive Day #1

Other frameworksDojo

YUI

Agility.js

Knockback.js

CanJS

Maria

Polymer

React

cujoJS

Montage

Sammy.js

Stapes

Batman.js

http://todomvc.com/

Page 20: AngularJS Weekend Immersive Day #1

AngularJSCreated by Miško Hevery and Adam Abrons in 2009

JavaScript MVC

106 kb production version (minimized, not gzipped)

Declarative programming for UI

Imperative programming for business logic

Page 21: AngularJS Weekend Immersive Day #1

How popular is AngularJS?

Page 22: AngularJS Weekend Immersive Day #1
Page 23: AngularJS Weekend Immersive Day #1
Page 24: AngularJS Weekend Immersive Day #1

CodePenCodePen is a playground for front end web programming

It allows us to concentrate on learning Angular and not on setting up web dev tools

Individual samples are called “pens”

http://codepen.io/collection/sIaCb/

https://bitly.com/bundles/rockncoder/8

Page 25: AngularJS Weekend Immersive Day #1

Lab: CodePen

Simple test to make sure we are all able to access

Go to http://codepen.io/collection/sIaCb/

The URL is case sensitive

Find the “Hello-AngularJS” pen

Run it

Page 26: AngularJS Weekend Immersive Day #1

Lab: jQuery Data Binding

Open the pen, “Start-jQuery-Binding”

Add code to the JavaScript to enable binding between the input and span tags

Each time the user types a letter it should appear in the span tag

Page 27: AngularJS Weekend Immersive Day #1

jQuery Example<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Binding jQuery Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/jquery-1.11.1.min.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" id="firstName"/> <hr/> <p>Hello <span id="showName"></span>,<br/>Have a nice day!</p> </div> <script type="text/javascript"> $( document ).ready( function(){ $('#firstName').on("keyup", function(evt){ $('#showName').text(this.value); }); }); </script></body></html>

Page 28: AngularJS Weekend Immersive Day #1

AngularJS Example<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" ng-model="userName"/> <hr/> <p>Hello {{userName}},<br/>Have a nice day!</p> </div></body></html>

Page 29: AngularJS Weekend Immersive Day #1

Lab: Two Way Data Binding

Use what you’ve just learned

Add a second input type text

Wire the two boxes and the span tag together

Page 30: AngularJS Weekend Immersive Day #1

Two-way Data Binding<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body><div class="container" > <h1>Greet-o-matic</h1> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="Enter name here"/> </div> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="or over here"/> </div> <hr/> <p>Hello <span>{{userName}}</span>,<br/>Have a nice day!</p></div></body></html>

Page 31: AngularJS Weekend Immersive Day #1

AngularJS Key Features

MVC

HTML Templates

Dependency Injection

Deep Linking

Directives

Page 32: AngularJS Weekend Immersive Day #1

Model View Controller

The model contains data representing the current

The view displays the data to the user

The controller manages the relationship between the two

Page 33: AngularJS Weekend Immersive Day #1

HTML Templates

Just HTML documents

No new syntax to learn

No pre-processors

Can be written to pass HTML validators

Page 34: AngularJS Weekend Immersive Day #1

Dependency Injection

You already know it, it is really just passing parameters to a function

Encourages writing code which describes its dependencies

Can pass a mock object for the real thing

Page 35: AngularJS Weekend Immersive Day #1

Deep Linking

Doesn't break the back button

User can bookmark and share application state

Page 36: AngularJS Weekend Immersive Day #1

Directives

The best feature of AngularJS

Allows HTML to be extended

Create custom DOM elements

DOM transformation engine

Page 37: AngularJS Weekend Immersive Day #1

Module

A container for different parts of your app

Most apps will have one module

Most 3rd party libraries will come with their own

Can create extra modules for more complex apps via JavaScript

Page 38: AngularJS Weekend Immersive Day #1

Modules from ng team

ng - core

ngRoute

ngAnimate

ngResource

ngCookies

ngTouch

ngSanitize

ngMock

Page 39: AngularJS Weekend Immersive Day #1

Dependency InjectionA software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle

Allows a dependency to be passed to an object

Allows code to clearly state dependencies

Leads to code which is easier to debug and test

Makes it possible to minimize apps without breaking them

Page 40: AngularJS Weekend Immersive Day #1

Dependency InjectionThe DI pattern in AngularJS looks funky due to JavaScript’s shortcomings

The pattern is name of module, dot, name of provider, name of object, an array with the list of dependencies in strings and a function as the last item in the array

tempApp.controller('CurrentCtrl', ['$scope', function ($scope) { $scope.temp = 17; }]);

Page 41: AngularJS Weekend Immersive Day #1

Data Binding

In Angular, binding is built into the framework

Replaces text content of HTML element with the value of the expression

{{ expression }}

<ANY ng-bind=“expression”>…</ANY>

<ANY class=“ng-bind: expression;”>…</ANY>

Page 42: AngularJS Weekend Immersive Day #1

ng-app

Declares the boundary of an Angular app

The first ng-app found will be auto-bootstrapped

ng-app can optionally name a module

Can encompass the entire page <html ng-app>

Or only part of it, <div ng-app>

Page 43: AngularJS Weekend Immersive Day #1

ng-bind vs ng-modelng-bind is one way data binding, aka output

ng-bind renders a property on scope

ng-bind has a shortcut, {{expression}}

ng-bind is preferred over shortcut

ng-model is for two-way data binding

ng-model is intended for form elements

Page 44: AngularJS Weekend Immersive Day #1

$scopeAn object which refers to the application model

The glue between the controller and the view

The execution context for expressions

Provides APIs

$watch - observes model

$apply - propagates model changes to Angular

Page 45: AngularJS Weekend Immersive Day #1

Filters

Used to format data displayed to user

Strictly front-end, doesn’t change model data

Accessible using declarative or imperative syntax

{{ expression [| filter_name[:parameter_value] ... ] }}

$scope.originalText = 'hello';$scope.filteredText = $filter('uppercase')($scope.originalText);

Page 46: AngularJS Weekend Immersive Day #1

A tour of built-in filterscurrency

date

json

lowercase

uppercase

number

filter

limitTo

orderBy

Page 47: AngularJS Weekend Immersive Day #1

Directives

Markers on a DOM element that attach a behavior to it

Can be an attribute, element name, comment, or CSS

The HTML compiler traverses the DOM at bootstrap and matches directives to DOM elements

Page 48: AngularJS Weekend Immersive Day #1

Directives Names<div timePicker></div>

<div time-picker></div>

<div time:picker></div>

<div time_picker></div>

<div x-time-picker></div>

<div data-time-picker></div>

Page 49: AngularJS Weekend Immersive Day #1

Directive Location

Tag name: <timePicker></timePicker>

Attribute: <div data-rnc-time-picker></div>

Class: <div class=“time-picker;”></div>

Comment: <!— directive:time-picker —>

Page 50: AngularJS Weekend Immersive Day #1

Built-in Directives

ng-app

ng-bind

ng-controller

ng-href

ng-readonly

ng-repeat

ng-src

ng-submit

ng-transclude

ng-view

Page 51: AngularJS Weekend Immersive Day #1

Lab: ToDo App

Page 52: AngularJS Weekend Immersive Day #1

Lab: Using Filters

Page 53: AngularJS Weekend Immersive Day #1

Building custom filterstempApp.filter('minimum', [function () { return function (arrTemp, minimum) { var filteredArray = []; var min = minimum ? minimum : 15; angular.forEach(arrTemp, function (value, key) { if (value.temp >= min) filteredArray.push(value); }); return filteredArray; }; }]);

Page 54: AngularJS Weekend Immersive Day #1

Lab: Contacts App

Page 55: AngularJS Weekend Immersive Day #1

Day One: Summary