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-072515

559 views

Published on

AngularJS introduction for the TacomaJS meetup on 7/25/15

Published in: Software
  • Be the first to comment

  • Be the first to like this

Meetup-js-072515

  1. 1. Angular JS 7/25/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 7/25/2015 2parish.saintpats.org kofc809.org
  3. 3. Angular JS HTML enhanced for web apps! 7/25/2015 3parish.saintpats.org kofc809.org Moderator: Joe Devlin
  4. 4. Angular JS HTML enhanced for web apps! 7/25/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 7/25/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. 7/25/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. 7/25/2015 7parish.saintpats.org kofc809.org
  8. 8. Time management 7/25/2015 8parish.saintpats.org kofc809.org Present Code Discuss
  9. 9. Rest Rooms • Down the hall past the fireside room 7/25/2015 9parish.saintpats.org kofc809.org
  10. 10. Upcoming events 7/25/2015 10parish.saintpats.org kofc809.org • 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.
  11. 11. 7/25/2015 11parish.saintpats.org kofc809.org Schedule 0830-0845 Set-up laptops, coffee tea and pastries 0845-0900 Introduce ourselves 0900-0920 Workspace setup, 0920-1050 Angular prerequisites 1050-1115 x 1115-1130 x
  12. 12. Rest Rooms • Down the hall past the fireside room 7/25/2015 12parish.saintpats.org kofc809.org
  13. 13. Engagement 7/25/2015 13parish.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.
  14. 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 14parish.saintpats.org kofc809.org
  15. 15. Take away for today 7/25/2015 15parish.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
  16. 16. Setup for today 7/25/2015 16parish.saintpats.org kofc809.org • AngularJS.org • https://github.com/angular/angular.js/wiki • Curran: Intro To Angular -> on github • Reference • AngularJS by Example - Paktpub
  17. 17. Setup for today 7/25/2015 17parish.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
  18. 18. Angular Prerequisites: Object Oriented Understanding 7/25/2015 18parish.saintpats.org kofc809.org 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){ });
  19. 19. Angular Prerequisites: Understanding Scope (and Closure?) 7/25/2015 19parish.saintpats.org kofc809.org 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; } } }
  20. 20. Angular Prerequisites: Understanding Scope (and Closure?) 7/25/2015 20parish.saintpats.org kofc809.org JavaScript adding a method to an object with 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
  21. 21. Angular Prerequisites: Understanding Scope (and Closure?) 7/25/2015 21parish.saintpats.org kofc809.org 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
  22. 22. Angular Prerequisites: Understanding Scope (and Closure?) 7/25/2015 22parish.saintpats.org kofc809.org 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
  23. 23. Angular Prerequisites: Understanding Model, View Controller MVC 7/25/2015 23parish.saintpats.org kofc809.org Reference: [1] wikipedia.org/ model view controller $scope model view user controller HTML Data Definition + rules code
  24. 24. Angular Prerequisites: Understanding Model, View Controller MVC 7/25/2015 24parish.saintpats.org kofc809.org 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-mvc https://teamtreehouse.com/library/angularjs/mvc-frameworks-in-angularjs/what-is-an-mvc
  25. 25. Clone ‘Angular by Example’ 7/25/2015 25parish.saintpats.org kofc809.org 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
  26. 26. Branches of ‘Angular by Example’ 7/25/2015 26parish.saintpats.org kofc809.org 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
  27. 27. Branches of ‘Angular by Example’ 7/25/2015 27parish.saintpats.org kofc809.org 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
  28. 28. ‘Angular by Example’ – Guess the Number 7/25/2015 28parish.saintpats.org kofc809.org 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
  29. 29. That all folks ! 7/25/2015 29parish.saintpats.org kofc809.org • Thank you for attending the meetup.

×