Yet Another Blog

In the previous part , we developed a web application that actually does nothing. Following is a brief description of what we've done so far: - Created a HTML template for our application - Added AngularJS and twitter-bootstrap libraries and integrated with our application - Tested AngularJS integration by writing an Angular expression In this post, we are going to modify the left navigation table so that clicking on an item keeps it in selected state i.e add blue background to mark as selected. In order to do so, we are going to use Directives. So, first question is what is a directive? Here is a high level description from AngularJS documentation At a high level, 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. As you probably know, AngularJS has a HTML compi

In this part, we'll download the required libraries and write a hello world application using AngularJS. As we are going to develop a web application, we'll need to write HTML, Javascript and CSS. Let's create a directory named 'js' and another named 'css' in the project root directory. We'll use twitter-bootstrap for the front-end. Let's download the following css files and put them in the css directory that we previously created. - bootstrap.min.css - styles.css bootstrap.min.css is the css library and styles.css contains some custom rules for the template being used in our project. We'll write any other custom css rules in this file. We are done with css files and it's time to download the required Javascript libraries. Let's download AngularJS library from their website  https://angularjs.org/  and put it in the js directory of our project. Now, we need to write down the HTML file that'll be used as our base template.

I'm learning AngularJS and have decided to write down my experience with the journey so that it can help others like me who are new to AngularJS. The project we are going to develop is a simple API documentation based on JSON. It'll have the following features - A two pane layout based on Twitter Bootstrap  . I'm going to use this example layout found on the getting started section.  http://getbootstrap.com/examples/dashboard/ - On the left side, there will be API names e.g Get Users, Update User etc - On the right side, there will be API description including API url, parameters etc - Clicking on a API name from left side will open the API details on the right side - JSON files that will contain API names. Each API details will be stored in seperate JSON files. Here is the Github link to the final project we are going to develop  https://github.com/rafiqnayan/api-browser Requirements before following the series: - Familiar with HTML, CSS and how web applicati