angular.js for beginners

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

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

Angular.jsAngular.js for beginners

Me?

https://twitter.com/basiamadej

http://github.com/basiam

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

● Twitter Bootstrap http://getbootstrap.com/

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

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

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));

About Angular.js

● JavaScript framework

● for Single Page Applications

● developed by Google

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

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.

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

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

ngApp, ngModel, ngBind● ngApp

● ngModel

● ngBind

ngBind or {{ }}

FOUCFlash of unstyled content

extra html tags

Workshop

Angular already included

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

ngSrc● src vs ngSrc

ngInit, ngRepeat● ngInit

● ngRepeat

Filters ● filter using ngModel

● lowercase, uppercase, date, currency, orderBy

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

expand ngInit?● expand ngInit ?

Views and Controllers

ngController

Controllers

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

ngSubmit, ngClick, ngIf● ngSubmit

● ngIf

● ngClick

Module● container

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

Part3 - tasks/part3/superheros_app.js

Part3 - tasks/part3/superheros_controllers.js

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

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

Routes (basic)

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