Upload
rosina-bignall
View
119
Download
2
Embed Size (px)
DESCRIPTION
Talk given at CakeFest 2014 AngularJS is the fastest growing Javascript framework and for good reason. Come learn why and watch while we build a simple application (no it won't be the standard To Do app) right before your very eyes! If you haven't used AngularJS, this talk is definitely for you. If you do any front end work at all, you need to know about AngularJS. If you're using AngularJS already I may be able to answer some of your questions and we'll talk about best practices when building an Angular app. We may even touch on some more advanced features.
Citation preview
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