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. 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! JavaScript is Turn Based The JavaScript code we write doesn’t all run in one go, instead it executes in turns. Instead, whenever there is a task that takes some amount of time, such as an Ajax request, waiting for a click event, or setting a timeout, we set up a callback function and finish our current turn. Let’s look at an example JavaScript file: var button = document.getElementById('clickMe'); function buttonClicked () { alert('the button was clicked'); } button.addEventListener('click', buttonClicked); function timerComplete () { alert('timer complete'); } setTimeout(timerComplete, 2000); How do we update bindings? $scope.

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

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. Style Note: Examples on the AngularJS external webpage, and many external apps, are written in a style that freely uses closures, favors functional inheritance, and does not often use JavaScript types. 1 Angular Language Rules 2 Angular Style Rules 3 Angular Tips, Tricks, and Best Practices 4 Best practices links and docs 1 Angular Language Rules Manage dependencies with Closure's goog.require and goog.provide Choose a namespace for your project, and use goog.provide and goog.require. Why? Modules Why? For example: Why? JSCompiler Flags

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. AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. Angular provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. Finally, I love Angular because of its flexibility regarding server communication. So, Where Do I Begin? First, let’s decide the nature of the app we want to build. <! Routes

AngularJS Tutorial: Learn to Rapidly Build Real-time Web Apps with Firebase In response to the feedback from our original tutorial, we decided to take the new version of the tutorial in an entirely new direction. Mucking around in backend code doesn't belong in an AngularJS tutorial, and we've found an elegant solution to this problem. This tutorial will guide you through the process of creating a frontend-only application. Our intention with this tutorial is to provide the AngularJS community with instructions on how to design and build an ultra-modern application. The application you are building will go beyond basic use of AngularJS, and we will attempt to explore as much of the framework as possible. The tutorial is a living thing, a work in progress. Source code and PDF eBook This tutorial is provided to you free of charge on the site. We encourage you to purchase the source code and PDF of this tutorial to help fund our continued efforts in building more material and features for Thinkster. This application is built on a stack that defies convention.

Best Practices for Building Angular.js Apps Update 2016–04–17: I wrote this article almost 2 years ago for Angular 1.x. This article is still tremendously popular somehow, but I want to warn that it may not be the best for Angular 2.x or other methods of building JS front-ends. I have spent almost all my time writing CLI code since I wrote this, so I have really no context to say if this is still the best practice I considered it to be in 2014. 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 must note that if I was on a project with his structure, I would be content. Before we start though, the concept of modules in the world of Angular can be a bit confusing, so let me lay out the current state of affairs. What modules are in JavaScript JavaScript comes with no ability to load modules. .noConflict() Sample App

Everything you need to understand to start with AngularJS Leveling Up in Angular - HTML5DevConf in Angular Alicia Liu @aliciatweet Sr Software Engineer, Lift Enjoyment of Angular AngularRULEZ I'm doingit wrong! services,modules promises,directives,... Module Organization Module By Feature Supports asynchronous loading of modules in the future From Angular Developer Guide Service vs Factory var Mario = function() { this.size = 'small'; }; Mario.prototype.eatMushroom = function() { this.size = 'large'; }; myModule.service('marioService', Mario); // calls new Mario() Provider Asynchronous Events // in some controller $scope. What happens if the data doesn't load? Promises $q var deferred = $q.defer(); svc.getMario = function() { return deferred.promise; }; ... deferred.resolve(data); ... deferred.reject(error); svc.getMario().then( doStuffWithMario, displayError ); Using Promises Chaining $q.all $q.when Interceptors Resolve myModule.controller('CharacterCtrl', function($scope, character) { $scope.character = character; }); Why Write Custom Directives? Restrict Scope

Related: