background preloader

Angular-UI Bootstrap

Angular-UI 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)

ng-repeat The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. Special properties are exposed on the local scope of each template instance, including: Creating aliases for these properties is possible with ngInit. Special repeat start and end points To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively. The example below makes use of this feature: <header ng-repeat-start="item in items"> Header {{ item }}</header><div class="body"> Body {{ item }}</div><footer ng-repeat-end> Footer {{ item }}</footer> And with an input of ['A','B'] for the items variable in the example above, the output will evaluate to:

Foundation: HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo

Yeoman - Modern workflows for modern webapps Getting started Free Bootstrap templates and premimum templates marketplace. AngularUI for AngularJS API Grunt: The JavaScript Task Runner Making Angular.js Real-Time with Pusher - Pusher UPDATE: We released an official Angular.js library since that blog post. You can read more about it in this announcement Front-end application frameworks have given developers the tools to build client side applications with rich user experiences. Let’s say your application is built with one of these frameworks and you want to notify connected clients that something on the server has changed – how can you do that while keeping a rich user experience? This is where Pusher and angular-pusher come into play. Angular.js Angular.js is a client side JavaScript framework built by Google. All of these are used within controllers to create, retrieve, update, and delete data while providing nice features for manipulating the HTML DOM with little custom JavaScript code. In a simple Angular.js application, data is retrieved and sent to and from a backend server through an $http or $resource service provided by the framework. Making Angular.js real-time with Pusher Get Pushing

Highslide JS - JavaScript thumbnail viewer AngularJS ngAnimate: Tutorial - How to make Animations with AngularJS The directive nganimate is very simple. You just need to declare the ng-animate attribute to an element that have another directive that changes the DOM. You can use the animations with the directives: And there are three ways to make animations in AngularJS: CSS3 Transitions CSS3 Animations Javascript I think that the CSS3 Transitions is the easiest way to do animation, but with the CSS3 Animations you can do much more complex animations. We will provite plunkers sample for a lot of cases, than you just need to change the css file to change the animation. Important You need to use at least the AngularJS 1.1.5. CSS Class Names By default, ngAnimate attaches two CSS classes for each animation event to the DOM element to achieve the animation. For example, if you have an animation named animate, during the ngRepeat enter phase, the Angular will attach the class "animate-enter" and them the class "animate-enter-active". Sample In both cases, the classes will be: CSS Transition Contribute Samples

Related: