A Designer's Guide
to AngularJS
klamping
http://ng.klamp.in
Kevin Lamping, Invision
klamping
http://ng.klamp.in
Disclaimer
Not for Angular Developers
klamping
http://ng.klamp.in
Disclaimer
Not for Angular Developers
For Web Designers on Angular Projects
What is Angular?
Views
klamping
http://ng.klamp.in
The HTML in your app
klamping
http://ng.klamp.in
Views recap
klamping
http://ng.klamp.in
- Templates via ng-view, ng-include
- Data binding via {{data.property.subprop}}
- uses "dot notation" to match JS data nesting
- ng-repeat for collections/lists
- ng-if, ng-hide, ng-show for conditional HTML
Server Data & APIs
klamping
http://ng.klamp.in
Models & Resources
API Recap
klamping
http://ng.klamp.in
- "Resources" load data via AJAX
- Encourages separation of UI and Server
- 3rd-party Integrations: Firebase, MongoLab...
Routing & Controllers
klamping
http://ng.klamp.in
Creating Rich Interactions
Route/Controller Recap
klamping
http://ng.klamp.in
- Routes handle all URL changes
- No browser reloads
- Define URL, HTML template, data, functionality
- Controllers "control" the page
- $scope shares data between UI and JS
Dynamic Styles
klamping
http://ng.klamp.in
Adding complexity to classes
Styles recap
klamping
http://ng.klamp.in
- Built-in form classes
- ng-valid, ng-invalid, ng-pristine, ng-dirty
- ng-class for conditional classes
- ng-animate
- load ng-animate.js file
- add 'ngAnimate' to list of app dependencies
Directives
klamping
http://ng.klamp.in
Custom HTML tags
Directives recap
klamping
http://ng.klamp.in
- Define reusable components
- Transclusion
- Passes along HTML to directive
Filters
klamping
http://ng.klamp.in
Transform data by filtering it out, or formatting it
Filtering it out
klamping
http://ng.klamp.in
<ul ng-repeat="person in people">
<li>{{person.name}}</li>
</ul>
Filtering it out
klamping
http://ng.klamp.in
<ul ng-repeat="person in people | filter:name">
<li>{{person.name}}</li>
</ul>
<input type="text" ng-model="name">
Formatting
klamping
http://ng.klamp.in
<ul ng-repeat="person in people | filter:name">
<li>{{person.name}}</li>
</ul>
<input type="text" ng-model="name">
Formatting
klamping
http://ng.klamp.in
<ul ng-repeat="person in people | filter:name">
<li>{{person.name | uppercase}}</li>
</ul>
<input type="text" ng-model="name">
Key Points
klamping
http://ng.klamp.in
- Angular handles all page views
- Lots of built-in functionality
- Controllers "control" the page
- $scope binds UI to JavaScript/API
- Directives provide custom HTML elements
Show Notes
klamping
http://ng.klamp.in
http://ng-notes.klamp.in
Thanks!
klamping
http://ng.klamp.in
A Designer's Guide to AngularJS
By Kevin Lamping
A Designer's Guide to AngularJS
- 3,058