Meetup-js-112815

parish.saintpats.org kofc809.org 1

Angular JS – S02

11/28/2015


Angular JSHTML enhanced for web apps!

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

11/28/2015



11/28/2015

Moderator: Joe Devlin



11/28/2015

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

http://vividventures.biz/d/?q=javascript


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

11/28/2015

http://www.saintpats.org/school/

http://labs.bible.org/api_web_service


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.

11/28/2015

http://www.kofc.org/

http://www.kofc.org/un/en/prolife/ultrasound/

http://4us.org/


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.

11/28/2015


Time management

11/28/2015

PresentCodeDiscuss


Rest Rooms• Down the hall past the fireside room

11/28/2015

parish.saintpats.org kofc809.org 1011/28/2015

Schedule0830-0845 Set-up laptops, coffee tea and pastries0845-0900 Introduce ourselves0900-0920 Workspace setup0920-0950 Angular prerequisites0950-1100 Intro to Angular by Curran (video)1100-1130 Example collections on codepen.io


Engagement

11/28/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.


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

11/28/2015


Take away for today

11/28/2015

• Pierce County Library applyo Teamtreehouse.com

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

o Why? Teachable, repeatable, powerful

http://www.piercecountylibrary.org/

http://www.piercecountylibrary.org/services/library-card/apply-online.htm

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

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


Take away for today

11/28/2015

o Teamtreehouse.com https://teamtreehouse.com/library/building-with-angularjs-and-apis-2

o a previous course: https://teamtreehouse.com/library/angularjs.rss?feed_token=dcdc11bc-e763-4373-8afe-3f6e44b888c9

https://teamtreehouse.com/library/building-with-angularjs-and-apis-2



https://teamtreehouse.com/library/angularjs.rss?feed_token=dcdc11bc-e763-4373-8afe-3f6e44b888c9




Setup for today

11/28/2015

• AngularJS.org• https://github.com/angular/angular.js/wiki• Curran: Intro To Angular -> on github • Coyier: collections -> on codepen • Reference • AngularJS – O’Reilly•AngularJS by Example - Paktpub

https://angularjs.org/

https://github.com/angular/angular.js/wiki/Understanding-Scopes

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

http://codepen.io/collection/aFsqL/

http://shop.oreilly.com/product/0636920028055.do

https://www.packtpub.com/web-development/angularjs-example


Setup for today

11/28/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

https://github.com/

http://codepen.io/

http://www.it-ebooks.info/

http://it-ebooks.info/book/919/

http://it-ebooks.info/book/919/

http://git-scm.com/doc


Setup for today

11/28/2015

• Review S01 slideshare -> meetupjs072515• Inheritance syntax - slide 18 • $scope – a big ol’ global object – slides 19-22• Model, View, Controller – slide 23

http://www.slideshare.net/JoeDevlin2/meetupjs072515


Angular Prerequisites: A local web server for testing your pages

11/28/2015

Tornado Siren II – link

You will need a local web server!

http://soundbible.com/1937-Tornado-Siren-II.html



11/28/2015

1. At the command prompt, in the directory-under-test start a local server with python:

A. $ python –m SimpleHTTPServer 8889

2. Or in Windows start a local server with a powershell script:A. Download and setup from a Chinese coder:

https://github.com/straightdave/dsB. PS C:\ powershell -ExecutionPolicy ByPass -File ds.ps1

https://github.com/straightdave/ds



11/28/2015

Reference: 1. SO LINK -> 2. https://github.com/indexzero/http-server3. or node-js simple web server with express

3. Or as a nodeJS server [2] :

Type at the command prompt $: $ npm install http-server –g $ cd my_App_directory $ http-server

In browser URL field: localhost:8080/page_under_test.html

http://stackoverflow.com/questions/6084360/using-node-js-as-a-simple-web-server

https://www.nostarch.com/oojs

https://github.com/indexzero/http-server

https://github.com/indexzero/http-server

http://www.mfranc.com/node-js/node-js-simple-web-server-with-express/




‘Intro To Angular’ by Curran

11/28/2015

1. On Github search for ‘introToAngular’.A. https://

github.com/curran/screencasts/tree/gh-pages/introToAngularB. exampleViewer start at example 7 C. You tube video start at example 7

2. Note that the examples declare the angular application boundaries with <body ng-app >, alternately the app may need to be defined inside <div ng-app > [1] when some other app is managing the DOM, such as in codepen.io .

3. Note where the angular script is added to the web page matters. Some examples introduce angular in the <head>, while others only function while at the bottom of the page ->.

Reference: 1. AngularJS – O’Reilly p. 12



http://curran.github.io/screencasts/introToAngular/exampleViewer

https://www.youtube.com/watch?v=TRrL5j3MIvo&feature=youtu.be

http://codepen.io/NorthDecoder/pen/yYrvJa



Example collections on codepen.io

11/28/2015

It easier to understand code written one line at time in a video. What about reading some existing code?

1. On codepen.io (or on sitecomber.com) search for ‘Introduction To Angular’. A. http://codepen.io/collection/aFsqL/

a) A simple color picker ->b) Filtering -> complete with a bug that needs fixing

Reference: 1. AngularJS – O’Reilly p. 12

http://sitecomber.com/

http://codepen.io/collection/aFsqL/

http://codepen.io/rewfergu/pen/wbLrm

http://codepen.io/spiralx/pen/rgtsG



Debbuging Techniques

11/28/2015

Eric Lipperts blog on debugging. 5-Mar 2014

1. Read the error log first!2. Discuss the problem with a rubber duck

a) Mind map of what the problem could be3. Break your code into smaller methods with exactly one logical

operation.4. Write a tech spec for each method.5. Check pre and post conditions for every method.6. Write assertions7. Write test cases8. Write down expected actions9. Listen to small doubts

Reference: 1. http://ericlippert.com/2014/03/05/how-to-debug-small-programs/

http://ericlippert.com/2014/03/05/how-to-debug-small-programs/




Debugging Techniques – Mind Map

11/28/2015


HTML •The button dropdown is not working …•Oh it’s in jade, what’s jade?

CSS •What CSS libraries are added?

JS •Is it the custom JS, or added libs that are not working?•What about dependencies (pre or post conditions)?

Pen •Does the code work outside of codepen.io?

SO •Google the problem to see if it is mentioned on Stackoverflow




Debugging Techniques – Mind Map

11/28/2015


The fixed version ->



http://codepen.io/NorthDecoder/pen/gaNVKx


That all folks !

11/28/2015

• Thank you for attending the meetup.

Date post:	13-Apr-2017
Category:	Software
Upload:	joe-devlin
View:	351 times
Download:	0 times

Meetup-js-112815

Software