AngularJS

1,927 views

Published on

An introduction to AngularJS. There's a little focus on using it with Rails as well.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,927
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
60
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AngularJS

  1. 1. AngularJSYAJSCAT - "Yet AnotherJavaScript Client-side ApplicationThingy"
  2. 2. The need for YAJSCAT Web applications are getting fancier at an alarming rate!Fancyness middle ages When google ruined everything with gmail Ancient Egyptian "Superhighway" Web Development Boom Time
  3. 3. WE MUST DO SOMETHING!!!AngularJS is something. Therefore, we mustdo AngularJS.LOGIC: YOU ARE CONVINCED.
  4. 4. Whats in your js directory?● app.js● controllers.js● directives.js● filters.js● services.js
  5. 5. AppOrganizes and controls imports for the otherfiles
  6. 6. DirectivesAre custom html, this lets you "teach htmlnew tricks". Links behavior or DOMtransformations into the DOM<input ng-model="name"><span ng-bind="name"></span>[elsewhere in js land]function Controller($scope) { $scope.name = default;
  7. 7. Filters
  8. 8. Serviceslink up to, for example, REST services.
  9. 9. TestingIncludes:● end-to-end (integration) testing● unit testingdescribe(Phone detail view, function() { beforeEach(function() { browser().navigateTo(app/index.html#/phones/nexus-s); }); it(should display nexus-s page, function() { expect(binding(phone.name)).toBe(Nexus S); });});(jasmine with a custom DSL)
  10. 10. TestingUnits specs include● controllers● directives● filters● services
  11. 11. Templatesin the DOM (cf. String-based likehandlebars):<html> <head><title>Foo</title> <body> <div ng-view></div> </body></html>
  12. 12. Using it in rails...gem angular-rails
  13. 13. BasicallyTell angular about all of your RESTful routes

×