Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)
•Download as PPTX, PDF•
9 likes•5,810 views
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)
Similar to Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk) (20)
Recently uploaded
Recently uploaded (20)
Integrating Angular.js with Rails (Wicked Good Ruby Conf lightening talk)
- 3. 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
- 4. 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
- 6. 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) }
- 7. 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>
- 8. 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}}
- 9. HELLO MODULE app/assets/javascripts/hello.js.coffee app = angular.module 'Hello', [] app.controller 'HelloCntl', @HelloCntl = ($scope) -> $scope.name = 'World'
- 10. APP PARTIAL app/views/home/_hello.html.haml %div{ 'ng-app' => 'Hello'} ...
- 11. 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}}
- 12. 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()
- 13. 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
- 14. 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)
- 15. 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
Editor's Notes
- 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.