angular js fundamentals
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.TRANSCRIPT
![Page 1: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/1.jpg)
FundamentalsWhat HTML would have been if it were designed
for web apps. - Mishko
![Page 2: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/2.jpg)
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
![Page 3: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/3.jpg)
What is ...
![Page 4: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/4.jpg)
![Page 5: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/5.jpg)
Website
vs.
Web Application
![Page 6: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/6.jpg)
Why ...
![Page 7: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/7.jpg)
![Page 8: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/8.jpg)
![Page 9: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/9.jpg)
SIMPLIFY
your
Code
Templating
Routing
Data Binding
![Page 10: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/10.jpg)
Data Binding
![Page 11: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/11.jpg)
Two-Way Data Binding
![Page 12: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/12.jpg)
Benefits of ...
![Page 13: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/13.jpg)
Separation of Concerns
UI Code Declarative
Application Code Imperative
Create a Rich Intuitive User Experience
Testable!
![Page 14: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/14.jpg)
Let’sBuild AnApp
![Page 15: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/15.jpg)
![Page 16: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/16.jpg)
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
![Page 17: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/17.jpg)
Static HTML
![Page 18: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/18.jpg)
Add the Angular script
Step 2 - Angularize
Bootstrap Angular
![Page 19: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/19.jpg)
Step 3 - Editable Ranch Name
![Page 20: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/20.jpg)
Step 4 - Simplify the HTML
![Page 21: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/21.jpg)
ng-includepartials/header.html
index.html
![Page 22: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/22.jpg)
Directives
![Page 23: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/23.jpg)
app.js
index.html
![Page 24: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/24.jpg)
animal/animal-directive.js
![Page 25: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/25.jpg)
animal/animal-template.html
index.html
![Page 26: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/26.jpg)
Load from Server ...
On to Function...
Search...
Filters...
![Page 27: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/27.jpg)
Step 5 - Services and ng-repeat
![Page 28: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/28.jpg)
animal/animal-service.js
app.js
![Page 29: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/29.jpg)
animal/animal-controller.js
index.html
![Page 30: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/30.jpg)
index.html
![Page 31: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/31.jpg)
Step 6: Searchingindex.html
![Page 32: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/32.jpg)
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
![Page 33: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/33.jpg)
animal/animal-template.html
animal/genderName-filter.js
![Page 34: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/34.jpg)
Step 8: Track other stuff tooindex.html
app.js
partials/menu.html
![Page 35: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/35.jpg)
app.js
![Page 36: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/36.jpg)
equipment/equipment-list.html task/task-list.html
equipment/equipment-controller.js task/task-controller.js
![Page 37: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/37.jpg)
animal/animal-list.html
![Page 38: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/38.jpg)
index.html
![Page 39: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/39.jpg)
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
![Page 40: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/40.jpg)
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/
![Page 41: Angular js fundamentals](https://reader034.vdocuments.mx/reader034/viewer/2022042515/549550f5b479596a4d8b4cd1/html5/thumbnails/41.jpg)
Rosina Bignalland
Zaakir
Twitter: rosinabignall
Slideshttp://goo.gl/WHHtFe
Codehttp://goo.gl/PF8Bmd
Feedback please!https://joind.in/11607