background preloader

Things I Wish I Were Told About Angular.js

Things I Wish I Were Told About Angular.js
Recently I have worked on a project using Angular.js. As of writing this post, it’s a medium sized app (~10 modules, ~20 controllers, ~5 services and ~10 directives) with quite decent test coverage. When I look back, I find myself learning much more about Angular.js than before. It’s not a smooth ride: I’ve gone through lots of refactor and rewrite. And there are lots of things I wish I were told before I started to work on Angular.js Heads up! About Learning Curve Angular.js has a very different learning curve from Backbone.js. However, Angular.js is very different. The problem is when you dive into Angular.js and start to write some serious app, the learning curve suddenly becomes very steep and its documentations are either incomplete or cumbersome. Understand Modules Before You Start Angular.js does not force you to use its module system. So I had to stop and refactor my code. So if you do not want to go through the refactor, learn and plan your modules before you start. About Testing

5 AngularJS Power Features that are awesome in non-trivial webapps | I’ve been developing AngularJS webapps in production environments since June last year. My experience have been awesome, redefining my understanding of front-end development and in the process, turning myself into an adept of JavaScript. There are many JavaScript frameworks out there, and choosing the right one might be tricky, but the Internet has no lack of tutorials, reviews, comparison charts and even a handy To-Do app written in several frameworks. AngularJS provides two-way data binding out of the box, and it’s one of the AngularJS features with the highest wow factor, specially since you can use it right away and very easily. Angular two-way data binding also permanently binds the view and your models, no longer requiring refresh cycles, which programatically may be prone to bugs or simply need a lot of redundant and hard to maintain render code (I’m looking at you BackboneJS) Directives are basically a way to declare a new HTML tag or attribute and make it do whatever you want.

A Better Way to Learn AngularJS Congratulations on taking the plunge! This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them. This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN. The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. Prerequisites Resources Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. AngularJS is not a library. Filling the Tank Adjusting Your Mirrors Revving the Engine Readings $http

Things I have learned working with AngularJS | Código Vivo You need to know its “core” very well. i.e. Dependency Injection, Double binding, Directives. I think of them as the three pillars of AngularJs Dependency Injection It´s the heart of angular used to organize the code in single units of functionality/responsibility and to make it Testable!!!! What is the minimum you should know? The Concept: What is IoC? Double Binding Angular double binding is one of the concepts that people get sooner but at the same time don´t really fully understand how to use it. Understand the reason behind it. Directives Directives are hard to build, to maintain and to some extend to test. Many people ask how can you build complex directives and In my opinion the best answer is Don´t build complex directives. I should clarify this a bit. Complex UI components should be seen as a set of directives and services that work together to bring the components’ functionality to work. Understand all the possible properties of a directives definition object. Unit Testing Updated

Learn AngularJS this Weekend Get ready to learn AngularJS - Photo Credit: Nomadic Lass AngularJS has a reputation for a steep learning curve. It’s definitely complex, but follows the 80/20 rule. 20% of the features are what you will use 80% of the time. If you are new to AngularJS and have a weekend to study, there are some very high quality resources that will let you start Monday with a strong working knowledge of AngularJS. Already know AngularJS? The Official Tutorial ~4hrs Start with the official tutorial. The official tutorial is very well put together. Don’t use the angular-seed to start your real projects! Kickass (free!) You’ve done the tutorial, and should have a good grasp of the basics. All of the videos are great, but the series on directives is extra fantastic. Watch them all and take some notes. ahhhhhhh Learning AngularJS is refreshing - Photo Credit: chotda That will take you through Saturday evening, and you deserve a rest. Things get real with angular-app ~4hrs Sunday morning. Need some ideas? P.S.

AngularJS Pain Points - Jaco Pretorius I’ve been using AngularJS for almost 3 months. I had heard quite a lot about Angular before this time – many people were talking about it being the ‘next big thing’ and how it could become the defacto JavaScript framework for client-side development. At first glance I was very impressed with Angular – the two-way binding removes the need for constantly updating the view and the scope objects makes for a clean separation between the controller and the view. There were other elements which were very appealing as well – a complete documentation site, a focus on testability, and a clean separation of concerns through built-in dependency injection. Now that I’m more familiar with AngularJS I am unfortunately less impressed. The Documentation I’ve spoken to other developers who use Angular and the common complaint is always about the documentation. Afterwards, bootstrap your app with this new module. The Testing Angular supports two types of testing – Unit testing and E2E testing (end-to-end).

Animation in AngularJS by Gias Kay Lee in Meetup #2 Gias Kay Lee How people still do today $('div').animate({ opacity: 0.25 .fade { transition: 1s; opacity: 0.25; Put Presentational Details Back to Where They Belong .fade { transition: 1s; opacity: 0.25; $('button').click(function() { $('div').addClass('fade'); ie. Separation of Concerns Performance is Better .fade { transition: 1s; transform: translateZ(0); opacity: 0.25; Wait... What about... cross-browser support? Sexy and robust. can see CSS3 animation as of May 2013 More good news! IE10 is seriously pwning IE9! wOOt! Beginning of Auto-upgrade ⬇ So that leaves roughly 10% of users still at large but, please lemme tell you this... Hope Linus won't mind me borrowing this wonderful shot to convey my idea. Do you know that... of mobile web users still come from feature phones and other primitive devices? So why would you care... whether IE8 users could see your fancy animations the and

Some AngularJS pitfalls - Branch and Bound The flickering UI Angular's automatic data-binding feature is awesome. However, it does have a flipside: before Angular is initialized, your page may show unparsed expressions to the user. When the DOM is ready and Angular calculates and replaces the values, this results in an ugly flickering effect: The above situation is a direct result of rendering this example from the Angular tutorial: <body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones"> {{ }} <p>{{ phone.snippet }}</p></li></ul></body> If you have a single page application, this problem only occurs on the first page-load. <body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones"><span ng-bind=""></span><p ng-bind="phone.snippet">Optional: visually pleasing placeholder</p></li></ul></body> You need a tag to apply this directive, so I added a <span> around the phone name. Another option is to completely hide elements, or even your whole application, until Angular is ready. to this:

AngularJS tips and tricks for neophytes and the all-around curious developer. – bytes for thought Article written as of AngularJS 1.0.7/1.1.5. Forget jQuery’s event handling altogether. I know it’s hard at first, but the temptation to use jQuery is the first and most common mistake developers make when starting out with Angular. It is so deeply engrained in our minds that you must force yourself to perform a paradigm shift. Since the entire application now has much fewer physical entry points (i.e. HTML files) – likely a single one – events such as $(document).ready() will only be triggered once throughout the entire application (on the initial load), and not with every Angular view change. Angular’s handling of the DOM will inevitably clash with that of jQuery, unless handled properly, and that is, through «Directives». Luckily for us, however, others have gone through the hassle and wrapped common widgets and librairies for us, under the AngularUI toolkit. But… where is Angular’s “DOMready” event, if I can’t use jQuery’s $(document).ready()? That’s the tricky part. Avoid the $scope.

AngularJS tips'n'tricks part 2 - revolunet blog Here’s a new batch of AngularJS tips and gotchas; If you didn’t read it yet, you can check the part 1 and feel free to comment below :) Access an element scope from outside This is useful for debugging: in your Chrome console, highlight a node in the Elements tab, then, in the console, to check its scope : or even : The Batarang Chrome Extension is much powerful and let you inspect any scope, anywhere :) Unwatch an expression Sometimes you want to watch an expression only a few times, and then forget it. Group elements in a select If you play with selects, the ng-options directive is quite powerful and has many syntaxes. For example you can easily group a model by attribute to have a nested select menu : Of course, just add an ng-model directive to your select to data-bind it to one of the values. Filter falsy values Filter on objects ng-repeat with duplicate items Directive : parse attribute without watching it Data-binding to a boolean This won’t work : Includes onload Express testing

AngularJS tips'n'tricks part 1 - revolunet blog In the past few months we learned a lot of new AngularJS stuff. Here is a first bunch of tricks, please comment and help us improve theses exemples if your tricks are even more awesome :) We compiled most of our best AngularJS ressources in a gist and we maintain a list of related twitter accounts here : Scopes You definitely need to read this article : Directives The official documentation is not crystal clear at first approach but it documents most of what you need to understand: Watch an object or a list If you watch a list or an object with the objectEquality parameter not set, then the $watch callback won’t be triggered if the object is only updated partially. Two way data binding attribute without explicit scope declaration. Use a callback function with arguments in your directive

Currently Open Tabs: Resources For Using AngularJS - Jun 10, 2013 by Jared Williams Although this list is not actually a complete or accurate list of my currently open tabs (I have since closed some, as well as, working on a page for DevTools docs), this is a list of tabs I have either open, or have opened at one time. You may have noticed more and more recently, that Angular.js is growing in popularity among Front-end Developers. I’m personally a big fan of it, and I would like to share some more things which I’ve come to learn about it in the near future. Until the, here’s a list of tabs which are mostly focused on developing with Angular.js, but a few others thrown into the mix as well. Handy Tricks With Developer Tools