background preloader

Lessons Learned: A Year with a Large AngularJS Project

Lessons Learned: A Year with a Large AngularJS Project
photo credit: Solo After a year of working with a large AngularJS project, I thought I’d share a few of the lessons that I learned in the process. Firstly, I love AngularJS. It suits my needs exceedingly well, and I expect it will be my goto for the forseeable future when I need a solid framework for “thick client” single page applications. Code Organisation This one is huge. - project -- controllers --- someController.js --- someOtherController.js --- ... --- someController99.js Which lead to a controllers folder that would twist the eyes. Today I’d want to start building my project in a more modular fashion. Cliff Meyers has written a great article on organizing your code in a large Angular app. Directives are awesome and powerful I’m of the opinion now that Directives are the killer feature of AngularJS. One of my favorite aspects of Angular Directives is that they are composable. Know thy framework While I’ve spent some time with it, this is an area I’d like to get more intimate with.

Optimizing AngularJS: 1200ms to 35ms | Scalyr Blog Edit: Due to the level of interest, we’ve released the source code to the work described here: Also, some good discussion at Hacker News. Here at Scalyr, we recently embarked on a full rewrite of our web client. Our application, Scalyr Logs, is a broad-spectrum monitoring and log analysis tool. A single-page application architecture promised to unlock the backend’s blazing performance, so we began searching for an appropriate framework, and identified AngularJS as a promising candidate. This is a real acid test for an application framework. An AngularJS log viewer At heart, the Log View is simply a list of log messages. One page can easily have several thousand tokens. Analysis Using Chrome’s Javascript profiler, we quickly identified two sources of lag. Second, each word had its own change watcher, which AngularJS would invoke on every mouse click. Optimization #1: Cache DOM elements We created a variant of the ng-repeat directive. Results Conclusion

Developer Guide Loading... On this page, you will find a list of official AngularJS resources on various topics. Just starting out with AngularJS? Try working through our step by step tutorial or try building on our seed project. Ready to find out more about AngularJS? Core Concepts Templates In AngularJS applications, you move the job of filling page templates with data from the server to the client. Application Structure Other Features Testing Community Resources We have set up a guide to many resources provided by the community, where you can find lots of additional information and material on these topics, a list of complimentary libraries, and much more. External AngularJS resources Getting Help The recipe for getting help on your unique issue is to create an example that could work (even if it doesn't) in a shareable example on Plunker, JSFiddle, or similar site and then post to one of the following: Official Communications Official announcements, news and releases are posted to our blog, G+ and Twitter:

q This is Q version 1, from the v1 branch in Git. This documentation applies to the latest of both the version 1 and version 0.9 release trains. These releases are stable. There will be no further releases of 0.9 after 0.9.7 which is nearly equivalent to version 1.0.0. If a function cannot return a value or throw an exception without blocking, it can return a promise instead. On the first pass, promises can mitigate the “Pyramid of Doom”: the situation where code marches to the right faster than it marches forward. step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { }); }); }); }); With a promise library, you can flatten the pyramid. Q.fcall(promisedStep1) .then(promisedStep2) .then(promisedStep3) .then(promisedStep4) .then(function (value4) { }) .catch(function (error) { }) .done(); With this approach, you also get implicit error propagation, just like try, catch, and finally. Getting Started Resources Tutorial Chaining

