Angular directives for Bootstrap. The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...). getRawNode(element) Takes a jQuery/jqLite element and converts it to a raw DOM element. parameters element(Type: object) - The element to convert. returns (Type: element) - A raw DOM element. parseStyle(element) Parses a numeric style value to a number. Value(Type: string) - The style value to parse. (Type: number) - The numeric value of the style property. offsetParent(element) Gets the closest positioned ancestor. element(Type: element) - The element to get the offset parent for.
(Type: element) - The closest positioned ancestor. scrollbarWidth(isBody) Calculates the browser scrollbar width and caches the result for future calls. IsBody(Type: boolean, Default: false, optional) - Is the requested scrollbar width for the body/html element. (Type: number) - The width of the browser scrollbar. position(element, includeMargins)
Angularjs: Rendering input types using ng-switch. Devers : Variable templates for an AngularJS directive. Sometimes web services and APIs return different data sets for the same type of object. For example, the tumblr API will return a list of posts, but each post type has different data associated with it: text posts have a title and body, while photo posts have captions and images. Since having different components and directives for each post type doesn't make much sense (especially when they're all displayed in one stream, as on tumblr), it's beneficial to be able to conditionally load a template based on the post type of each individual post. This code is based on these two articles/posts: and here is the tumblr API for reference: components.js news.html (all posts view) text.html (tumblr text post component) video.html (tumblr video post component, for comparison)
Plunker. A Practical Guide to AngularJS Directives. AngularJS and Play Framework - Matthias Nehlsen. I felt a sudden urge to write a chat application during Scala Days. Writing the server side code in Scala was fun and only took like 30 minutes. The JavaScript part was not nearly as gratifying. Changing the client to AngularJS over the last couple of days allowed me to reclaim client side development joy. UPDATE 06/27/2013: Here is how it looks like. The source is on GitHub. There should be actors randomly reciting Romeo and Juliet in Room 1 above if everything worked, but that’s not our problem right now. I challenged myself to write a chat server for this purpose, with 10 lines of code on the server side (or less). What happens here is fairly straightforward once we look at the drawing: The Concurrent object is the central information hub which provides us with a channel to push JSON into.
What is an Iteratee? Enumeratees are adapters between Enumerators and Iteratees. Let’s visualize this: I wrote an initial version using jQuery to manipulate the DOM. Executing Jasmine Tests in Play 2.0.4 - Pere Villega. Christmas break is over, and on a whim I started to check AngularJs. If you haven’t tested it yet, do it. I’ve toyed around with Backbone and some other Javascript single page app frameworks, and Angular is by far the one that I liked the most. It has simplicity embedded in its core, and turning tedious tasks (as setting controllers) into something trivial makes it a pleasure to use. Simplicity. Such an important concept, and one which is seldom present in frameworks. But I digress. So we have a Javascript framework, and obviously we want to test it. It is on moments like this when Open Source shows its worthiness. Well, to be honest it wasn’t so simple, that’s why I decided to document it here to save time to other interested people.
Integrating Sbt-Jasmine This is quite straightforward, you just need to follow the instructions from the Sbt-Jasmine page. This will load the plugin directly from Github into your project. Adding Jasmine as part of your test cycle The final code looks like: AngularJS Form Validation. Today we’ll be looking at at the ways that Angular helps us do form validations. We’ll be talking more on forms using Angular (just like our other article: Submitting AJAX Forms: The AngularJS Way). Don’t worry though, that article is not required. We’ll focus on client side validation and using the built in Angular form properties. Here’s a quick demo. Demo Requirements Name is requiredUsername is not required, minimum length 3, maximum length 8Email is not required, but has to be a valid emailForm submit is disabled if the form isn’t validShow a required or invalid email errorAlert awesome if submitted correctly Now that we know what we want, let’s get to building.
Angular Form Properties $valid, $invalid, $pristine, $dirty Angular provides properties on forms that help us validate them. Angular also provides classes on the form and its inputs so that you can style each state accordingly. Accessing Angular Form Properties To access the form: <form name>. Setting Up Our Form Validation Rules ... Iffy Can: Angular service or factory? Tl;dr is at the end In various AngularJS tutorials and documentation, the authors choose to use service or factory but don't explain why you would use one or the other. Few mention that value and constant are also options.
Let's see why you would use one over the other. We should also understand how providers work: provider Here's the source for the provider method: function provider(name, provider_) { if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (! Name is a string. provider_ can be one of three things: function If a function is passed in, the function is called with dependency injection and should return an object with a $get method. Whatever the second arg to provider is, you eventually end up with an object that has a $get method. // You can run this // Create a modulevar hippo = angular.module('hippo', []); // Get the injector (this happens behind the scenes in angular apps)var injector = angular.injector(['hippo', 'ng']);