angular.js for beginners

33
Workshop https://github.com/basiam/angular-beginners https://github.com/basiam/angular-beginners/archive/master.zip Text editor http://www.sublimetext.com/

Upload: basia-madej

Post on 01-Jul-2015

302 views

Category:

Technology


0 download

DESCRIPTION

Presentation from Angular.js workshop for MozDev

TRANSCRIPT

Page 1: Angular.js for beginners

● Workshophttps://github.com/basiam/angular-beginnershttps://github.com/basiam/angular-beginners/archive/master.zip

● Text editorhttp://www.sublimetext.com/

Page 2: Angular.js for beginners

Angular.jsAngular.js for beginners

Page 4: Angular.js for beginners

Resources● Angular.js https://angularjs.org/

● Twitter Bootstrap http://getbootstrap.com/

● AngularUIhttp://angular-ui.github.io/bootstrap/

Page 5: Angular.js for beginners

JavaScript● programming language,

● most commonly used as part of web browsers

● allows client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed

Page 6: Angular.js for beginners

jQuery vs vanilla JavaScript// jQuery

$.post('//example.com', { username: username }, function (data) {

// code

});

// Vanilla

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function (data) {

// code

}

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.open('POST', url);

httpRequest.send('username=' + encodeURIComponent(username));

Page 7: Angular.js for beginners

About Angular.js

● JavaScript framework

● for Single Page Applications

● developed by Google

Page 8: Angular.js for beginners

Cool things about Angular● directives● two-way data bindings● Model-View-Controller● modules● history● jQLite

Page 9: Angular.js for beginners

Directive“At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.”

Cool way to extend HTML easily by simply adding attributes, elements or comments.

Page 10: Angular.js for beginners

Basic direcitves● ngApp ● ngModel● ngBind● ngIf● ngRepeat● …….● …….

Page 11: Angular.js for beginners

Two-Way Data Binding Automatic synchronization of data between the model and view components

Page 12: Angular.js for beginners

ngApp, ngModel, ngBind● ngApp

● ngModel

● ngBind

Page 13: Angular.js for beginners

ngBind or {{ }}

FOUCFlash of unstyled content

extra html tags

Page 14: Angular.js for beginners

Workshop

Page 15: Angular.js for beginners

Angular already included

Page 16: Angular.js for beginners

Part 0 1. Open tasks/part0/index.html

2. Add missing code to enable angular on this page

3. Display the value of text input in 'greeting' header

Page 17: Angular.js for beginners

ngSrc● src vs ngSrc

Page 18: Angular.js for beginners

ngInit, ngRepeat● ngInit

● ngRepeat

Page 19: Angular.js for beginners

Filters ● filter using ngModel

● lowercase, uppercase, date, currency, orderBy

Page 20: Angular.js for beginners

Part 1 1. Open tasks/part1/index.html

2. Add at least one superhero, then display all of the

3. Enable filtering superheros based on 'search' input

Page 21: Angular.js for beginners

expand ngInit?● expand ngInit ?

Page 22: Angular.js for beginners

Views and Controllers

Page 23: Angular.js for beginners

ngController

Page 24: Angular.js for beginners

Controllers

Page 25: Angular.js for beginners

Part21. Open tasks/part2/superheros_controller.js

2. Open tasks/part2/index.html

3. Add missing code to display list of superheros

4. Add more superheros to SuperherosController

5. Display information about superpowers

6. Use form to add more superheros

Page 26: Angular.js for beginners

ngSubmit, ngClick, ngIf● ngSubmit

● ngIf

● ngClick

Page 27: Angular.js for beginners

Module● container

● to keep code clear● to keep code separated● to easily include all need parts

Page 28: Angular.js for beginners

Part3 - tasks/part3/superheros_app.js

Page 29: Angular.js for beginners

Part3 - tasks/part3/superheros_controllers.js

Page 30: Angular.js for beginners

UI Bootstraphttp://angular-ui.github.io/bootstrap/

Page 31: Angular.js for beginners

Part31. Open tasks/part3/index.html

2. Add 'ui.bootstrap' to superheroApp

3. Make sure we only display image when hero.image is present

4. Run 'showBigImage' on click

Page 32: Angular.js for beginners

Routes (basic)

Page 33: Angular.js for beginners

Resources● “AngularJS in 60 Minutes” by Dan Wahlin● https://docs.angularjs.org/● http://pl.wikipedia.org/wiki/JavaScript● https://gist.github.com/liamcurry/2597326●