Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup-js-112815

416 views

Published on

Angular JS - session 02. Setup a localhost . Review code screencsa

Published in: Software
  • Be the first to comment

  • Be the first to like this

Meetup-js-112815

  1. 1. Angular JS – S02 11/28/2015 1parish.saintpats.org kofc809.org
  2. 2. Angular JS HTML enhanced for web apps! Today’s Event hosts • St. Patrick’s Church & School - Tacoma • Knights of Columbus Tacoma Council 809 11/28/2015 2parish.saintpats.org kofc809.org
  3. 3. Angular JS HTML enhanced for web apps! 11/28/2015 3parish.saintpats.org kofc809.org Moderator: Joe Devlin
  4. 4. Angular JS HTML enhanced for web apps! 11/28/2015 4parish.saintpats.org kofc809.org Easy access to this slideshow and links at: http://vividventures.biz/d/?q=javascript
  5. 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 1892 o Aligned with St. Patrick’s Catholic School link o Reference: The Bible API o 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-6 strengthsfinder.com 11/28/2015 5parish.saintpats.org kofc809.org
  6. 6. A word from our hosts • Knights of Columbus www.kofc.org o Founded in 1882 o 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 6parish.saintpats.org kofc809.org
  7. 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. 11/28/2015 7parish.saintpats.org kofc809.org
  8. 8. Time management 11/28/2015 8parish.saintpats.org kofc809.org Present Code Discuss
  9. 9. Rest Rooms • Down the hall past the fireside room 11/28/2015 9parish.saintpats.org kofc809.org
  10. 10. 11/28/2015 10parish.saintpats.org kofc809.org Schedule 0830-0845 Set-up laptops, coffee tea and pastries 0845-0900 Introduce ourselves 0900-0920 Workspace setup 0920-0950 Angular prerequisites 0950-1100 Intro to Angular by Curran (video) 1100-1130 Example collections on codepen.io
  11. 11. Engagement 11/28/2015 11parish.saintpats.org kofc809.org • 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.
  12. 12. 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 12parish.saintpats.org kofc809.org
  13. 13. Take away for today 11/28/2015 13parish.saintpats.org kofc809.org • Pierce County Library apply o Teamtreehouse.com o https://teamtreehouse.com/gateways/pierce_county_public_library/signup o Why? Teachable, repeatable, powerful
  14. 14. Take away for today 11/28/2015 14parish.saintpats.org kofc809.org 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
  15. 15. Setup for today 11/28/2015 15parish.saintpats.org kofc809.org • 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
  16. 16. Setup for today 11/28/2015 16parish.saintpats.org kofc809.org • 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
  17. 17. Setup for today 11/28/2015 17parish.saintpats.org kofc809.org • Review S01 slideshare -> meetupjs072515 • Inheritance syntax - slide 18 • $scope – a big ol’ global object – slides 19-22 • Model, View, Controller – slide 23
  18. 18. Angular Prerequisites: A local web server for testing your pages 11/28/2015 18parish.saintpats.org kofc809.org Tornado Siren II – link You will need a local web server!
  19. 19. Angular Prerequisites: A local web server for testing your pages 11/28/2015 19parish.saintpats.org kofc809.org 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/ds B. PS C: powershell -ExecutionPolicy ByPass -File ds.ps1
  20. 20. Angular Prerequisites: A local web server for testing your pages 11/28/2015 20parish.saintpats.org kofc809.org Reference: 1. SO LINK -> 2. https://github.com/indexzero/http-server 3. 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
  21. 21. ‘Intro To Angular’ by Curran 11/28/2015 21parish.saintpats.org kofc809.org 1. On Github search for ‘introToAngular’. A. https://github.com/curran/screencasts/tree/gh- pages/introToAngular B. 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
  22. 22. Example collections on codepen.io 11/28/2015 22parish.saintpats.org kofc809.org 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
  23. 23. Debbuging Techniques 11/28/2015 23parish.saintpats.org kofc809.org 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 be 3. 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 assertions 7. Write test cases 8. Write down expected actions 9. Listen to small doubts Reference: 1. http://ericlippert.com/2014/03/05/how-to-debug-small-programs/
  24. 24. Debugging Techniques – Mind Map 11/28/2015 24parish.saintpats.org kofc809.org Reference: 1. http://ericlippert.com/2014/03/05/how-to-debug-small-programs/ 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
  25. 25. Debugging Techniques – Mind Map 11/28/2015 25parish.saintpats.org kofc809.org Reference: 1. http://ericlippert.com/2014/03/05/how-to-debug-small-programs/  The fixed version ->
  26. 26. That all folks ! 11/28/2015 26parish.saintpats.org kofc809.org • Thank you for attending the meetup.

×