Top Banner
AngularJS An introduction for the uninitiated
21
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Angular.js - An introduction for the unitiated

AngularJSAn introduction for the uninitiated

Page 2: Angular.js - An introduction for the unitiated

Why Do I need Angular?

● Resource management (managed AJAX)● View templating● Filtering (text formatting, and array selection)● Semantic, reusable templates (directives)● Two-way data binding (no more callbacks)● Managed event bindings● Routing for multiple client side views

Page 3: Angular.js - An introduction for the unitiated

Besides...

Its 2014. Everyone uses Javascript. The key is managing it effectively

You probably have homegrown solutions for the bullet points on the previous slide. Eww.

Page 4: Angular.js - An introduction for the unitiated

Trust Them...They are Experts

Page 5: Angular.js - An introduction for the unitiated

AngularJS Resources

Forget $ajax() in favor of $resource()

With one command, you wrap a RESTful resource and are provided: get, save, query, delete

Uses promises for callback management

Page 6: Angular.js - An introduction for the unitiated
Page 7: Angular.js - An introduction for the unitiated

View Templating

Angular has powerful templating directives to iterate over JS objects

ng-repeat, ng-if, ng-unless, ng-show, ng-class, etc

Divorces presentation from data - send JSON

Page 8: Angular.js - An introduction for the unitiated
Page 9: Angular.js - An introduction for the unitiated

Filtering

Inside brackets, can “pipe” date to filter for formatting

currency, date, lowercase, uppercase, orderBy, etc

Can be done in the view, or in Javascript

Page 10: Angular.js - An introduction for the unitiated
Page 11: Angular.js - An introduction for the unitiated

Directives

Directives allow reusable pieces of HTML and event bindings

Can be used for semantic markup, matching element name, attribute, or class

“Templates” by any other name

Page 12: Angular.js - An introduction for the unitiated
Page 13: Angular.js - An introduction for the unitiated

Two Way Data Binding

Angular applies all its evaluations when watched data changes

No binding to onkeyup, onkeydown, etc events

Keeps everything in sync

Page 14: Angular.js - An introduction for the unitiated
Page 15: Angular.js - An introduction for the unitiated

Event binding

Moves event binding back to views

ng-click, ng-submit, etc

Binds to functions in the controller. Two way data binding takes care of a lot of the screen updates w/o explicit events

Page 16: Angular.js - An introduction for the unitiated
Page 17: Angular.js - An introduction for the unitiated

Routing

Client side solution for managing hyperlinks

Can extract params from the URL similar to Rails routes

Makes use of HTML5 location features to work with back button

Page 18: Angular.js - An introduction for the unitiated
Page 19: Angular.js - An introduction for the unitiated

When Would AngularJS be Good?

Javascript-rich, client-side interactions

Anywhere with a lot of unstructured Javascript binding to DOM and events

Anywhere multiple updates need to be made to the screen when data changes

Page 20: Angular.js - An introduction for the unitiated

Where Would AngularJS be Bad?

Simple Javascript manipulations - creating an ng-controller is probably overkill for display toggles, etc

Page 21: Angular.js - An introduction for the unitiated

Questions from the Audience