AngularJS is too humble to say you’re doing it wrong For years, web application developers have used DOM manipulation tools like jQuery to control their user interface. Astute developers have taken it to the next level with client-side templating tools like Mustache and Handlebars.js to build sophisticated user interfaces on the client side. And then AngularJS came along. And we all realized we’ve been doing it wrong. Way wrong. The Old Way Remember before you discovered AngularJS? HTML that defines your page JavaScript that downloads AJAX data HTML that defines a client side template (yeah, this: <script type="text/html">... You thought that was pretty cool. But then AngularJS showed you how you were wrong. The New Way Under AngularJS, your code can be organized like this: HTML that defines your page and client-side templates inline JavaScript that downloads AJAX data How does that even work? The answer: Data Binding . Data Binding is the secret sauce of AngularJS (along with a couple dozen other delicious spices and condiments). The old way
Fuse.js | K. Risk - JavaScript Refined Lightweight fuzzy-search, in JavaScript. Download: fuse.js - (9 kb) development fuse.min.js - (1.58 kb) production Why? If you need a lightweight, fast way to search through a list of items, and allow mispellings, then Fuse.js is for you. Try it out! Given this list of books, try searching by misspelling the title or author’s name: The results are sorted by score. Usage Suppose you have the following data structure: Example 1 Search and return a result list of identifiers Example 2 Search and return a result list of records Example 3 Search over a flat array, and return the indices Options keys List of keys (properties) that will be searched. Limitations This isn’t meant to work across hundreds of thousands, or millions of records. Note: the pattern string cannot exceed 32 characters. How does it do it? Currently, it uses a full Bitap algorithm, leveraging a modified version of the Diff, Match & Patch tool by Google. To do Currently planning to make it faster, and work for larger sets of data. Problems?
AngularJS Dynamic Templates - Yes We Can! This is going to be a really fun post for me. AngularJS is a super powerful framework for building great applications but I love it when I figure out ways to bring the fashion to the functionality. The Backstory I am working on a project that allows the user to post various types of content to a timeline and essentially the data structure is the same but the styling varies quite a bit. The problem is that that AngularJS does not have any logic built into its templates other than what you can get via binding. So how do get around this problem while keeping theoretical integrity in tact? Preview Source The Application So lets get started with the actual data model we are working with. It is pretty straightforward data structure that shares title and data while differentiating itself on content_type . And then we get the party started with a controller. So we need templates! Behold! But!
Jens Rantil's Hideout Lately I've been working a lot in AngularJS. This is my second project with the framework, and the more time I spend in it, the more I like it. But as with most things, AngularJS has some rough corners. Its documentation still has a long way to go, although it has improved since last time I used it over a year ago. My intention with this blog post is to go through one such use case, namely dealing with complex dependencies. The level of this tutorial is intermediate. A slow service Let's say you have some data you would like to present to your user and you prepare some data in your controller. This is very basic AngularJS and I expect you to have no problems understanding the mapping done here. But in the real world, we rarely hardcode things. Now, let's create a service that simulates a slower API call. Notice that it takes a couple of seconds before the result is presented on the screen when you click "Result". Obviously, we are not generating any errors here, but you never know!
AngularJS and recursive template I love JavaScript. It's like Lego, you can build anything really fast. And one of the reason I like it also a disadvantage: it's super flexible. The proliferation of new JS libraries are all using this behavior of the language. This time I wanted to try what AngularJS is about. You can read the official website for a precise definition - but for me it's a super clever data binding and structuring tool. There are great videos and tutorials online, I'm not gonna cover any of them. I wanted to make a mindmap - where you can add nodes, edit them - and at the end you just got an exportable format (JSON or Freemind XML). Eventually in a presentation they mentioned how scope is handled in AngluarJS. First we need the HTML template to hold the content: (my sincere apology about image source code - but Blogspot is incapable of any kind of source code embedding - I'm seriosly pissed off) You can see we load the minimized AngularJS library from Google CDN, our custom script and the stylesheet. Peter
AngularJS on Rails 4 - Part 1 - coderberry AngularJS seems to be the big craze as of late. Some may agree and some may not, but AngularJS is one of the next big contenders for being the number one choice of developers. At the time of writing this article, AngularJS is the 15th most watched project on GitHub . A few days back, I presented at our local ruby users group on writing an API-driven Rails app with AngularJS on the front end. Here I want to create a useful Rails application using AngularJS. The title of the article states that we will be using Rails 4 in our application. Creating the Rails Application I had a hard time deciding when I began this project on whether to use a full Rails application or a very lightweight ruby web stack like Sinatra . Before anything, we need to install the rails-api gem in order for us to create our app. $ gem install rails-api Once that is installed, lets create a new Rails application called Angular Casts $ rails-api new angular_casts $ mkdir -p app/assets/javascripts Create the Model $ rake test
AngularJS - Using Partials Dynamically Within Other Partials www.egghead.io AngularJS Tips and Tricks [UPDATED] ☢ DeanSofer.com These tips were developed in AngularJs v0.10.5 v1.0.1. I'll keep updating this post, so check back often! I've compared a LOT of different javascript frameworks for my company's rewrite, and finally settled on AngularJS because of how rapidly I'm able to produce prototypes. Most of these tips have been moved to AngularUI - Go check it out! The companion suite to AngularJS, a collection of work by many AngularJS users with a plethora of useful utilities. Table of Contents Serializing the Form No. If every form control on your page does not have an ng-model then you're doing it wrong. Map the form to a large object (such as $scope.data={}) and specifying the keys you want each control to populate such as ng-model="data.name". Seriously. Useful $scope Methods You may at a point try to do ng-click="alert()" or ng-change="console.log()" and have found these don't work. Don't Escape HTML One of the first things people get stuck on. ng-bind-html-unsafe="{expression}" ngCloak ngBind Terse Class Toggling
Authentication in Single Page Applications with Angular.js - A Modest Proposal - Web Development, Japanese, Music 9/2/2014 update:The GitHub repo now uses UI-router instead of the standard ngRoute routing module. This blog post will still illustrate the original technique utilizing ngRoute, while information regarding the UI-router approach can be found in the GitHub repo as well as this blogpost. The example app in the repo has been deployed to Heroku, so now you can test it out live for yourself right here. A separate blogpost discussing the complementing server-side code can be found here. I have been working a lot with Angular.js lately, and love how easy it makes it to create web applications with rich client-side functionality. It's an extremely useful asset in keeping your own client-side code lean, making it easy to separate business logic and declarative markup for anything view specific. How do I deal with authentication and authorization in single page applications? The server needs to communicate what permissions/role the client has on inital page load. Setting up client-side routing
ActiveRecord: When aggregating nested children, always exclude children marked for destruction Posted about 2 years ago. Visible to the public. Repeats. When your model is using a callback like before_save or before_validation to calculate an aggregated value from its children, it needs to skip those children that are #marked_for_destruction?. Otherwise you will include children that have been ticked for deletion in a nested form. Wrong way class Invoice has_many :invoice_items accepts_nested_attributes_for :invoice_items, :allow_destroy => true # the critical code 1/2 before_save :calculate_and_store_amount # the critical code 2/2 private def calculate_and_store_amount # may include amounts of items you marked for destruction self.amount = invoice_items.collect(&:amount).sum endend Right way How to test the correct behaviour in rspec