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.



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


  1. 1. Angular JS – S02 11/28/2015
  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
  3. 3. Angular JS HTML enhanced for web apps! 11/28/2015 Moderator: Joe Devlin
  4. 4. Angular JS HTML enhanced for web apps! 11/28/2015 Easy access to this slideshow and links at:
  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  11/28/2015
  6. 6. A word from our hosts • Knights of Columbus 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 &, Coats for Kids, Wheelchair Mission. 11/28/2015
  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
  8. 8. Time management 11/28/2015 Present Code Discuss
  9. 9. Rest Rooms • Down the hall past the fireside room 11/28/2015
  10. 10. 11/28/2015 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
  11. 11. Engagement 11/28/2015 • To make our meetup more personable I am inviting members to add links to their introduction that directly references something related to Javascript or programming for example or
  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
  13. 13. Take away for today 11/28/2015 • Pierce County Library apply o o o Why? Teachable, repeatable, powerful
  14. 14. Take away for today 11/28/2015 o  o a previous course: -e763-4373-8afe-3f6e44b888c9
  15. 15. Setup for today 11/28/2015 • • • 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 • Sign up for github if not already registered • Sign up for if not already • Reference: • • Version control with git •
  17. 17. 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
  18. 18. Angular Prerequisites: A local web server for testing your pages 11/28/2015 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 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: B. PS C: powershell -ExecutionPolicy ByPass -File ds.ps1
  20. 20. Angular Prerequisites: A local web server for testing your pages 11/28/2015 Reference: 1. SO LINK -> 2. 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 1. On Github search for ‘introToAngular’. A. 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 . 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 11/28/2015 It easier to understand code written one line at time in a video. What about reading some existing code? 1. On (or on search for ‘Introduction To Angular’. A. 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 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.
  24. 24. Debugging Techniques – Mind Map 11/28/2015 Reference: 1. 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 SO • Google the problem to see if it is mentioned on Stackoverflow
  25. 25. Debugging Techniques – Mind Map 11/28/2015 Reference: 1.  The fixed version ->
  26. 26. That all folks ! 11/28/2015 • Thank you for attending the meetup.