background preloader

AngularJS Tips and Tricks [UPDATED] ☢ DeanSofer.com

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. 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

AngularJS - Using Partials Dynamically Within Other Partials 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

AngularUI for AngularJS 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 .

Free online services Espacenet - patent search Over 70 million patent documents from all over the world, giving information about inventions and technical developments from 1836 to today. European publication server The official platform and source for EPO publications: European patent applications, patent specifications and corrected documents. Patent translate This machine translation service, available in Espacenet and the European publication server, is specially designed for complex patent texts. European Patent Bulletin Published weekly, the bulletin contains the bibliographic and legal-status data stipulated in the EPC for European patent applications and patents. IPscore Software to help you to evaluate, analyse and manage your patent portfolio. Common Citation Document The CCD provides single-point access to citation data for patent applications examined by the trilateral offices.

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?).

8 Tips for Angular.js Beginners | The Discussion Delegate | Vercingetorix Technologies | iPhone, Android, Blackberry, PHP, Generatrix, Wordpress App Development in Pune, India We started working with Angular.js recently and after spending a few days on it, I realised that there a big need for beginner tutorials on it. I’ve tried to document some of the things you might need on day 1. 1. The documentation still sucks so it’s okay if you’re taking more time. Yes, it’s really worth it. Discussion from StackOverflow: it makes perfect sense, but how did you know that? The documentation sucks and you have to assume stuff. If you need resources, you should try out the following a. b. c. d. e. f. g. 2. I have divided the code into two files. 3. I do this in the App.js file 4. This is again done in the app.js file app.factory('db', function() { var items = []; var modify = {}; var modify.addItem = function(item) { items.push(item); return 'added item'; }; var modify.getItems = function() { return items; } return modify; }); 5. 6. 7. a. give a “name” to your form e.g. 8.

Brian Ford The AngularJS documentation is great for getting started and for looking up specific API calls. However, it doesn't really tell you how to organize and manage your app as it grows to tens or hundreds of thousands of lines of code. I've collected here some of my observations and best practices for how to manage your sprawling application. First we'll take a look at organization, then move on to some tips on improving performance, and conclude with a brief summary on tools, servers, and build processes. Don't Write a Huge App The best advice about huge apps is not to make them. Organization Probably the biggest question with large apps is where to put all of that code. Directories This is the typical folder layout that I recommend: As you add more files, it might make sense to create subdirectories to further organize controllers and services. Files Each file should have one "thing" in it, where a "thing" is a controller, directive, filter, or service. Modules Dependencies Directives Services

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

Related: