sogeti angularjs training
TRANSCRIPT
![Page 2: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/2.jpg)
WHO ARE WE?
Patrick de Wit Michael de Wit
![Page 3: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/3.jpg)
THE FRONT-END UNITSmall groupFE meetingsTechnical meetings
![Page 4: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/4.jpg)
THE TRAINING3 EveningsWhat you will learn:
AngularJS ConceptsHow to use AngularJSJavaScript SkillsAnd more...
![Page 5: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/5.jpg)
NEED TO KNOWSAsk your questions immediately!Just raise your hand Open the presentation on your laptop:
http://sogeti-summerschool.herokuapp.com/day/1
![Page 6: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/6.jpg)
WHO WANTS TO LEARNANGULARJS?
![Page 7: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/7.jpg)
WHAT IS ANGULARJS?Plain JavaScriptStructure and guidelinesQuick prototypingFlexibleEasily testableAmazing community!
![Page 8: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/8.jpg)
AND WHAT IS IT NOT?Back-End replacementMagicSolution to everything
![Page 9: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/9.jpg)
TODAYS AGENDAIntroductionWhy AngularJS?Two-way data bindingBasic concepts
![Page 10: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/10.jpg)
WHY ANGULARJS?Single Page Apps
GMail - Twitter - Facebook
Browser Client
Presentation (HTML/CSS)
UI Logic (JavaScript)
Data / Service Access (JavaScript)
Server
service service
Database
JSON
![Page 11: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/11.jpg)
THE PRESENTATIONRuns inside a browserSingle Page AppJavaScript = awesome
Stepping through ...... a fragmented slide.
![Page 12: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/12.jpg)
CODE EXAMPLES<p>This is some nice content</p><button onclick="doSomething(true)">do something</button>
function doSomething(someBoolean) if (someBoolean) var uselessArray = ['This is a useless string']; for (item of uselessArray) alert(item);
do something
![Page 13: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/13.jpg)
WHY ANGULARJS?JavaScript has issues
![Page 14: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/14.jpg)
WHY ANGULARJS?JavaScript has issues
Chaotic codeBoilerplatingjQuery spaghetti
AngularJS offers a comprehensive solution
![Page 15: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/15.jpg)
JQUERY EXAMPLE<! jQuery Markup ><div> <input id="name" type="text"> <span id="greeting">Hello</span></div>
//look up the input elementvar name = $('#name');
//look up the output elementvar greeting = $('#greeting');
//listen for keyboard eventsname.keyup(function()
//update the output element with the new input greeting.text('Hello ' + name.val());
);
![Page 16: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/16.jpg)
THE ANGULARJS SOLUTION<div ngapp> <input type="text" ngmodel="name"> <span>Hello name</span></div>
![Page 17: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/17.jpg)
SECURITYClient-side code!Cross-site scriptingClickjacking
![Page 18: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/18.jpg)
HOW CAN I GET STARTED?Local download
<script src="angular.js"></script>
Google's CDN
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
![Page 19: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/19.jpg)
ALTERNATIVESEmber.jsBackbone.jsKnockoutReactAnd many more...
![Page 20: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/20.jpg)
![Page 21: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/21.jpg)
![Page 22: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/22.jpg)
![Page 23: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/23.jpg)
![Page 24: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/24.jpg)
READY... SET... CODE!
![Page 25: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/25.jpg)
GIVEN...<input ngmodel="name"><button ngclick="name = 'Chuck Norris'">Chuck Norris</button><h2>Hello name || 'Sogeti'</h2>
Chuck Norris
HELLO SOGETI
![Page 26: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/26.jpg)
LET'S GET TO IT!http://jsbin.com/vukana/edit?html,output
1. Add a second button that changes the text to 'ArnoldSchwarzenegger'
2. Change the default text to 'AngularJS'3. Extra:
3.1 Create a second input that sets a lastnamemodel attribute
3.2 Create a second label which ouputs data fromthe lastname model attribute
3.3 Let the second button set lastname
![Page 27: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/27.jpg)
MODULES
![Page 28: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/28.jpg)
![Page 29: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/29.jpg)
MODULES
![Page 30: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/30.jpg)
![Page 31: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/31.jpg)
![Page 32: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/32.jpg)
EXAMPLESShopping cartCalendarLogin system (client-side)Your application!
![Page 33: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/33.jpg)
CONTROLLERS
![Page 34: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/34.jpg)
![Page 35: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/35.jpg)
CONTROLLERSDocumentation
http://jsbin.com/keroda/edit?html,js,output
1. Change the default name to your own name2. Display an error when an incorrect name is entered3. Extra:
3.1 Add a button which reverts the displayed nameback to the default name
3.2 Create a history list of names, by appending thename model with a separator and the new name
![Page 36: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/36.jpg)
SUMMARYIntroductionWhy AngularJSTwo-way data bindingBasic conceptsAngularJS = Awesome
![Page 37: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/37.jpg)
![Page 38: SOGETI ANGULARJS TRAINING](https://reader031.vdocuments.mx/reader031/viewer/2022021815/5872081c1a28abac768bd753/html5/thumbnails/38.jpg)
THANKS!See you all next week!