trochette/Angular-Design-Patterns-Best-Practices · GitHub AngularJS: Lessons learned At Devoxx 2012 I attended the AngularJS presentation by Igor Minar and Misko Hevery. I was very enthusiastic about the capabilities of this front-end framework. Therefore I started experimenting with it. I created a sample for the Axon Framework, read more about it here. The next step was a bigger project, writing an Elasticsearch plugin to query your Elasticsearch instance. In this blog post I'll give you some lessons learned with respect to AngularJS. Introduction I am not going to write down a complete guide into AngularJS. If you want to tag along using the sources, checkout my Github project. The AngularJS tricks Use the angular quick start (aka angular-seed) The Angular team provides a project template that they call the angular-seed. Using partials When you have the plugin installed in Elasticsearch and you browse to the plugin, you'll get to see the index.html. Custom directive for navigation Concluding
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. Still, I offer a simple solution that many have said they prefer to more complicated setups. 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. .noConflict()
Angular and i18next 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. 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. goog.provide('hello.about.AboutCtrl'); goog.provide('hello.versions.Versions'); Why? Modules Why? For example: Why? Why? No:
Twelve Commandments Of Software Localization Advertisement You’ve presented the new website and everyone loves it. The design is crisp, the code is bug-free, and you’re ready to release. Then someone asks, “Does it work in Japanese?” You break out in a cold sweat: you have no idea. Localization makes your application ready to work in any language — and it’s much easier if you do it from the beginning. 1. The first step of localization is to get user-visible strings out of your code and into resource files. Most resource files work by giving each string a name and allowing you to specify different translation values for that string. name = Username Or they use .pot files like this: msgid "Username" msgstr "Nom d'utilisateur" Or they use XLIFF files like this: <trans-unit id="1"><source xml:lang="en">Username</source><target xml:lang="fr">Nom d'utilisateur</target></trans-unit> The resource files are then loaded by a library that uses a combination of the language and country, known as the locale, to identify the right string. 2. 3. 4. 5.
Google JavaScript Style Guide We follow the C++ formatting rules in spirit, with the following additional clarifications. Curly Braces Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they're opening. For example: if (something) { // ... } else { // ... } Array and Object Initializers Single-line array and object initializers are allowed when they fit on a line: Multiline array initializers and object initializers are indented 2 spaces, with the braces on their own line, just like blocks. Long identifiers or values present problems for aligned initialization lists, so always prefer non-aligned initialization. Not like this: Function Arguments When possible, all function arguments should be listed on the same line. // Four-space, wrap at 80. When the function call is itself indented, you're free to start the 4-space indent relative to the beginning of the original statement or relative to the beginning of the current function call. Passing Anonymous Functions Blank lines
Brian Ford AngularJS is like the missing Batarang on your utility belt of web development awesomeness. It gives you two-way data binding that's both easy to use and fast, a powerful directive system that lets you use create reusable custom components, plus a lot more. Express is an excellent webserver for Node.js that provides routing, middleware, and sessions. In this tutorial, I'm going to walk through writing a simple blog app with Angular and Express. If you'd rather skip to the end and see the finished product, you can grab the finished product from Github, or take a look at a live demo here. Anatomy of the App This application is really divided into two parts: client, and server. Getting the Angular Express Seed To kick start the process of writing an AngularJS app, I've created the Angular Express Seed, based on the Express web server (which runs on Node.js) and the Angular Seed. To get started, you can either clone the angular-node-seed repo from Github: or download it as a zip. λ → npm install
Angular Best Practice for App Structure (Public) Best Practices · angular/angular.js Wiki · GitHub Related: Anti-Patterns Namespace distributed code You shouldn't worry about prefixing internal code, but anything you plan to OpenSource should be namespaced The ng- is reserved for core directives.Purpose-namespacing (i18n- or geo-) is better than owner-namespacing (djs- or igor-)Checkout ui-alias to remove 3rd party prefixesOnly use .$broadcast(), .$emit() and . Differences Between Providers in AngularJS After reading a lot of articles and sample code it wasn’t clear to me what the difference was between the several providers like provider, factory and service. Without this knowledge you could not select the proper provider. I will explain the differences between the providers with examples. What is a provider? If you look at the AngularJS docs you will find the next definition of a provider: A provider is an object with a $get() method. AngularJS uses $provide to register new providers. constant A constant can be injected everywhere. [code language=”javascript”] var app = angular.module(‘app’, []); app.config(function ($provide) { $provide.constant(‘movieTitle’, ‘The Matrix’); }); app.controller(‘ctrl’, function (movieTitle) { expect(movieTitle).toEqual(‘The Matrix’); }); [/code] AngularJS provides a convenience method for creating a constant. [code language=”javascript”] app.constant(‘movieTitle’, ‘The Matrix’); [/code] value A value is nothing more than a simple injectable value. service