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.
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
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
This tutorial is connected to previous tutorial, you need to have project files(Download) in order to add angularjs navigation in our guitar application. We’ve got all the elements of a fully functional angularJS application with multiple routes. I’m gonna go ahead and enhance it a little bit. I want to add navigation so that we can cycle through different guitars.… Read more
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
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
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
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