ngMessages is a new feature in AngularJS 1.3 for rending error messages in forms
Forms in AngularJS are a delight
to work with since they naturally work off of the basics of how forms
work in HTML. The ngModel directive peacefully works with form controls and the state of a form
can easily be examined using the name of the form and the name of each input control. But what about
displaying error messages? Since there is no set way of displaying error messages in forms, there are
many inconsistent ways to do this in AngularJS.
While showing and hiding a message is easy using ngIf or ngSwitch,
making use of multiple messages across and entire application is where things get messy. Do we really
have to use ngIf over 20 times for a form just to show a handful of messages?
How can we reuse a template of messages in other parts of the application?
Are forms really this complicated?
The new ngMessages module introduced in AngularJS 1.3-beta.8 is
designed to render error messages in a reusable
and maintainable way.
Instead of having to butcher up your template code by placing
ngIf statements everywhere, ngMessages listens on the `model.$error`
object and then decides which messages to display based on what is present in the template.
Interested in learning more? let's explore the ngMessages and ngMessage directives in detail.
Learn to use staggering to enhance your AngularJS animations
or CSS3 animations, a nice and easy to use API, or a quick and dirty integration procedure.
Despite all that nice stuff, there is, however, one specific feature that is difficult
to properly use and rare to come by ... Staggering Animations.
The idea is simple, but the implementation is difficult. Greensock is one, if not the only,
animation framework that does this perfectly, but how do we get
this to work with an AngularJS application?
With the spectacular new features available in ngAnimate let's
have a look to see how we can perform this crazy animation effect within our AngularJS app.
Learn to test your AngularJS application like a Pro using the latest and greatest
AngularJS is becoming immensely popular and mainstream which means that there is a lot of AngularJS code
out there that is being tested or is yet to be tested. And now that you're well on your way to test like a pro, thanks to the
abundance of articles, tutorials, books and material out there on AngularJS testing & development, testing should be a
mandatory process of your web development workflow.
Full-Spectrum testing with AngularJS & Karma
taught us how to test certain areas of your AngularJS application, but how do we test efficiently?
How do we debug a problem down the root cause? How do we skip tests, set breakpoints,
and professionally mock-out our test components so that we can catch hidden bugs and unexpected scenarios? How far can and
should we go with Unit & E2E testing? What else should we consider. Well lets take a deeper dive into testing
in AngularJS and expand our minds by learning how to become a professional front-end tester.
Learn how to use the bigger and better animation features in AngularJS 1.2
1.2rc1 1.2 is out and this brings in a brand-new API for animations using ngAnimate. A lot has changed, but animations are
better than ever. With 1.2, animations come full circle with new features such as support for ngClass, class expressions, and
callbacks. Animations are also entirely class-based which means so long as a CSS class is
present in your HTML code, then animations can be directly hooked into a working application.
This article will explain how to perform animations in AngularJS 1.2 with the new API setup. For earlier versions of AngularJS, please
use 1.1.5 if you wish to stick to the older API of ngAnimate.
Learn how to make even better animations in AngularJS 1.1.5
AngularJS Animations hit the web last month in version
1.1.4 of AngularJS. While being a advanced feature, animations in AngularJS were a bit too basic for what they were.
Now, with version 1.1.5, animations are even easier to use and
1.1.5 comes packaged with more great features for you to play with.
With support for CSS Keyframe animations, multiple property durations + delays
and a whole lot of fixes. AngularJS animations are better than ever.
Want to learn how to make use of these new kick ass animation features with AngularJS?
Shift your focus and follow along on another jam-packed yearofmoo article :)
Learn how to make use of the new animation hooks in AngularJS
AngularJS is an outstanding, all-inclusive and extensive framework that is phenomenal for crafting together full-blown
You could simply use CSS transitions combined with CSS classes, but that doesn't hook into the guts of your app. Or you could somehow tie in
callbacks into your directives, but that's a maintenance nightmare and it slows down your app too much (plus it's hard to test).
Up until now, it was safe to say that native animations were not present in AngularJS. Well animation is here and yearofmoo is
well prepared to hook you up.
Learn how to fully test your AngularJS application with Karma
One of the major areas of AngularJS development which needs to be covered in better detail is how to test your application. But wait,
how do you do that? How do you setup your test environment? How should you organize your code? How do you setup a runner
like NodeJS, V8 or Rhino? Do you use a hidden browser like PhantomJS or Headless Webkit?
Or do you go all out and test out your application in a browser or multiple browsers?
You may also be wondering what exactly to test in your application? What should my tests really look for? How should I write my specs? As you can see
there are many questions to answer.
However, if you wish to get a robust understanding
Turns out it is possible to have your AngularJS application indexed
invalid for search engines. Luckily there is a way to get around this and to have full SEO support for your AngularJS
application by using some special URL routing and a headless browser to retrieve the HTML for you.
Continue reading this article to figure out how to make this amazing framework work well with your favourite search engines.
Deploy your static website to a S3 bucket in under five minutes using this gem
Static websites (websites with no backend server, no database) are cheap to host with Amazon S3 and can easily be managed from the command line.
Simple-S3 is a small gem that makes deploying your
static website to S3 very easy. All that is required is to
create a bucket, install the gem, set the credentials and then upload your files. You can also set Simple-S3 to invalidate your cloudfront
distribution very easily. Other approches invovle using a S3-FTP client to upload your files or mounting the S3 bucket onto your machine,
however this may take more time than necessary to setup. This approach uses a single gem and a single command to push your static files to your
S3 bucket. You can also use this gem to upload other static content to a server that doesn't have to be a website.
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.
Pleaes read onwards if you wish to become an AngularJS web guru :).