AngularJS

SOGETI ANGULARJS TRAININGDAG 1 - THE BIG PICTURE

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 ng­app> <input type="text" ng­model="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 ng­model="name"><button ng­click="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!