Tutorial 15: Custom Directives in AngularJS

Custom Directive in AngularJS

This is angularjs custom directive tutorial. Lets see, how to make custom directives in angularjs? We will be making use of our existing guitar angularjs app which we have been working in Tutorial 14: Form Validation in AngularJS. You can download previous tutorial app here. Ok lets start, with angularjs directive. As we know that:

Angularjs Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s html compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Read more

Tutorial 13: Tabs in AngularJS | Working with tabs

Tabs AngularJS

This tutorial is about angularjs tabs, for this we need to continue working on the example from previous tutorial. You can download required files here. Lets add some more interactivity to our application by adding some tabs. We will add tabs in guitar details.html page which holds detail about selected guitar. There will be three tabs namely description, specifications and reviews.… Read more

Tutorial 12: AngularJS Animation | ngAnimate AngularJS

AngularJS Animation

For this tutorial, I am going to write about angularjs animation, for this we need to continue working on the example from previous tutorial. You can download required files here.

The $animate service allows you to provide transition effects when elements are added, removed, or moved in the DOM. The $animate service doesn’t define any animations itself but relies on the CSS3 animation and transition features. … Read more

Tutorial 10: Angularjs routeParams Example | Angularjs $routeParams

Angularjs routeparams example

Angularjs routeParams is a service that allows you to retrieve the current set of route parameters(URL Parameters). In previous tutorial, we had the basic structure so that our application can handle routing but we were only using a single partial. All it does is show a list of guitars. It would be great to make list elements click through more detailed view of the guitar information i.e jump to another page that holds detail of clicked guitar.Read more

Tutorial 9: How to config angularjs routing? | Angularjs Routing

Routing Angularjs

Once your application gets bigger, its a good idea to organize your content. On a normal website, you do this using different pages. Angular after all is a framework for creating single page applications. The way we use this technique in angular, is called routing. Routing means loading sub-templates depending upon the url of the page. It turns on another angualrjs feature called Deep-Linking.… Read more

Tutorial 8: Binding input field to filters | Data binding angularjs

Data Binding in AngularJS

Here we shall concentrate on data binding angularjs. In addition to using filters to modify the data from models, you can use them to control how the information is bound to form elements. In the filters tutorial, we ADDED search panel which wasn’t doing anything. Now is the time to make that search panel work. Download PREVIOUS tutorial files, because we shall be making use of that index.html file here in this tutorial.… Read more

Tutorial 7: Using filters in AngularJS service | AngularJS Filters

Filters in AngularJS AngularJS lets you organize data, so that it only shows up something if it meets certain criteria. It does through something called AngularJS filters. Filters in angularjs transforms the data as it passes from the scope to the directive but it doesn’t change the source data, allowing you to flexibly format or transform data for display in views. We can use filters in angularjs with expressions or to modify the information from our models.Now the easiest way to understand how filters in angularjs works is to add them in expressions.… Read more