FundamentalsWhat HTML would have been if it were designed

for web apps. - Mishko

Rosina Bignall

Service Dog Zaakirhttp://tamarr.org

Blog: http://rosinabignall.comTwitter: rosinabignall

JoindIn: https://joind.in/11607

Slides: http://goo.gl/WHHtFeCode: http://goo.gl/PF8Bmd

What is ...

Website

vs.

Web Application

Why ...

SIMPLIFY

your

Code

Templating

Routing

Data Binding

Data Binding

Two-Way Data Binding

Benefits of ...

Separation of Concerns

UI Code Declarative

Application Code Imperative

Create a Rich Intuitive User Experience

Testable!

Let’sBuild AnApp

Requirements➔ Provide and edit a name for the ranch➔ Show all the animals on the ranch

◆ Load from server◆ Show the gender name for the type of animal based

on species, gender and age

➔ Search the animals on the ranch

Static HTML

Add the Angular script

Step 2 - Angularize

Bootstrap Angular

Step 3 - Editable Ranch Name

Step 4 - Simplify the HTML

ng-includepartials/header.html

index.html

Directives

app.js

index.html

animal/animal-directive.js

animal/animal-template.html

index.html

Load from Server ...

On to Function...

Search...

Filters...

Step 5 - Services and ng-repeat

animal/animal-service.js

app.js

animal/animal-controller.js

index.html

index.html

Step 6: Searchingindex.html

Step 7: Show gender namesHorse:

Female Male Altered (M)

> 3 years Mare Stallion Gelding

< 3 years Filly Colt Gelding

Dog:Female Male

Unaltered Bitch Stud

Altered Spayed Female Neutered Male

Chicken:

Female Male Altered (M)

> 1 years Hen Rooster Capon

< 1 years Pullet Cockerel Capon

animal/animal-template.html

animal/genderName-filter.js

Step 8: Track other stuff tooindex.html

app.js

partials/menu.html

app.js

equipment/equipment-list.html task/task-list.html

equipment/equipment-controller.js task/task-controller.js

animal/animal-list.html

index.html

Simple HTML page -> Dynamic HTML page

Angular ConceptsScope variables ($scope)

Use <input> with ng-model

Include templates with ng-include

Create a directive (new HTML element)

Loaded data from the server - ngResource

ng-repeat - loop through an array

search by applying a filter to ng-repeat

Create a custom filter

Extended our application with new modulesLinked all the parts of it with ngRoute

Resources● Angular Website:

http://angularjs.org● Code School: Shaping up with AngularJS

https://www.codeschool.com/courses/shaping-up-with-angular-js● Yeoman Angular Generator:

https://github.com/yeoman/generator-angular● Angular Best Practices: http://blog.angularjs.org/2014/02/an-angularjs-

style-guide-and-best.html● Angular-UI:

https://angular-ui.github.io/

Rosina Bignalland

Zaakir

Twitter: rosinabignall

Slideshttp://goo.gl/WHHtFe

Codehttp://goo.gl/PF8Bmd

Feedback please!https://joind.in/11607