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

Made with Slides.com