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

5,468 views

Published on

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

No Downloads
Views
Total views
5,468
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
27
Comments
0
Likes
9
Embeds 0
No embeds

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.
  • Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)

    1. 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. 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. 3. ANGULARJS.ORG
    4. 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. 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. 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. 7. HELLO MODULE app/assets/javascripts/hello.js.coffee app = angular.module 'Hello', [] app.controller 'HelloCntl', @HelloCntl = ($scope) -> $scope.name = 'World'
    8. 8. APP PARTIAL app/views/home/_hello.html.haml %div{ 'ng-app' => 'Hello'} ...
    9. 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. 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. 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. 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. 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. 14. http://vaporbase.com/postings/integrating-angular-dot-js-with- rails Jonathan Linowes @linojon github.com/linojon http://www.parkerhill.com/

    ×