background preloader

General/Misc. Angular Topics

Facebook Twitter

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! Angular Structure: Refactoring for Growth. Your Angular app is growing and you want your structure to adapt with it. Let’s explore one way you can approach this.

As your app grows it becomes even more important to structure it in a way that makes it easy to manage and maintain it. I recently posted a common technique I use when I create a new app to help structure it. A simple structure by type is easy out of the gate, as the app generally starts with a single set of features. This usually starts as the first module you write. Now fast forward and imagine you are working on an app that has a handful of modules, with dozens of views and controllers. How do you organize your code now? Options for Managing Growth I like the type organization (folders for controllers and views, for example), but as an app grows, instead of putting that at the root and putting all views and controllers in their own folders, sometimes it makes more sense to organize them 1 level deeper into feature areas.

So how might this look? Sort By Type Your Choice. AngularJS: an Overview - Glenn Stovall. AngularJS is a JavaScript framework made by Google for building complex client-side applications. Angular’s killer feature is ‘directives’ which allow you to extend HTML by creating your own tags and attributes. Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the structure. Let’s take a look at the main components of AngularJS and how they work, and why you should strongly consider Angular for your next project. The Philosophy of AngularJS Data First If you are familiar with JavaScript libraries like jQuery, using AngularJS will require a bit of a paradigm shift. Highly Testable AngularJS was designed to be testable end-to-end. Declarative HTML Angular is designed to extend HTML to make it the language you need for building complex web applications.

Data Binding Let’s take a look at a very simple AngularJS app, that uses two-way data binding. Modules Controllers Directives Services. Authentication in Single Page Applications with Angular.js - A Modest Proposal. 9/2/2014 update:The GitHub repo now uses UI-router instead of the standard ngRoute routing module. This blog post will still illustrate the original technique utilizing ngRoute, while information regarding the UI-router approach can be found in the GitHub repo as well as this blogpost. The example app in the repo has been deployed to Heroku, so now you can test it out live for yourself right here. A separate blogpost discussing the complementing server-side code can be found here. I have been working a lot with Angular.js lately, and love how easy it makes it to create web applications with rich client-side functionality.

It's an extremely useful asset in keeping your own client-side code lean, making it easy to separate business logic and declarative markup for anything view specific. How do I deal with authentication and authorization in single page applications? The server needs to communicate what permissions/role the client has on inital page load. Setting up client-side routing. How does Angular JS relate to Google Closure? - Super Answer.

Posted on 06-20 by Polan (798 votes, average: 4.8 out of 5) Now that AngularJS 1.0 is released I am wondering how this project fits together with the other general-purpose JavaScript framework / tool from Google, Closure. I have only seen basic description of those two technologies (and read about a half of the book on Closure) so I have no direct experience but this is how it looks to me: Closure is a set of technologies that can be used separately. What I find probably the most appealing is: Closure Compiler which seems to "fix JavaScript" in a sense that it warns against typical issues, provides some compile-time checks (not all people like this but probably most Google developers do, and I do too).

So these two technologies seem to be aimed at quite a different level of abstraction so my first thought was, can they be used together? "In that case, there would be no reason for them to get performance enhancing drugs that are illegal. " [1] Related Articles: AngularJS, ARIA and accessibility. Sent: 05 March 2013 14:33 To: acces... @googlegroups.comSubject: RE: AngularJS, ARIA and accessibility Ian, The main content area is always just a landmark region, e.g., role="main" as on Google results. Widgets may be in the main region or other regions as well. The main content itself could be a mix of many widgets and content. Again, you can just think of a widget in the same way you think of a form control. Matt King IBM Senior Technical Staff Member I/T Chief Accessibility Strategist IBM BT/CIO - Global Workforce and Web Process Enablement Phone: (503) 578-2329, Tie line: 731-7398 matt... "Ian Sharpe" <isfo...

To <acces... Subject RE: AngularJS, ARIA and accessibility Hi Matt / Brian I'm following this discussion with interest as I have also struggled to find good examples demonstrating how to address this problem in terms of accessibility. However, the mention of widgets has confused me a little here. Cheers Ian -----Original Message----- From: acces... Mark, Bryan is spot on. Hey Matt, Joshdmiller/ng-boilerplate. Angular - $compile: How it works, How to use it. What is a "View"? A view is HTML, plain and simple. A view is a DOM element and it's children. Views will contain markup and directives in that markup. What Views are "Compiled"? All views are compiled by Angular.

How does view compilation work? View compilation in Angular is some of the most ingenious functional programming I've seen in JavaScript. Binding a View to a Scope This is done when the compiled view is called and a scope is passed to it. When does this occur? When you angular app is initially bootstrapped.During the processing of some directives, such as ng-repeat, it will be called on a subsection of your views.When ng-view is updated after a routing event it's called on the incoming view.When ng-include changes, it's called on the incoming view.I'm sure there are many more places I'm not thinking of, but those are the big ones I can think of that happen OOTB. When should I use $compile? Truthfully? If you do find yourself needing to use compile. TL;DR Version. Basic Structure of a Chrome Packaged App.

How do I "think in AngularJS/EmberJS (or other client MVC frameworks)" if I have a jQuery background.