background preloader

AngularJS Tips and Tricks [UPDATED] ☢

AngularJS Tips and Tricks [UPDATED] ☢
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. In my opinion, although it's very alpha and fairly lacking on the graphical side, it's excellent for CRUD applications (meaning forms, tables and reports). I'm still trying to lean towards emphasizing reusable widgets and directives instead of just custom-coding everything for your own app. 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. Seriously. Useful $scope Methods Don't Escape HTML One of the first things people get stuck on. ngCloak ngBind Routing Tricks Related:  AngularJSAngular JS

AngularJS - Using Partials Dynamically Within Other Partials AngularJS Directives – Basics I have recently been working with AngularJS directives and this is probably my favorite feature of the project. It is a really clever and powerful way to extend HTML to do new things. As someone who has spent a lot of time doing Flex development, custom declarative markup that represents an underlying component is like an old friend. In this post, we will explore a series of examples that build in complexity to help us understand directives. Act One: The Setup Here is the starting setup that we are going to be building on. The jsFiddle is here: Here is the HTML: And the CSS: Nothing fancy here. Act Two: Enter AngularJS Let’s take this a step further and make the properties dynamic. The jsFiddle is here: The HTML: A few things worth noting in the HTML. We are auto-bootstrapping the AngularJS application with the ng-app directive and assigning it a module. Now for the JavaScript: Act Three: Animate! Here is the JavaScript: and

More AngularJS Magic to Supercharge your Webapp Make way for another amazing article which covers more of AngularJS Due to the popularity of the previous article, Use AngularJS to power your web application, I've decided to cover more of AngularJS to make it fun and easy for all developers to play around with it. AngularJS is an incredible tool, but a lot of the more advanced features are hidden in deep within the documentation and others are too tricky to learn direclty. AngularJS is also a fairly new product and as a result there are many features that are yet to be discovered and blogged about. This article will cover more of the hidden gems of AngularJS and introduce new development tricks and methods to supercharge your AngularJS application. Pleaes read onwards if you wish to become an AngularJS web guru :). This page was first published on October 2nd 2012 and was last updated on January 30th 2013. This article is a sequel to the previous article titled Use AngularJS to Power Your Web Application. OK so onto business. Oh!

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. 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. It looks like a very simple function. Peter

Custom form validation in Angular JS | alea iacta est This article is part of the bigger series about my Software Engineering internship this summer. To read all the posts, simply visit the category archive. Today just a quick Angular JS gem on how to create your own form validation directives. I’m still working on the follow up post to the article From Request to Response and it will certainly follow soon, but for now, some more Angular JS action. Form handling in Angular JS Angular JS already has some basic form validation features and explains them well and in detail in their developer guide. When a validation fails two things happen: The constructor object on the current scope (named by the form name) gets some flags set to new values indicating the failure and the reason for the failure. form. Based on these fields you can then modify the content of the DOM to give the use guidance on how to fix the error and also to disable form submission. The second thing that happens, might not seem that important: The model does not get updated!

5 surprisingly painful things about client-side JS - The Sourcegraph Blog Updated: The title of this post previously began “Why we left AngularJS: ...”, but that was removed because these points are generally applicable to single-page JS app frameworks. Some folks construed this post as a criticism of AngularJS specifically, but that wasn't my intent. — Quinn When we opened up Sourcegraph to the public a few months ago, it was a rich AngularJS app. The server delivered the initial HTML page and hosted JSON endpoints. AngularJS did everything else. But single-page JavaScript frameworks aren’t a good fit for every site. Next week we’ll talk more about how we made the transition from AngularJS to server-side Go templates. The 5 things about client-side JS frameworks that were surprisingly painful We knew about many of these difficulties in advance, but we didn’t know how difficult they would be. 1. Search engine crawlers and social preview scrapers can’t load JavaScript-only sites, and serving them alternate versions is complex and slow. 2. How do you fix this? 3.

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. As a result I needed to be able to style each content item according to its content type. 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 .

angularjs - How can I make angular.js post data as form data instead of a request payload FrAngular : AngularJS en français 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?. 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 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 # does not include amounts of items you marked for destruction self.amount = invoice_items.reject(&:marked_for_destruction?).