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
1. Nome do Documento / Cliente / 04.03.16 / 11Nome do Documento / Cliente / 04.03.16
2015
WorkShop Getting Start With Angular
Alexandre Marreiros
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Nome do Documento / Cliente / 04.03.16 / 6161Nome do Documento / Cliente / 04.03.16