Your SlideShare is downloading. ×
Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)

4,136
views

Published on

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,136
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://www.walls360.com/chicago-railroad-tracks-at-dawn-p/4100.htm
  • http://angularjs.org/Compelling, Welcoming website, tutorials, learn explore, reference
  • Instantiate a PostsCntlThe posts model inside the controller (scope.posts) starts out as empty (null). When we call $httpBackend.flush(), the mock acts like its completed the asynchronous call. When its done, scope.posts will be populated with the fixture data.
  • Transcript

    • 1. DAWNING OF THE AGE OF ANGULARJS • client-side javascript MVC framework • makes use of directives, dependency injection, and data binding • “reasonable magic”, like Rails • http://angularjs.org/ • by Google
    • 2. ANGULAR.JS Directives • Domain specific HTML syntax, reusable Dependency Injection • Declarative description how app is wired (de-centralized) Data Binding • Automatic updating the view whenever model changes Community • Documentation, tutorials, testable, ecosystem
    • 3. ANGULARJS.ORG
    • 4. ANGULAR IN RAILS Gemfile gem 'angularjs-rails’ app/assets/javascripts/application.js //= require angular config/environments/production.rb config.assets.js_compressor = Sprockets::LazyCompressor.new { Uglifier.new(mangle: false) }
    • 5. HELLO HTML app/views/layouts/application.html.haml %html{ 'ng-app' => true } <html ng-app> app/views/home/index.html.haml %p Hello {{'World' + '!'}} <p>Hello {{'World' + '!'}}</p>
    • 6. HELLO CNTL app/assets/javascripts/hello.js.coffee HelloCntl = ($scope) -> $scope.name = 'World’ index.html.haml %div{ ng_controller: 'HelloCntl'} Your name: %input{ type: 'text', ng_model: 'name', value: 'World' } Hello {{name}}
    • 7. HELLO MODULE app/assets/javascripts/hello.js.coffee app = angular.module 'Hello', [] app.controller 'HelloCntl', @HelloCntl = ($scope) -> $scope.name = 'World'
    • 8. APP PARTIAL app/views/home/_hello.html.haml %div{ 'ng-app' => 'Hello'} ...
    • 9. POSTS INDEX AJAX app/assets/javascripts/posts.js.coffee app = angular.module 'Posts', [] app.controller "PostsCtrl", @PostsCtrl = ($scope, $http) -> $http.get('/posts.json').success (data) -> $scope.posts = data app/views/posts/index.html.haml %h1 Listing posts %div{ ng_controller: "PostsCtrl" } %ul %li{ ng_repeat: "post in posts" } {{post.title}}
    • 10. POSTS INDEX ANGULAR RESOURCE application.js //= require angular-resource posts.js.coffee app = angular.module 'Posts', ['ngResource’] app.controller "PostsCtrl", @PostsCtrl = ($scope, $resource) -> //$http.get('/posts.json').success (data) -> // $scope.posts = data Post = $resource('/posts') $scope.posts = Post.query()
    • 11. TESTING WITH JASMINE AND TEASPOON Gemfile gem 'teaspoon’ gem 'phantomjs' spec/javascripts/support/spec_helper.js //= require angular-mocks Run browse to http://localhost:3000/teaspoon or rake teaspoon
    • 12. SPEC SETUP spec/javascripts/posts_spec.js.coffee describe "PostsCtrl", -> $fixture = [ { id: 1, title: "Title 1", intro: "This is posting 1" }, { id: 2, title: "Title 2", intro: "This is posting 2" } ] $scope = null $controller = null $httpBackend = null beforeEach module('Posts') beforeEach inject ($injector) -> $scope = $injector.get('$rootScope').$new() $controller = $injector.get('$controller') $httpBackend = $injector.get('$httpBackend') $httpBackend.when('GET','/posts.json').respond($fixture)
    • 13. SPEC EXAMPLE it 'creates posts model with index request', -> $httpBackend.expect('GET', '/posts').respond($fixture) $controller(PostsCtrl, {$scope: $scope }) //instantiate controller expect($scope.posts).toEqualData [] $httpBackend.flush()// mock the ajax success expect($scope.posts.length).toBe 2 expect($scope.posts).toEqualData $fixture
    • 14. http://vaporbase.com/postings/integrating-angular-dot-js-with- rails Jonathan Linowes @linojon github.com/linojon http://www.parkerhill.com/