SOGETI ANGULARJS TRAINING
Transcript of SOGETI ANGULARJS TRAINING
WHO ARE WE?
Patrick de Wit Michael de Wit
THE FRONT-END UNITSmall groupFE meetingsTechnical meetings
THE TRAINING3 EveningsWhat you will learn:
AngularJS ConceptsHow to use AngularJSJavaScript SkillsAnd more...
NEED TO KNOWSAsk your questions immediately!Just raise your hand Open the presentation on your laptop:
http://sogeti-summerschool.herokuapp.com/day/1
WHO WANTS TO LEARNANGULARJS?
WHAT IS ANGULARJS?Plain JavaScriptStructure and guidelinesQuick prototypingFlexibleEasily testableAmazing community!
AND WHAT IS IT NOT?Back-End replacementMagicSolution to everything
TODAYS AGENDAIntroductionWhy AngularJS?Two-way data bindingBasic concepts
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
THE PRESENTATIONRuns inside a browserSingle Page AppJavaScript = awesome
Stepping through ...... a fragmented slide.
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
WHY ANGULARJS?JavaScript has issues
WHY ANGULARJS?JavaScript has issues
Chaotic codeBoilerplatingjQuery spaghetti
AngularJS offers a comprehensive solution
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());
);
THE ANGULARJS SOLUTION<div ngapp> <input type="text" ngmodel="name"> <span>Hello name</span></div>
SECURITYClient-side code!Cross-site scriptingClickjacking
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>
ALTERNATIVESEmber.jsBackbone.jsKnockoutReactAnd many more...
READY... SET... CODE!
GIVEN...<input ngmodel="name"><button ngclick="name = 'Chuck Norris'">Chuck Norris</button><h2>Hello name || 'Sogeti'</h2>
Chuck Norris
HELLO SOGETI
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
MODULES
MODULES
EXAMPLESShopping cartCalendarLogin system (client-side)Your application!
CONTROLLERS
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
SUMMARYIntroductionWhy AngularJSTwo-way data bindingBasic conceptsAngularJS = Awesome
THANKS!See you all next week!