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.
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