<learning class='always'>... AngularJs seems to be getting a lot more tweets, posts and samples lately so I thought it might be useful to record the resources I looked at when considering whether or not to invest time in Angular.
Where did I start? Now sometimes I just jump into something and try building something and learn as I go. Brian Ford. Bower is a new package manager for client-side components by talented engineers at Twitter.
If you come from the Node.js world, you can think of Bower as "NPM for client-side stuff. " Incidentally, the API and configuration is very similar to NPM. How does Bower relate to AngularJS? If you've used Yeoman, you might have noticed Bower being used to install and update libraries like AngularJS. But besides just JavaScript managing the versions of various libraries for your app, you can use Bower to find, install, update, and even publish your own reusable components. It's worth mentioning that I think Bower is still far from perfect. Modules, and Components, and Packages! These terms have been overloaded to death, and if you've been following the various proposals for standardized ECMAScript modules floating around, things get confusing fast.
Package "Package" is a Bower concept. Component. CoffeeScript Love: AngularJS and CoffeeScript Tutorials. AngularJS is amazing… and hard as hell. I had been working in AngularJS for almost a year now, just right after they put Google’s logo in the web page.
That’s around 20-40 hours a week in the past 10 months plus free time. Using the technology, I have done Chrome Applications, Mobile Applications, Web Apps, Modules, Animations and Single Page Applications (SPA’s). I can’t link all of them due a NDA with my company, but you can see some of my work on my Coderwall profile and Codepen profile to have an idea. At my company, we even worked on a bridge with AngularJS and LungoJS to make mobile applications, known internally as L.A.B, in which I made a couple not too shabby PR’s. AngularJS Summer 2013 AngularJS knowledge base. If I want to create a mobile app with AngularJS, there’s a project that binds the awesome mobile framework LungoJS with AngularJS.
It’s called Lungo-Angular-Bridge or just LAB.If I need a good reference for creating modular CRUD components, I can check out the Angular-App. It includes nice examples for reusable Directives, Resources and Services.If I want to create a Chrome Extension with AngularJS, I need to use the ng-cspdirective at the top of my ng-app and whitelist my chrome resources with the compileProvider. Also, the easiest way to do so is through Yeoman, its Chrome Extension Generator and then just do bower i --save angular (short notation for install and save angularjs).
AngularJS - Components and Containers. Real World AngularJS Applications - Fundoo Solutions : Fundoo Solutions. A common question we get when we talk about AngularJS with anyone is, who outside of Google is using it?
Isn’t it just a toy project that only Google uses? Underscore JS for Array Manipulation - Fundoo Solutions : Fundoo Solutions. It is hard to write any web application nowadays without having to deal with array or object manipulation.
With the growing amount of complexity that we are pushing to the client, it goes without saying filtering, sorting and manipulating arrays and objects becomes a large portion of the business logic. So why would you need something as unobtrusively named as Underscore Js? Simple array manipulation – sorting, filtering, etc. – can be done pretty effortlessly in JavaScript, as modern browsers do have implementations of map, reduce, every and much more. But these kind of simple business logic have a habit of growing into a giant, big, unintelligible, chaotic mess before you even realize it. For instance, who here hasn’t written something like this before? Var array = [2,4,5,6,7,4,3,3,2,2,1,5,6]; var unique = []; for(var i=0; i < array.length; i++){ if(unique.indexOf(array[i]) === -1){ unique.push(array[i]); } } Now consider an alternative, where you could just write:
Disable ngClick - Jake Trent. Angular’s ngClicks can be attached to anything.
This makes it easy to add interactivity to elements on the DOM. Your program might require that these click callbacks be disabled at certain points, such as during form processing. ngClick doesn’t have a toggle built in. Let’s build one that might help. In our app we’re going to track the state of the UI via various events that get passed in scope. We slap our directive as an attribute on an element and it will respond by disabling or enabling on certain events. The directive allows for listening on multiple events. The directive sets the disabled attribute, commonly used in form fields. Lastly, the directive also sets a scope.disabledToggled variable on the scope of the element. How to set a property of an object in angularjs of which you don't know the name in advance, and still make sure the bindings work? - SoCode.
How to set a property of an object in angularjs of which you don't know the name in advance, and still make sure the bindings work? Changing the received app request format? When I <em>send</em> an <em>app</em> request from a native ios <em>app</em> i'm writing the request recieved by the user has a far different format than the same request sent from, for example, the Hackbook example <em>app</em> included with the sdk.
Most importantly it does not give me the '<em>Send</em> to Mobile' option that Hackbooks request has. AngularJS Paging with $location.path but no ngView reload. 10 Reasons Web Developers Should Learn AngularJS. There is no doubt that AngularJS – the self-proclaimed “superheroic JavaScript framework” – is gaining traction.
I’ll refer to it frequently as just “Angular” in this post. Front End Developer, UX & Interaction Designer, Software Engineer Javascript is beauty. An introduction to AngularJS. When I came across AngularJS a couple weeks ago, I was intrigued at first.
By the time I had worked through the set of tutorials available on the AngularJS website, I was thrilled to have found this framework. What is AngularJS? AngularJS is the (relatively) new kid on the coding block. To quote from their website it is “a structural framework for dynamic web apps” which is especially well-suited for building one-page web apps, although it’s certainly not limited to that. Developed in 2009 by Miško Hevery and Adam Abrons — both Google employees at that time — it is entirely JavaScript and entirely client-side, so anywhere JavaScript can run, AngularJS can run. According to Wikipedia the goal of Angular “is to augment browser-based applications with model–view–controller (MVC) capability” and it does just that, providing a binding/MVC framework.
Being accustomed to a powerful library like jQuery, it’s easy to want to mix it in to do things Angular can already do. Directives. Selectize.js. Current Value: "awesome,neat" Add and remove items in any order without touching your mouse.
Use your left/right arrow keys to move the caret (ibeam) between items. This example is instantiated from a <input type="text"> element (note that the value is represented as a string). Current Value: null This demonstrates two main things: (1) custom item and option rendering, and (2) item creation on-the-fly.
The most vanilla of examples. Bower components. Hacking AngularJS. This post comes from Angel Todorov at the Infragistics blog. In this blog post, I would like to cover two things: Some opinions on developing with AngularJS. 0inShare I gave a short internal talk today at ThoughtWorks about my experiences working with AngularJS. Peppered in this discussion were several of my opinions on what practices/libraries I’d consider using while working on an AngularJS app. I’ve listed them down here, in no particular order. Some AngularJS Pitfalls. In the past few months, I've been heavily using AngularJS.
It's a marvelous framework for modern web applications. But as with every new toy, there are some rough edges that you have to be aware of. In this post, I'll round up some gotchas I encountered. Assuming you already know your way around Angular, these may be helpful. Developing with AngularJS - Part IV: Making it Pop. Welcome to the final article in a series on my experience developing with AngularJS. I learned its concepts, beat my head against-the-wall with and finally tamed it enough to create a "My Dashboard" feature for a client. For previous articles, please see the following: The last mile of development for the My Dashboard feature was to spice things up a bit and make it look better.
We hired a design company to come up a new look and feel and they went to work. Within a week, we had a meeting with them and they presented a few different options. At first, I thought implementing this design might take quite a bit of effort, since it looked like it used custom fonts. Design Elements There are a number of elements in this new design that I had to create. Developing with AngularJS - Part III: Services. Developing with AngularJS - Part II: Dialogs and Data. 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. Developing with AngularJS - Part II: Dialogs and Data.
How to Create a Prototype Angular UI without a Back-end. So, you’ve got an AngularJS UI built out, but you’ll need a fleshed-out back-end before being able to really take it for a test drive, right? Actually, with the magic of Angular and its mocked $httpBackend, we don’t need no stinking back-end! If you’ve heard of $httpBackend, you’ve probably heard of it it terms of writing unit tests. AngularJS and CoffeeScript Resources. AngularJS is amazing… and hard as hell. A post-mortem on my first AngularJS project. The concepts of AngularJS Forms. Creating HTML form is quite easy for developers like us and I’m sure we don’t need to talk it again here since there are plenty of HTML form tutorial out there. Don’t worry we are not going to talk about plain HTML form, we are going to understand form in the context of Angular. 10 Reasons Web Developers Should Learn AngularJS. Rapid Prototyping with AngularJS. The idea hits you like a lightning bolt. It’s inspiring, transfixing and gripping! You scribble down a design, grab your computer, fire up your tools and… spend the next ours banging your head against a wall of JavaScript as your inspiration slowly drains away.
That’s not right – code should never get in the way of building a great idea. AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf. Swarm, Dookie, AngularJS Book. Swarm Swarm (GitHub: gritzko / swarm, License: MIT) by Victor Grishchenko is a data synchronisation library that can synchronise objects on clients and servers. Swarm is built around its concise four-method interface that expresses the core function of the library: synchronizing distributed object replicas. The Angular Way. Angular.js. AngularJs, NancyFx, TypeScript, and BootStrap Oh My! Angular Slideshow. Codebrag. Adventures in Software With Joel Hooks - @jhooks. Rails Action Caching with Query Strings and Formats · Icelab · an Australian design studio. TechnoChord » Angular JS From a Different Angle! SciMed. Angular JS - The Very Basics. AngularJS. AngularJS Highlights: Week Ending 4 August 2013. AngularJS Highlights: Week Ending 21 July 2013.
AngularJS Highlights: Week Ending 28 July 2013. AngularJS Highlights: Week Ending 11 August 2013. AngularJS Highlights: Week Ending 18 August 2013. <learning class='always'>... AngularJS and $compile. AngularJS. C# - What is the difference between declarative and imperative programming. Cacomania: A simple RESTful AngularJS bookmark app.
How to pass global func reference as parameter on ngClick func - ngClick="scopeFunc(globalFuncRef)" Security with Angular JS. JavaScript for Lin... AngularJS Tutorial - AngularJS in 30 minutes. How do I "think in AngularJS" if I have a jQuery background. Introduction to Angular JS. AngularJS. AngularJS: Introduction and Hello World example. Use Cases of AngularJS Directives. Internazionalization (i18n) with AngularJS. Example Applications. Introduction to AngularJS. Introduction to Angular JS. Adventures in Software With Joel Hooks - @jhooks. Angular JS. Authentication in Single Page Applications with Angular.js - A Modest Proposal - Web Development, Japanese, Music. Mechanics, Electronics & Computing. Developing with AngularJS - Part I: The Basics.
AngularJS and Salesforce.com Tutorial. Jens Krause [ WEBSECTOR.DE ] - Fun with AngularJS + Rails + CoffeeScript + Sass: Another Cafe Townsend example. AngularJS - SOTR 2013. Single page apps in depth (a.k.a. Mixu' single page app book) Using AngularJS with Rails - NYC Meetup. [rails-oceania] AngularJS slides and code from last night. AngularJS. Click to Edit with AngularJS · Icelab · an Australian design studio. Reveal.js - The HTML Presentation Framework. New release of AngularJS Scaffold - Ricodigo's blog. AngularJS - SOTR 2013. Coming to Angular from something else. Introduction to AngularJS. Introduction to AngularJS. Plunker - Explore. JSFiddle Examples · angular/angular.js Wiki. Joshdmiller/ng-boilerplate.
Re-Imagining the Browser with AngularJS. How to create (singleton) AngularJS services in 4 different ways. AngularJS Intro + Dependency Injection (AngularJS Meetup SF 2012-07-17) Angularjs Answers. Developing with AngularJS - Part I: The Basics. Developing with AngularJS - Part II: Dialogs and Data. Developing with AngularJS - Part III: Services. AngularJS 101 - Everything you need to know to get started. #405 AngularJS (pro) Paul's Development Playground. Fun with AngularJS!