Downloaded 32 times
![3. Components Modules we use > app > assets > javascripts app.js angular.module('kdyjedes', ['ngResource', 'rails', 'ui', 'ui.bootstrap']) You can load exisEng modules (reusable components) inside your applicaEon by declaring them in the module constructor. Find community-‐submied modules at hp://ngmodules.org/.](https://image.slidesharecdn.com/angularjs-web-130322184826-phpapp02/75/AngularJS-Tips-Tricks-9-2048.jpg)
![$resource vs railsResource angular.module('kdyjedes') .factory('Registrar', ['railsResourceFactory', (railsResourceFactory) -‐> Registrar = railsResourceFactory({url: '/registrars', name: 'registrar'}) # API compaEbility with $resource-‐based service Registrar.prototype.$save = (success) -‐> this.create().then (result) -‐> success(result) return Registrar ]) $resource is a wrapper for REST API calls provided by Angular. railsResource adds Promises, data manipulaEon and interceptors. hps://github.com/tpodom/angularjs-‐rails-‐resource](https://image.slidesharecdn.com/angularjs-web-130322184826-phpapp02/75/AngularJS-Tips-Tricks-10-2048.jpg)
![SugarJS Like Underscore, just beer ['one','two','three'].first(); [1,65,2,77,34].average(); (5).daysAfter('Wednesday'); 'hello'.capitalize(); [[1], 2, [3]].flatten(); JavaScript on steroids. Safely injects convenient methods into naEve JS objects, strings and arrays. hp://sugarjs.com/](https://image.slidesharecdn.com/angularjs-web-130322184826-phpapp02/75/AngularJS-Tips-Tricks-13-2048.jpg)
Uploaded byPetr Bela
AngularJS Tips&Tricks
The document discusses AngularJS tips and tricks, including: 1. Organizing an AngularJS app similarly to a Rails app with directories for controllers, directives etc. 2. Using Testacular (Karma) for unit and end-to-end testing, and setting up continuous integration with Jenkins. 3. Including existing modules from the community in your app. 4. Additional topics like using SugarJS, Zeus, and real-time communication with websockets.
AngularJS Tips&Tricks
- 1. AngularJS Tips&Tricks (with a bit of Rails) #angularjs #rails #karma #jenkins @petrbela #sugarjs #zeus #chucknorris
- 2.
- 3. Plan 1. Rails + AngularJS 2. TesEng in AngularJS 3. AngularJS Components 4. Extras 5. Q&A
- 4. 1. Rails + AngularJS > app > assets > javascripts > controllers > direcEves > filters > models > services app.js Structure your client-‐side app similarly as a Rails app. Declare your module in app.js and put the files inside dirs. Or see github.com/angular/angular-‐seed for a server-‐less setup.
- 5. 2. How we test “If you don’t like unit testing your product, most likely your customers won’t like to test it either.” - Anonymous “A code that cannot be tested is flawed.” – Anonymous Thanks to Dependency InjecEon, tesEng in Angular is easy. Not many client-‐side JavaScript libraries can say that. You should be thankful and do it.
- 6. Testacular Karma Spectacular tesEng framework A. Unit tesEng Test runner made by @vojtajina from Angular’s core team. Runs Jasmine (et al.) unit tests upon each file save. hps://github.com/karma-‐runner/karma
- 7. Testacular Karma Spectacular tesEng framework B. E2E tesEng Karma can be used also for integraEon tesEng. Usage is similar to Selenium, with async calls in Angular handled automaEcally. hp://docs.angularjs.org/guide/dev_guide.e2e-‐tesEng
- 8. Jenkins CI Cloudbees.com It’s easy to setup AngularJS tesEng env on a CI server. E.g. Cloudbees provides a ready-‐made environment package at hps://github.com/CloudBees-‐community/angular-‐js-‐clickstart
- 9. 3. Components Modules we use > app > assets > javascripts app.js angular.module('kdyjedes', ['ngResource', 'rails', 'ui', 'ui.bootstrap']) You can load exisEng modules (reusable components) inside your applicaEon by declaring them in the module constructor. Find community-‐submied modules at hp://ngmodules.org/.
- 10. $resource vs railsResource angular.module('kdyjedes') .factory('Registrar', ['railsResourceFactory', (railsResourceFactory) -‐> Registrar = railsResourceFactory({url: '/registrars', name: 'registrar'}) # API compaEbility with $resource-‐based service Registrar.prototype.$save = (success) -‐> this.create().then (result) -‐> success(result) return Registrar ]) $resource is a wrapper for REST API calls provided by Angular. railsResource adds Promises, data manipulaEon and interceptors. hps://github.com/tpodom/angularjs-‐rails-‐resource
- 11. DIY angular.module("myModule").factory "socket", ($rootScope) -‐> socket = io.connect() return { on: (eventName, callback) -‐> socket.on eventName, -‐> args = arguments $rootScope.$apply -‐> callback.apply(socket, args) emit: (eventName, data, callback) -‐> socket.emit eventName, data, -‐> args = arguments $rootScope.$apply -‐> callback.apply(socket, args) if callback } Use $rootScope.$apply block to automaEcally run Angular’s digesEng cycle that updates view based on model changes.
- 12.
- 13. SugarJS Like Underscore, just beer ['one','two','three'].first(); [1,65,2,77,34].average(); (5).daysAfter('Wednesday'); 'hello'.capitalize(); [[1], 2, [3]].flatten(); JavaScript on steroids. Safely injects convenient methods into naEve JS objects, strings and arrays. hp://sugarjs.com/
- 14. Zeus Like Spork, just beer (Linux/Mac only) Run an always-‐up environment to instantly start console, server, tests or rake tasks. hps://github.com/burke/zeus
- 15. 5. Q&A @petrbela @kdyjedes @getChute @StudenEve @StartupKidsCZSK Thank You!
- 16. Credits 1Sock http://www.flickr.com/photos/64025277@N00/333979587/ alisdair http://www.flickr.com/photos/41143865@N00/135306281/