background preloader

5 Awesome AngularJS Features

5 Awesome AngularJS Features
AngularJS is a great JavaScript framework that has some very compelling features for not only developers, but designers as well! In this tutorial, we will cover what I consider to be the most essential features, and how they can help make your next web application awesome. AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript, while shoring up some of its glaring deficiencies. It is what HTML would have been, had it been built for dynamic content. In this article, we will cover a few of the most important AngularJS concepts to get the "big picture." It is my goal that, after seeing some of these features, you will be excited enough to go and build something fun with AngularJS. Think of your model as the single-source-of-truth for your application. Data-binding is probably the coolest and most useful feature in AngularJS. There must be a better way! Related:  DevJS

AngularJS directives for Twitter's 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)

Cool Tools – Wideo, Moovly, and PowToon – Animated Videos Made Easy | EXCHANGE/ideas Have you ever wanted to create a sweet splainer video? (I swear ‘splainer’ is a real word. At least as long as appearing in urban dictionary counts.) Do you admire the animated videos you see on websites and wish that you could make one for your course that will really bring a concept to life? Luckily, if this is your heart’s desire, there are some tools that will do just that. Sure you could use tools that are slick and cost money like Tumult Hype or Adobe Edge, but what about free tools? Introducing Wideo, Moovly, and PowToon… Cue logos… These three online tools do very similar things. And just to prove how easy they are to use, here are three more videos using the same image files in each of the three platforms. Create an account for one or more of these tools, bring along a generous helping of creativity, a topic that needs splained (okay, that isn’t a real word.

Build Apps with AngularJS This guide gets you started building Chrome Apps with the AngularJS MVC framework. To illustrate Angular in action, we'll be referencing an actual app built using the framework, the Google Drive Uploader. The source code is available on GitHub. The Google Drive Uploader allows users to quickly view and interact with files stored in their Google Drive account as well as upload new files using the HTML Drag and Drop APIs. Note: You can also build apps which talk to 3rd party APIs/services that are OAuth2-enabled. The Uploader uses OAuth2 to access the user's data. Key features this app uses: AngularJS's autodetection for CSP Render a list of files fetched from the Google Drive API HTML5 Filesystem API to store file icons offline HTML5 Drag and Drop for importing/uploading new files from the desktop XHR2 to load images, cross-domain chrome.identity API for OAuth authorization Chromeless frames to define the app's own navbar look and feel The View is the easiest, so let's start there. Woot!

johnpapa/angularjs-styleguide Databinding in angularjs AngularJS' Internals In Depth Advertisement AngularJS presents a remarkable number of interesting design choices in its code base. Two particularly interesting cases are the way in which scopes work and how directives behave. The first thing anyone is taught when approaching AngularJS for the first time is that directives are meant to interact with the DOM, or whatever manipulates the DOM for you, such as jQuery (get over jQuery already1!). After the confusion sets in, you start learning about the advanced concepts: the digest cycle, isolate scopes, transclusion and the different linking functions in directives. This article will navigate the salt marsh that is AngularJS scopes and the lifecycle of an AngularJS application, while providing an amusingly informative, in-depth read. (The bar is high, but scopes are sufficiently hard to explain. If the following figure looks unreasonably mind-bending, then this article might be for you. (Disclaimer: This article is based on AngularJS version 1.3.05.) That’s good enough.

Angular.js Backbone.js or which has better performance AngularJS: Developer Guide: Controllers Loading... In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. Use controllers to: Set up the initial state of the $scope object.Add behavior to the $scope object. Do not use controllers to: Manipulate DOM — Controllers should contain only business logic. Typically, when you create an application you need to set up the initial state for the Angular $scope. The following example demonstrates creating a GreetingController, which attaches a greeting property containing the string 'Hola!' var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!' We create an Angular Module, myApp, for our application. We attach our controller to the DOM using the ng-controller directive. Edit in Plunker

8 Tips for Angular.js Beginners | The Discussion Delegate | Vercingetorix Technologies | iPhone, Android, Blackberry, PHP, Generatrix, Wordpress App Development in Pune, India We started working with Angular.js recently and after spending a few days on it, I realised that there a big need for beginner tutorials on it. I’ve tried to document some of the things you might need on day 1. 1. The documentation still sucks so it’s okay if you’re taking more time. Yes, it’s really worth it. Discussion from StackOverflow: it makes perfect sense, but how did you know that? The documentation sucks and you have to assume stuff. If you need resources, you should try out the following a. b. c. d. e. f. g. 2. I have divided the code into two files. 3. I do this in the App.js file 4. This is again done in the app.js file app.factory('db', function() { var items = []; var modify = {}; var modify.addItem = function(item) { items.push(item); return 'added item'; }; var modify.getItems = function() { return items; } return modify; }); 5. 6. 7. a. give a “name” to your form e.g. 8.

A look at AngularJS Material Design with Google Polymer in mind | Sebastian Metzger After trying out Google Polymer and diving into the world of web components, I also got excited about Angular Material Design, that is currently heavily under development on GitHub. The project’s goal is to provide a reference implementation of Material Design based on AngularJS. AngularJS Logo Ionic framework Logo Besides the core AngularJS developer crowd, it is also pushed forward by the guys behind the Ionic framework.Ionic is an exciting looking new framework for HTML5 mobile apps based on AngularJS and Cordova. To start off, let’s have a short introduction to AngularJS and Material Design. The rise of AngularJS Google Trends JS Framework War I don’t know how statistically significant a Google Trends search is to judge the quality of a JS framework, but the graph pretty much shows, that AngularJS crystallized itself out of the mass of JS MVC style frameworks in the last two years. Material Design Angular Material Design Mock Up of Google Inbox style front end in Angular Material Design Pros

More AngularJS Magic to Supercharge your Webapp Make way for another amazing article which covers more of AngularJS Due to the popularity of the previous article, Use AngularJS to power your web application, I've decided to cover more of AngularJS to make it fun and easy for all developers to play around with it. AngularJS is an incredible tool, but a lot of the more advanced features are hidden in deep within the documentation and others are too tricky to learn direclty. AngularJS is also a fairly new product and as a result there are many features that are yet to be discovered and blogged about. This article will cover more of the hidden gems of AngularJS and introduce new development tricks and methods to supercharge your AngularJS application. This page was first published on October 2nd 2012 and was last updated on January 30th 2013. This article is a sequel to the previous article titled Use AngularJS to Power Your Web Application. Click here to view the previous article This is the most important thing to know about AngularJS.

Roundup of Best JavaScript Libraries - March 2014 - Code Geekz A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. JavaScript serves a multitude of ways by which to create interactive websites, web applications. Utilizing JavaScript into your web projects can enable you to move HTML elements around, create a variety of custom animations, and give your visitors a better end user experience. For March 2014, We have rounded up a list of fresh and recently released JavaScript libraries to help you enhance your website related tasks and keep your website a step ahead of the competition. We hope you will find a few of the JavaScript libraries below beneficial to your web related needs. 1. Z.js is a JavaScript file that turns content invisible using Unicode’s ZW(N)Js (\u200c, \u200d). 2. Nanobar.js offers very, very lightweight progress bars, coming in at around 725 bytes when gzipped. 3. jsCache 4. 5. 6. 7. 8. 9. 10. 11.

35 JavaScript Chart and Graph Libraries for Developers - Code Geekz A chart is a graphical representation of data, in which “the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart”. Almost every development or project management team requires charts or graphs to understand and visualize the complex data and workflow for their web applications. Visualizing charts can help you to understand complex data easily which may results in improved productivity and reliability for your web applications & projects. An easy way to create charts and graphs for such web projects and applications is JavaScript Chart and Graph Libraries. In this article we have compiled a list of Top 35 JavaScript chart and Graph libraries that suit different needs from simple charts to high complex charts. 1. FusionCharts is the oldest member in the world of JavaScript charting libraries and is still going strong. 2. Ember Charts is a charting library built with the Ember.js and d3.js frameworks. 3. 4. 5. xCharts 6. 7. 8. 9. 10.