parish.saintpats.org kofc809.org 1

Angular JS

7/25/2015

parish.saintpats.org kofc809.org 2

Angular JSHTML enhanced for web apps!

Today’s Event hosts• St. Patrick’s Church & School - Tacoma• Knights of Columbus Tacoma Council 809

7/25/2015

parish.saintpats.org kofc809.org 3

Angular JSHTML enhanced for web apps!

7/25/2015

Moderator: Joe Devlin

parish.saintpats.org kofc809.org 4

Angular JSHTML enhanced for web apps!

7/25/2015

Easy access to this slideshow and links at:http://vividventures.biz/d/?q=javascript

parish.saintpats.org kofc809.org 5

A word from our hosts•St. Patrick’s Church – Tacoma

o The pastoral council has generously offered us this location for today, as part of the churches community outreach.

o Founded in 1892o Aligned with St. Patrick’s Catholic School linko Reference: The Bible APIo Working on the Engaged Church model

“Growing an Engaged Church” by Albert Winseman, Gallup Press, ISBN 978-1-59562-014-9

o Promoting personal development with Strengths Finder.“Strengths Finder” by Tom Rath, Gallup Press, ISBN 978-1-59562-015-6strengthsfinder.com

7/25/2015

parish.saintpats.org kofc809.org 6

A word from our hosts• Knights of Columbus www.kofc.org

o Founded in 1882o Dedicated to “Saving Lives and Changing Lives”o Promoting strong families through charitable giving and a AAA

rated life insurance and annuity program.o Local projects

Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care & 4US.org, Coats for Kids, Wheelchair Mission.

7/25/2015

parish.saintpats.org kofc809.org 7

Introduction•Joe Devlin - moderator

o Member of St Patrick’s Parish and K of C council 809

o Working as a web host for small to medium sized businesses.

o Interested in Javascript for the obvious reasons that it is a must

for web development, plus for the purposes of getting people

together to code; JS is a universal standard that comes with

freely downloadable browsers and tools. We can easily

collaborate.

7/25/2015

parish.saintpats.org kofc809.org 8

Time management

7/25/2015

Present

Code

Discuss

parish.saintpats.org kofc809.org 9

Rest Rooms• Down the hall past the fireside room

7/25/2015

parish.saintpats.org kofc809.org 10

Upcoming events

7/25/2015

• Thur 27-Aug Javascript programming for beginners - S04• Sat 29-Aug Nodeschool• Thur 24-Sep Javascript programming for beginners - S05• Sat 26-Sep Weatherapp hackathon

• Sat 24-Oct var JavascriptCon = seminars * 8;I need some help marketing and planning this event.

parish.saintpats.org kofc809.org 117/25/2015

Schedule0830-0845 Set-up laptops, coffee tea and pastries0845-0900 Introduce ourselves0900-0920 Workspace setup,0920-1050 Angular prerequisites1050-1115 x1115-1130 x

parish.saintpats.org kofc809.org 12

Rest Rooms• Down the hall past the fireside room

7/25/2015

parish.saintpats.org kofc809.org 13

Engagement

7/25/2015

• To make our meetup more personable I am inviting members to add links to their meetup.com introduction that directly references something related to Javascript or programming for example codepen.io or github.com.

parish.saintpats.org kofc809.org 14

Attendee Introduction• Let each of us introduce ourselves

o My name is ____________. (First name)

o My github username is ______________.

o My codepen username is _____________.

o I (have/have not) updated my meetup profile with above links.

o The editor that I am using today is ____________.

o I am working on a Mac / PC / Linux

7/25/2015

parish.saintpats.org kofc809.org 15

Take away for today

7/25/2015

• Pierce County Library applyo Teamtreehouse.com

o https://teamtreehouse.com/gateways/pierce_county_public_library/signup

o Why? Teachable, repeatable, powerful

parish.saintpats.org kofc809.org 16

Setup for today

7/25/2015

• AngularJS.org• https://github.com/angular/angular.js/wiki• Curran: Intro To Angular -> on github

• Reference • AngularJS by Example - Paktpub

parish.saintpats.org kofc809.org 17

Setup for today

7/25/2015

• Sign up for github if not already registered• Sign up for codepen.io if not already • Reference: • http://www.it-ebooks.info/

• Version control with git

• http://git-scm.com/doc

parish.saintpats.org kofc809.org 18

Angular Prerequisites: Object Oriented Understanding

7/25/2015

Reference: The Principles of Objected Oriented Javascript 2014 edition – No Starch Press p.66

OO is EPIC – Encapsulation, Polymorphism, Inheritance & Composition

AngularJS inheritance syntax is dependent on prototype chaining between objects, which can be discovered by inspecting the source at https://github.com/angular/angular.js/tree/master/src and searching the Angular.js text for ‘prototype’. Understanding prototype chaining helps understand code such as:

angular.module(‘theName') .controller(‘namedController', function($scope){});

parish.saintpats.org kofc809.org 19

Angular Prerequisites: Understanding Scope (and Closure?)

7/25/2015

Reference:‘You Don't Know JS: Scope & Closures’ 2014 edition – Oreilly p.66[2] Lexical scope – wikipedia

Scope – “the scope of a name binding – an association of a name to an entity, such as a variable – is the part of a computer program where the binding is valid: where the name can be used to refer to the entity.” [2]

within code blocks: pen http://codepen.io/NorthDecoder/pen/zGJExJ

at level3, level2 and level1 variables are hidden, at level2, level1 variable is hidden at level1, all variables are within lexical scope

{ var level3=3; { var level2=2; { var level1=1; } }}

parish.saintpats.org kofc809.org 20

Angular Prerequisites: Understanding Scope (and Closure?)

7/25/2015

JavaScript adding a method to an objectwith code : pen http://codepen.io/NorthDecoder/pen/zGJExJ

var object1 = { p1:”property1”, m1:function(){console.log('object1 method1');}}

function addMethodTo(obj){ obj.methodAMT1=function(){//do something;} }

addMethodTo(object1);object1.methodAMT1();//access newly added method

parish.saintpats.org kofc809.org 21

Angular Prerequisites: Understanding Scope (and Closure?)

7/25/2015

Compare previous code to AngularJS snippet, adding a method to an object with code [1]:

function GuessTheNumberController($scope) { $scope.verifyGuess = function () { $scope.deviation = $scope.original - $scope.guess; $scope.noOfTries = $scope.noOfTries + 1; } $scope.initializeGame = function () { $scope.noOfTries = 0; $scope.original = Math.floor((Math.random() * 1000)+ 1); $scope.guess = null; $scope.deviation = null; } $scope.initializeGame();} Reference: [1] AngularJS by Example – Paktpub pg. 12

parish.saintpats.org kofc809.org 22

Angular Prerequisites: Understanding Scope (and Closure?)

7/25/2015

Reference:[1] https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritances

JavaScript Prototypal Inheritance – “see reference” [1]

With snippet : fiddle http://jsfiddle.net/5qjLd/function ParentScope(){ //aString, aNumber, anArray, anObject, aFunction}function ChildScope(){ }ChildScope.prototype = new ParentScope();var childScope = new ChildScope();

https://docs.angularjs.org/guide/scope• Scope Hierarchies

parish.saintpats.org kofc809.org 23

Angular Prerequisites: Understanding Model, View Controller MVC

7/25/2015

Reference: [1] wikipedia.org/ model view controller

$scope

model

view

user

controller

HTML

DataDefinition

+ rules

code

parish.saintpats.org kofc809.org 24

Angular Prerequisites: Understanding Model, View Controller MVC

7/25/2015

Reference: [1] wikipedia.org/ model view controller

“The central component of MVC, the model, captures the behavior of the application in terms of its problem domain, independent of the user interface. The model directly manages the data, logic and rules of the application.

A view can be any output representation of information, such as a chart or a diagram; multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.

The third part, the controller, accepts input and converts it to commands for the model or view.”[1]

Teamtreehouse: what-is-an-mvchttps://teamtreehouse.com/library/angularjs/mvc-frameworks-in-angularjs/what-is-an-mvc

parish.saintpats.org kofc809.org 25

Clone ‘Angular by Example’

7/25/2015

Reference: x

1. On Github search for ‘angularjsbyexample’.

2. On your hard drive make a directory called coding_projects (or whatever you prefer)

3. Open a terminal window and change into that directory.

4. Assuming git is installed, in the terminal window at the command prompt type: git clone https://github.com/chandermani/angularjsbyexample.git

parish.saintpats.org kofc809.org 26

Branches of ‘Angular by Example’

7/25/2015

Reference: x

1. On Github in ‘angularjsbyexample’ note that branches are labeled Checkpoints n.x

2. In your browser just for command reference: http://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell

3. To see a branch history graph(copy and paste:) type at the command prompt: git log --oneline --decorate --graph –al

4. Remember: After exploring to get back to the Master branch type: git checkout master

parish.saintpats.org kofc809.org 27

Branches of ‘Angular by Example’

7/25/2015

1. Take note of the directory structure, ls –al or dir etc.

2. To get to Checkpoint 2 type at command prompt: git checkout 7937575

3. Now note the change in your directory structure caused by changing the branch with git. Switching branches changes files in your working directory!

4. Remember: After exploring to get back to the Master branch type: git checkout master

parish.saintpats.org kofc809.org 28

‘Angular by Example’ – Guess the Number

7/25/2015

1. In your finder or explorer change into the directory “GuessTheNumber”

2. Open the file GuessTheNumber.html in your browser.

3. Play the game for a couple of tries.

4. Open the page source and inspect the code

parish.saintpats.org kofc809.org 29

That all folks !

7/25/2015

• Thank you for attending the meetup.