If you are starting an AngularJS project you might want to have all the components written in Angular. Although it’s certainly possible to reuse the existing jQuery plugins, throwing a bunch of jQuery inside a directive is not always the correct way to do things. My advice would be to first check if the same thing can be implemented with pure Angular in a simpler/better way. This keeps your application code clean and maintainable. This tutorial, targeted towards beginners, walks the readers through the creation of a simple TypeAhead widget with AngularJS.
In this tutorial we are going to build a simple TypeAhead widget which creates suggestions as soon as someone begins typing into a text box. We will architect the app in such a way that the final product will be very configurable and can be plugged into an existing system easily. The basic steps involved in the creation process are:
- Create a factory that interacts with a RESTful API, and returns JSON that will be used for auto complete suggestions.
- Create a directive that will use the JSON data and encapsulate the typeahead input field.
- Keep the directive configurable so that end users can configure the following options.
- The exact JSON object properties to show as part of the suggestions.
- The model in the controller’s scope that will hold the selected item.
- A function in the controller’s scope that executes when an item is selected.
- A placeholder text (prompt) for the typeahead input field.
Gone are the days when you used to write hundreds of lines of jQuery to create a custom image slider! It’s time to go Angular and achieve the same goal with smaller, simpler code. This tutorial will show how to create a slide show plugin with AngularJS. We will use Angular directives and animations to […]
This entry is part 2 of 2 in the series A Practical Guide to AngularJS DirectivesThe first part of this tutorial provided a basic overview of AngularJS directives. In the end of the tutorial we also learned how to isolate the scope of a directive. This article will pick up exactly where part one ended. […]
This entry is part 1 of 2 in the series A Practical Guide to AngularJS DirectivesDirectives are the most important components of any AngularJS application. Although AngularJS ships with wide range of directives, you will often need to create application specific directives. This tutorial will give an overview of custom directives and explain how to […]
Almost all modern web apps have 3 major concerns: Retrieving data from a database easily and effectively, caching the web content and URL rewriting to create user friendly URLs. Yii, like any other good framework, offers simple and easy solutions to all of the above. In my previous article I covered the basics of building […]
Using bcrypt is the currently accepted best practice for hashing passwords, but a large number of developers still use older and weaker algorithms like MD5 and SHA1. Some developers don’t even use a salt while hashing. The new hashing API in PHP 5.5 aims to draw attention towards bcrypt while hiding its complexity. In this […]