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. 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) <h1 class="road">News</h1><ul id="news"><li ng-repeat="tumblrPost in posts"><tumblr-post post="tumblrPost"></tumblr-post></li></ul><p class="read-more"><a href=" target="_blank">Read more news</a></p> 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. 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. 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', []);