The differences between a service, factory and provider are subtle.
It turns out that a service and factory are actually providers that differ in how they return a value. Let me just link the whole thing (credits go to Ben Clinkinbeard and Miško Hevery).
Here’s a trick I’m using to easily define reusable components over multiple files, contained within a specific module (which will function as a collection of components).
First, know that calling
angular.module('MyModule') references an existing module, whereas
For example, let’s define an MainApp module and a GenericComponents module, with components spread across files. Here’s one way to do that:
Forms in angular are pretty straightforward once you know how to read its state. So let’s look at a collection of tricks and put together and complete working Bootstrap 3 form with fabulous form validation.
In this form:
- No validation while initially filling the form
- On submit: validate form and keep updating fields as they change
- Red and green colors indicate the user’s progress
- Once submitted invalid form, the submit button becomes available only once the form is valid
- Bootstrap 3 form style, including help text and custom tailored alerts for validation messages
Here’s a neat little trick I discovered that let’s you do wildcard expression checks for an input value:
Wildcard expression validation that marks input valid / invalid
The thing with directives, controllers, scope, link and compile is: they all share keywords and concepts. This puts so much trees in front of the forest, that until you’re clear on the individual underlying concepts you have no hope of understanding the abstractions made on top of it. And so it took me a long time to understand how I can make directives/controllers share state, even if they’re not nested.
That last part is important, because in essence, you can’t share data unless you also share an ancestor. The only exception to this is if you’re using decoupled communication through events and eventlisteners.
The example we’re not doing today
Ok, let’s dive into today’s problem we’re not solving: A form with several inputs, and each one have a tooltip, except the tooltip should be displayed on a specific location, the same for all inputs. Like an information box… in fact it’s not a tooltip at all.
16-05-2015: The code of this post was turned into a GitHub project called angular-logger
Let’s start by prepending timestamp and class name
Recently I’ve been on the lookout for a way to configure Angular’s logging module. Specifically, I wanted its output prepended with a date and a context string, say a ‘class’ name or name of the controller doing the logging.
Something like this (example from java):
"2013-12-23 19:44:39,619 INFO [java.sql.DatabaseMetaData]: Table not found: Employees"
Also, if we enable per-class loggers, how can we mute logging for certain classes?