Get satrted angular js
•Download as PPTX, PDF•
3 likes•834 views
Slides from my Workshop about how to start with Angular JS
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Get satrted angular js
Similar to Get satrted angular js (20)
More from Alexandre Marreiros
More from Alexandre Marreiros (20)
Recently uploaded
Recently uploaded (20)
Get satrted angular js
- 1. WorkShop Getting Start With ANGULAR 2015, Alexandre Marreiros
- 2. 2015 Alexandre Marreiros About You Present Yourself Tell us what brings you here What you want to take WorkShoprGettingStartWith ANGULAR Startatsv.com
- 3. 2015 Alexandre Marreiros 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 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
- 7. 2015 Alexandre Marreiros Agenda WorkShoprGettingStartWith ANGULAR # 1 State of 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 #8 Comunication With Events
- 9. State Of the Art 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR
- 16. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR JavaScript Challenge Cross Browsing Help on 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 Type Safe 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 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. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Angular atual HeadQuarter Angularjs.org
- 22. 2015 Alexandre Marreiros Start Engines WorkShoprGettingStartWith ANGULAR <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 * Ng is the short name for angular, this directive tell that this area is controlled by Angular
- 28. 2015 Alexandre Marreiros Plunker is made with AngularJS WorkShoprGettingStartWith ANGULAR Our example live editor to build our demos are also build with Angular
- 31. 2015 Alexandre Marreiros Deveopment time reduction WorkShoprGettingStartWith ANGULAR Pluralsight.com
- 32. 2015 Alexandre Marreiros Code Reduction and reusage WorkShoprGettingStartWith ANGULAR Pluralsight.com 80% to 90%
- 33. 2015 Alexandre Marreiros Data Binding WorkShoprGettingStartWith ANGULAR Pluralsight.com Forms (validation and save) One Way Binding Two Way Binding Optimized Support out of the box
- 34. 2015 Alexandre Marreiros Includes all the major features of webapps WorkShoprGettingStartWith ANGULAR
- 35. 2015 Alexandre Marreiros Support for accebility WorkShoprGettingStartWith ANGULAR Using the directive ng-area to develop future on the workshop
- 36. 2015 Alexandre Marreiros Strong communitie and Popular WorkShoprGettingStartWith ANGULAR
- 39. 2015 Alexandre Marreiros JavaScript Patterns WorkShoprGettingStartWith ANGULAR Functions and Abstrations Functions to build Modules Functions as variables Functions as modelation methods Abstract Functions
- 42. 2015 Alexandre Marreiros WorkShoprGettingStartWith 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
- 47. 2015 Alexandre Marreiros WorkShoprGettingStartWith 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
- 50. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Controllers $scope: “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.”
- 51. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Controllers Multiple controllers Complex objects Nest controllers
- 53. 2015 Alexandre Marreiros WorkShoprGettingStartWith ANGULAR Directives “Directives are the heart and soul of Angular.” https://docs.angularjs.org/guide/directive
- 56. Demo / Exercises Training Angular 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
- 58. Feel free to put 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
- 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.
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- Real time editor http://plnkr.co/
- The library includes routing doom handle, ajax technics, binding in two ways service consumption API
- Real time editor http://plnkr.co/
- 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
- Controllers are in charge of a part of a page