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

ajoslin/angular-mobile-nav angular-app/angular-app Sample Application with Angular.js After I blogged a three-part Backbone.js tutorial (part 1, part 2, part 3), a number of people asked me to try Angular.js. So I decided to take it for a test drive. I thought it would be interesting to rebuild with Angular.js the Wine Cellar application I had built with Backbone. If you are new to my Wine Cellar application, it is a simple CRUD app that allows you to manage (create, update, delete) wines in a Wine Cellar. You can run the application here. Application Walkthrough The best way to get started with Angular.js is to go through the excellent tutorial that is part of the documentation, so I’ll only provide a high level overview of my code here. Like the Backbone.js implementation, the Angular.js version is a deep-linkable single page application. index.html is defined as follows: The application is driven by a set of Controllers that I defined in controllers.js as follows: RouteCtrl defines the routes of the application. Impressions Download

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.

angular/angular-seed 5 reasons to use AngularJS in the corporate app world | Digital Caveman The current situation in the world of corporate apps can be described with one word, chaotic. Between legacy code that has been around for N years jumping from developer to developer with no documentation. To over complicated interfaces that are over complicating the code. To a mixture of N technologies in one single app. This post represents my opinion of why using AngularJS in corporate applications will not only bring sanity to your apps, but it will allow them to evolve into the future. 1) Start little by little In an Enterprise you are probably starting with an ugly brownfield project, not a nice green field. With AngularJS this is not the case. 2) Fast developer adoption, at just a click away Technology changes so fast that keeping up to speed has become quite a hard task. One of the cool things that have popped not so recently into the scene are Javascript MVC frameworks. 3) Productivity and Scalability. In order to fix this we can use Yeoman. 4) Tests tests tests Like this:

johnpapa/angularjs-styleguide 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.

Developing with AngularJS - Part I: The Basics There's many, many different introductions to AngularJS available on the internet. This article is not another introduction, but rather a story about my learning experience. It all started way back in January of this year. I was working as a UI Architecture Consultant at Taleo/Oracle, my client for the last 21 months. My gig there ended last month, but they agreed to let me publish a series of articles about the knowledge I gained. Project Background The Director of Product Management had been working on the concepts for a new project - codenamed "Visual MyView". From his original email about the above mockup: The intent here is that one of the columns has rows that have a similar width. Row 1 is comprised of 'summary' widgets that are 'todo' items. I started the initial layout with static HTML and CSS and had a wireframe to show by mid January. SummaryTasksChartsReports To create widgets, we had to decide on a common schema for them. Angular Basics Usage: Drag-and-Drop Carousel Issues Summary

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.

node.js - AngularJS and ExpressJS Routing issue Developing with AngularJS - Part I: The Basics There's many , many different introductions to AngularJS available on the internet. This article is not another introduction, but rather a story about my learning experience. It all started way back in January of this year. I was working as a UI Architecture Consultant at Taleo/Oracle, my client for the last 21 months. My gig there ended last month, but they agreed to let me publish a series of articles about the knowledge I gained. Project Background The Director of Product Management had been working on the concepts for a new project - codenamed "Visual MyView". From his original email about the above mockup: The intent here is that one of the columns has rows that have a similar width. Row 1 is comprised of 'summary' widgets that are 'todo' items. I started the initial layout with static HTML and CSS and had a wireframe to show by mid January. Summary Tasks Charts Reports To create widgets, we had to decide on a common schema for them. Angular Basics Usage: Drag-and-Drop Carousel Issues

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

Related: