Downloaded 91 times
Uploaded byAlexandre Marreiros
Get satrted angular js
This document outlines an agenda for a workshop on getting started with Angular. The agenda includes discussing the state of web development, an introduction to Angular, building Angular applications using fundamental blocks like expressions, directives, and scopes. It also covers controllers, modules, directives, views, services, routing, and communication with events. The workshop aims to help participants learn Angular fundamentals through examples, exercises and addressing common issues.
More Related Content
![[Ebooks PDF] download AngularJS 1st Edition Brad Green full chapters](https://cdn.slidesharecdn.com/ss_thumbnails/18713-241217213105-de1012ed-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Alexandre Marreiros
Get satrted angular js
- 1. WorkShop Getting Start With ANGULAR 2015,Alexandre Marreiros
- 2. 2015 Alexandre Marreiros About You Present Yourself Tellus what brings you here What you want to take WorkShoprGettingStartWith ANGULAR Startatsv.com
- 3. 2015 Alexandre Marreiros About CTO @ Innovagency TechnicalTrainer, 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 Platform MCPD Alexandre Marreiros Contacts: amarreiros@innovagency.com / amarreiros@gmail.com @alexmarreiros http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21 www.digitalmindignition.com WorkShoprGettingStartWith ANGULAR
- 4.
- 5.
- 6.
- 7. 2015 Alexandre Marreiros Agenda WorkShoprGettingStartWith ANGULAR # 1 Stateof the Web Development #2 What’s Angular JS #3 Building Blocks #4 Controllers and Modules #5 Directives and Views
- 8. 2015 Alexandre Marreiros Agenda WorkShoprGettingStartWith ANGULAR #6 Services #7 Routing #8Comunication With Events
- 9. State Of theArt 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR JavaScript Challenge Cross Browsing Helpon Responsive Behaviour Help With Async Ritch Client Interface Data Exploring on client Operating System Native Action
- 17. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR JavaScript Story Not TypeSafe Based on a Old Standard Functional based Written in 2 Weeks Uncopled from modern Web Expensive learning curve Big Investement
- 18. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Angular Written by MiskoHevery “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.
- 20.
- 21.
- 22. 2015 Alexandre Marreiros Start Engines WorkShoprGettingStartWith ANGULAR <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"> </script> <bodyng-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 * Ng is the short name for angular, this directive tell that this area is controlled by Angular
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. 2015 Alexandre Marreiros Plunker is madewith AngularJS WorkShoprGettingStartWith ANGULAR Our example live editor to build our demos are also build with Angular
- 29.
- 30.
- 31.
- 32. 2015 Alexandre Marreiros Code Reduction andreusage WorkShoprGettingStartWith ANGULAR Pluralsight.com 80% to 90%
- 33. 2015 Alexandre Marreiros Data Binding WorkShoprGettingStartWith ANGULAR Pluralsight.com Forms (validationand save) One Way Binding Two Way Binding Optimized Support out of the box
- 34. 2015 Alexandre Marreiros Includes all themajor features of webapps WorkShoprGettingStartWith ANGULAR
- 35. 2015 Alexandre Marreiros Support for accebility WorkShoprGettingStartWith ANGULAR Usingthe directive ng-area to develop future on the workshop
- 36. 2015 Alexandre Marreiros Strong communitie andPopular WorkShoprGettingStartWith ANGULAR
- 37.
- 38.
- 39. 2015 Alexandre Marreiros JavaScript Patterns WorkShoprGettingStartWith ANGULAR Functions andAbstrations Functions to build Modules Functions as variables Functions as modelation methods Abstract Functions
- 40.
- 41.
- 42. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Single Page APP “Whydo 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
- 43.
- 44.
- 45.
- 46.
- 47. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Controllers Controller directive inHTML (ng-controller) Controller will be a function that Angular invokes Controller takes a $scope parameter Attach model to $scope
- 48.
- 49.
- 50. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Controllers $scope: “Scopes provide asingle 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.”
- 51.
- 52.
- 53. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Directives “Directives are theheart and soul of Angular.” https://docs.angularjs.org/guide/directive
- 54.
- 55.
- 56. Demo / Exercises TrainingAngular 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Experiment Directives on your own Showing common bugs Showing api documentation problems Show the different discussed Javascript patterns aplied in Angular development
- 57.
- 58. Feel free toput your Questions now Or if you prefer use one off my contacts @alexmarreiros amarreiros@gmail.com amarreiros@innovagency.com 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Questions
Editor's Notes
- #23 Ng-app is named the application directive and represents a area that is controlled by the Angular Technology, you only had one application definition with angular on a page. Angular only control this area. When you had the included script and it is detected this deirective Angular bootstrap himself to that area.
- #25 Real time editor http://plnkr.co/
- #26 Real time editor http://plnkr.co/
- #27 Real time editor http://plnkr.co/
- #28 Real time editor http://plnkr.co/
- #29 Real time editor http://plnkr.co/
- #32 Real time editor http://plnkr.co/
- #33 Real time editor http://plnkr.co/
- #34 Real time editor http://plnkr.co/
- #35 The library includes routing doom handle, ajax technics, binding in two ways service consumption API
- #40 Real time editor http://plnkr.co/
- #44 A arvore de DOM surge com base de qualquer aplicação web e no casoi das SPA não é excessão, é aqui que se encontram registados as diferentes tags que constutuem as fundações HTML da aplicação. O Model representa o dominio dos dados apresentados e permitem uma abordagem content/ data centric. A View representa essencialmente a iterfce com o utilizador e reflete os conteudos/dados presentes no Modelo da aplicação. Para uma descrição mais detalhada e aprofundar os temas relaccionados com SPA sugerimos a consulta do seguinte post: https://blog.svpino.com/2014/10/15/is-a-single-page-application-what-you-really-need
- #48 Controllers are in charge of a part of a page