background preloader

Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers

Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers
Many developers struggle with how to organize an application's code base once it grows in size. I've seen this recently in AngularJS and JavaScript applications but historically it's been a problem across all technologies including many Java and Flex apps I've worked on in the past. The general trend is an obsession with organizing things by type. It bears a striking resemblance to the way people organize their clothing. Let's take a look at angular-seed, the official starting point for AngularJS apps. The "app" directory contains the following structure: css/img/js/ app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/ The JavaScript directory has one file for every type of object we write. This is a mess. The next logical pass at organizing JavaScript involves creating a directory for some of the archetypes and splitting objects into their own files. Let's imagine we're building a simple e-commerce site with a login flow, product catalog and shopping cart UI's. Nice!

Related:  AngularangularJS

AngularJS and scope.$apply If you’ve written a non-trivial amount of code in AngularJS, you may have come across the $scope.$apply() method. On the surface, it may seem like just a method you call to get your bindings to update. But why does it exist? And when do you need to use it? To really understand when to use $apply, it’s good to know exactly why we need to use it, so let’s dive in!

Google's AngularJS Style Guide This is the external version of a document that was primarily written for Google engineers. It describes a recommended style for AngularJS apps that use Closure, as used internally at Google. Members of the broader AngularJS community should feel free to apply (or not apply) these recommendations, as relevant to their own use cases. This document describes style for AngularJS apps in google3. This guide supplements and extends the Google JavaScript Style Guide. Best practices for unit testing angular directives I'm writing some unit tests for directives in AngularJS using Jasmine and Karma as my test runner. As I'm doing this, I'm wondering whether or not I'm following the best means of setting this up and was hoping someone could help me out. If my directives use a template by means of templateUrl, is it best to import the actual template, which has proved to be a bit tricky, or to insert a mock of the template using $templateCache and make my assertions of of that? For unit testing, it would seem to me that creating mocks would be the best option because it avoids pulling in the additional resources which clutters up the point of unit testing. Also, I'm having trouble searching within individual DOM elements, and have been using element.text() to search for content that is bound to the DOM.

Modeling Data and State in Your AngularJS Application Respect your data. Contain your state. Data and state are the foundation of your application. These two items should be absolutely respected. As you work through the AngularJS documentation, these two items are generally stored on the controllers.

A Step-by-Step Guide to Your First AngularJS App (with code) What is AngularJS? AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications. And Why Should I Use It? If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility. Best Practices for Building Angular.js Apps Burke Holland had a fantastic post explaining how Angular loads an application and comparing the merits of browserify vs require.js in an Angular app. I’ve worked with Angular on quite a few apps at this point, and have seen many different ways to structure them. I’m writing a book on architecting Angular apps right now with the MEAN stack and as such have researched heavily into this specific topic.

Why its best practice to inject $rootScope and $controller unit testing controllers? $rootScope has some attached functionality. For example, $broadcast, $emit, $on (probably more than that). As such, supplying your own fakes might not test the actual behaviour. I've found it useful to only mock things that can't be run in a test suite. For example, $window and $http. AngularJS Roundup: ngDialog.js, ocLazyLoad, angular-validation People keep sending me AngularJS scripts to write about, so I’ve collected a few together to start a probably infrequent AngularJS Roundup. This week we’ve got three scripts to talk about, and the first is ngDialog.js. ngDialog.js ngDialog.js (GitHub: likeastore / ngDialog, License: MIT) by Dmitri Voronianski is a modal dialog and popover provider. You can load it and display a dialog like this: The markup for the dialog can be a string, or loaded from a template: