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.

Quick View of Angular JS for High School

399 views

Published on

A presentation used in a class to teach the basic pilars off how to learn, and how to start working with Angular JS to HighSchool and pre university students

Published in: Technology
  • Be the first to comment

Quick View of Angular JS for High School

  1. 1. Nome do Documento / Cliente / 04.03.16 / 11Nome do Documento / Cliente / 04.03.16 2015 WorkShop Getting Start With Angular Alexandre Marreiros
  2. 2. Nome do Documento / Cliente / 04.03.16 / 22Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular ABOUT YOU Present Yourself Tell us what brings you here What you want to take Startatsv.com
  3. 3. Nome do Documento / Cliente / 04.03.16 / 33Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular ABOUT • CTO @ Innovagency • Technical Trainer, Speaker & Consultant as Self Employee • Lecturer @ EDIT • Software Developer & Architect as Consultant • Tech Writer and Reviewer as Self Employee • Digital Technical UX Consultant • Microsoft DevCamp Trainer • Microsoft Most Valuable Professional for Windows Platfor • MCPD Alexandre Marreiros Contacts: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre- marreiros/8/4b8/a21 www.digitalmindignition.com
  4. 4. Nome do Documento / Cliente / 04.03.16 / 44Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. FUNDAMENTALS
  5. 5. Nome do Documento / Cliente / 04.03.16 / 55Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Agenda Fundamental Angular Blocks: Expressions Directives Scopes
  6. 6. Nome do Documento / Cliente / 04.03.16 / 66Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. AGENDA
  7. 7. Nome do Documento / Cliente / 04.03.16 / 77Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Agenda # 1 State of the Web Development #2 What’s Angular JS #3 Building Blocks #4 Controllers and Modules #5 Directives and Views
  8. 8. Nome do Documento / Cliente / 04.03.16 / 88Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Agenda #6 Services #7 Routing #8 Comunication With Events
  9. 9. Nome do Documento / Cliente / 04.03.16 / 99Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. STATE OF THE ART
  10. 10. Nome do Documento / Cliente / 04.03.16 / 1010Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular
  11. 11. Nome do Documento / Cliente / 04.03.16 / 1111Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular
  12. 12. Nome do Documento / Cliente / 04.03.16 / 1212Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular
  13. 13. Nome do Documento / Cliente / 04.03.16 / 1313Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular
  14. 14. Nome do Documento / Cliente / 04.03.16 / 1414Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. INTRODUCTION
  15. 15. Nome do Documento / Cliente / 04.03.16 / 1515Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular
  16. 16. Nome do Documento / Cliente / 04.03.16 / 1616Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular JavaScript Challenge Cross Browsing Help on Responsive Behaviour Help With Async Ritch Client Interface Data Exploring on client Operating System Native Action
  17. 17. Nome do Documento / Cliente / 04.03.16 / 1717Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular JavaScript Challenge Not Type Safe Based on a Old Standard Functional based Written in 2 Weeks Uncopled from modern Web Expensive learning curve Big Investement
  18. 18. Nome do Documento / Cliente / 04.03.16 / 1818Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Angular Written by Misko Hevery “With the intent to extend HTML Acording to standards and good pratices. Allow tohave ritch components that help reach data and have data driven event handling”
  19. 19. Nome do Documento / Cliente / 04.03.16 / 1919Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Angular atual HeadQuarter Angularjs.org
  20. 20. Nome do Documento / Cliente / 04.03.16 / 2020Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Angular Future Angular.io
  21. 21. Nome do Documento / Cliente / 04.03.16 / 2121Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. START ENGINES
  22. 22. Nome do Documento / Cliente / 04.03.16 / 2222Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Start Engines <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"> </script> <body ng-app> <!-- Other examples in this chapter will be inserted here. --> </body> Include Angular on Project Define Angular Boundaries * There are no dependicies to other script files all the Angular Core is here
  23. 23. Nome do Documento / Cliente / 04.03.16 / 2323Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. FIRST DEMOS
  24. 24. Nome do Documento / Cliente / 04.03.16 / 2424Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Binding Boxes
  25. 25. Nome do Documento / Cliente / 04.03.16 / 2525Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular ShowCase
  26. 26. Nome do Documento / Cliente / 04.03.16 / 2626Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Plunker is made with AngularJS Our example live editor to build our demos are also build with Angular
  27. 27. Nome do Documento / Cliente / 04.03.16 / 2727Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. DEVELOPMENT ENVIROMENT
  28. 28. Nome do Documento / Cliente / 04.03.16 / 2828Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. ANGULAR USAGE BENEFITS
  29. 29. Nome do Documento / Cliente / 04.03.16 / 2929Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Development time reduction
  30. 30. Nome do Documento / Cliente / 04.03.16 / 3030Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Code Reduction and Reusage 80% to 90%
  31. 31. Nome do Documento / Cliente / 04.03.16 / 3131Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Data Binding Forms (validation and save) One Way Binding Two Way Binding Optimized Support out of the box
  32. 32. Nome do Documento / Cliente / 04.03.16 / 3232Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Includes all the major features of webapps
  33. 33. Nome do Documento / Cliente / 04.03.16 / 3333Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Support for accebility Using the directive ng-area to develop future on the workshop
  34. 34. Nome do Documento / Cliente / 04.03.16 / 3434Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Strong Communitie and Popular Strong communitie and Popular
  35. 35. Nome do Documento / Cliente / 04.03.16 / 3535Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Unit Tests Ready Strong communitie and Popular
  36. 36. Nome do Documento / Cliente / 04.03.16 / 3636Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. JAVASCRIPT PATTERNS & PRATICES
  37. 37. Nome do Documento / Cliente / 04.03.16 / 3737Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular JavaScript Patterns Functions and Abstrations Functions to build Modules Functions as variables Functions as modelation methods Abstract Functions
  38. 38. Nome do Documento / Cliente / 04.03.16 / 3838Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. PATTERN DEMOS
  39. 39. Nome do Documento / Cliente / 04.03.16 / 3939Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Single Page APP “Why do we want to write single page apps? The main reason is that they allow us to offer a more-native-app-like experience to the user.” From SinglePageAppBook
  40. 40. Nome do Documento / Cliente / 04.03.16 / 4040Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular SPA
  41. 41. Nome do Documento / Cliente / 04.03.16 / 4141Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. CONTROLLERS
  42. 42. Nome do Documento / Cliente / 04.03.16 / 4242Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular MVC
  43. 43. Nome do Documento / Cliente / 04.03.16 / 4343Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular MVM
  44. 44. Nome do Documento / Cliente / 04.03.16 / 4444Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Controllers Controller directive in HTML (ng-controller) Controller will be a function that Angular invokes Controller takes a $scope parameter Attach model to $scope
  45. 45. Nome do Documento / Cliente / 04.03.16 / 4545Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Controllers
  46. 46. Nome do Documento / Cliente / 04.03.16 / 4646Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Controllers
  47. 47. Nome do Documento / Cliente / 04.03.16 / 4747Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Controllers “Scopes provide a single source of truth within your application. The idea is that no matter in how many places you display some data in your view layer, you should only have to change it in one place (a scope property), and the change should automatically propagate throughout the view.” $scope:
  48. 48. Nome do Documento / Cliente / 04.03.16 / 4848Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Controllers Multiple controllers Complex objects Nest controllers
  49. 49. Nome do Documento / Cliente / 04.03.16 / 4949Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. DIRECTIVES
  50. 50. Nome do Documento / Cliente / 04.03.16 / 5050Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Directives “Directives are the heart and soul of Angular.” https://docs.angularjs.org/guide/directive
  51. 51. Nome do Documento / Cliente / 04.03.16 / 5151Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Directives
  52. 52. Nome do Documento / Cliente / 04.03.16 / 5252Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Directives http://www.cheatography.com/proloser/cheat-sheets /angularjs/
  53. 53. Nome do Documento / Cliente / 04.03.16 / 5353Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. CONSUMING WEBAPis JASON BASED
  54. 54. Nome do Documento / Cliente / 04.03.16 / 5454Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular http service Services consumption is made using a promise approach, in the case off the http, we have a method representing each verb. We have also a response explaining if the http call had been succeeded or not. Next we will analysis the 2 fundamental verbs post and get
  55. 55. Nome do Documento / Cliente / 04.03.16 / 5555Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular http service $http.get('/someUrl'). success(function(data, status, headers, config) { // tis callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. }); Get method
  56. 56. Nome do Documento / Cliente / 04.03.16 / 5656Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular http service Post method $http.post('/someUrl‘,{msg:’hi there’}). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
  57. 57. Nome do Documento / Cliente / 04.03.16 / 5757Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. Demo Create a SPA that consumes GitHub page
  58. 58. Nome do Documento / Cliente / 04.03.16 / 5858Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. DEMO / EXERCISES TRAINING ANGULAR Experiment Directives on your own Showing common bugs Showing api documentation problems Show the different discussed Javascript patterns aplied in Angular development
  59. 59. Nome do Documento / Cliente / 04.03.16 / 5959Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WRAPUP
  60. 60. Nome do Documento / Cliente / 04.03.16 / 6060Nome do Documento / Cliente / 04.03.16 Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma. WorkShop – Getting Start With Angular Questions Feel free to put your Questions now Or if you prefer use one off my contacts @alexmarreiros amarreiros@gmail.com amarreiros@innovagency.com www.digitalmindignition.com
  61. 61. Nome do Documento / Cliente / 04.03.16 / 6161Nome do Documento / Cliente / 04.03.16

×