AngularJS - Complex nesting of partials and templates AngularJS - Unit Testing - Controllers Since Controllers carry the "business logic" of your Angular application, they're probably the single most important thing to unit test in your Application. I've run across a few tutorials on this subject, but most of them cover only the simplest scenarios. I'm going to try to add some slightly more complicated stuff in to my controller and test it, just to show examples. The Controller: What are you testing? First off, what is a controller? Recommended Testing Suite: Jasmine The recommended tool for testing Angular is Jasmine . To TDD or not to TDD? I'm not going to go into the specifics of TDD , whether or not you should use it, the pros and cons of TDD, or even attack this blog entry from that angle. The Basic Setup Let's start off with the basic Jasmine Set up. <! An Example Controller So now we'll need something to test. var app = angular . module ( 'myApp' , []); Unit Tests For Our Example Controller /* IMPORTANT! The Simple Tests I don't want to dwell too much on the first two tests.

I Wish I Knew Then What I Know Now -- Life With AngularJS AngularJS is a powerful if stubborn Javascript framework. What follows is simply a list of things that I wish were clearer to me when I started working with AngularJS. Hopefully, someone just starting with AngularJS will find this list helpful. Data Binded Directives Manipulate the data, not the DOM. Additionally, you can write your own custom directives to manipulate a particular DOM element and add functionality to it. In short, when you start with AngularJS, you need to make a conscious effort to forget what you thought you knew about manipulating the DOM with Javascript. Services are just global objects AngularJS wires in services to your controllers for you, in an attempt at implementing dependency injection in Javascript. Embrace broadcast messaging Any reasonably complex view will end up containing multiple controllers. Which all leads us to… Combine broadcast messaging with services The pattern that we eventually fell into was to combine broadcast messaging with services.

AngularJS tips'n'tricks part 1 - revolunet blog In the past few months we learned a lot of new AngularJS stuff. Here is a first bunch of tricks, please comment and help us improve theses exemples if your tricks are even more awesome :) We compiled most of our best AngularJS ressources in a gist and we maintain a list of related twitter accounts here : Scopes You definitely need to read this article : Directives The official documentation is not crystal clear at first approach but it documents most of what you need to understand: Watch an object or a list If you watch a list or an object with the objectEquality parameter not set, then the $watch callback won’t be triggered if the object is only updated partially. Two way data binding attribute without explicit scope declaration. Use a callback function with arguments in your directive

| ng-newsletter One of the fundamental reasons for choosing Angular is cited as that it is built with testing in mind. We can build complex web applications using various popular frameworks and libraries with features as tall as the sky and as equally complex. As with anything of increasing complexity and density, this can quickly grow out of hand. Testing is a good approach to keep code maintainable, understandable, debug-able, and bug-free. A good test suite can help us find problems before they rise up in production and at scale. There are several schools of thought about how to test and when to test. Write tests first (Test-Driven Development | TDD) where we write a test to match the functionality and API we expect out of our elementWrite tests last where we confirm the functionality works as expected (WBT | Write-behind testing)Write tests to black-box test the functionality of the overall system Getting started Enough chit-chat, let's test! $ npm install --save-dev karma $ karma init karma.conf.js

Form Validation: The AngularJS Way Good news first! Recently I started develop my first real AngularJS web app; it shouldn’t be nothing too complicated… I’m just planning to replace my old excel for family budget with a brand new AngularJS app. The registration view was one of the first views I made, when I started to work on this little project. This gave me the opportunity to learn a lot of thing about AngularJS, and in particular how AngularJS handles client side form validation (one of the topic that I usually less appreciate). In this post I will show how perform client side data validation with AngularJS. I will use both built-in directives, both custom directives. Client and Server side validation Before to start, just a question for you: How many times have you heard that client side validation is useless without server side validation? AngularJS directives for form validation AngularJS has many directives to run form validation. The simplest example Fullscreen demo. myForm.username1. myForm.email1. Fullscreen demo.

A Reusable Bootstrap Modal AngularJS Directive for Forms - Panther Software Getting Started – The Form Directive. My basic goal is to create an AngularJS Directive that: presents a consistent ui interface has configurable attributes for the form’s submit, cancel, title and body content modals are instantiated and displayed when required via a click event Modal Form Template. templates/form_modal.html contains a standard Bootstrap Modal . Note: form submit is via ng-submit="submit()" is first consumed by the directive and then delegated to a controller <div class="modal-header"> is configurable via {{title}} the form’s submit button display value="{{okButtonText}}" is configurable <div class="modal-body"> is specified by a partial via <div ng-include="template"></div> Modal Form Content. I’ll use a login partial as the form’s content: My goal is to include sessions/login.html inside templates/form_modal.html and instantiate and present the login form when a user clicks a login link or button. The Directive. When a user clicks on Login link, the directive will: Conclusion

Related: