How to Consume web service inside AngularJS Controller?

Web service is nothing but the technique using which we can sale functionalities over web. Let’s talk about an Income Tax calculator. It is useful for many employees, organizations and banks. If we are developing the calculator repeatedly form different different organizations, it is nothing but the loss of productivity. How it is if we can use same service from a global space. This is what web service do. Web service returns data in form of xml or json. In the below example I am calling a web service inside my AngularJS Controller. booksController is the name of my Controller. Inside this I am executing $http.get() method. On Success which returns a response. To access response data from view I am assigning those data to $scope.data object. Inside html body using ng-repeat I am displaying authors name from web service....

Example of AngularJS link function & $watch method

During you Create Dynamic Directives in AngularJS $watch method helps to get value from view. In this example I am Creating a dynamic tab. The directive I named ng-tab. While declaring my directive in HTML body I am passing 2 things length and data. Data is nothing but the tab names in the shape of state and its cities. Now just you think how can we get these values in AngularJS Controller. The same $watch method do. Look at my app.js file. In scope I am taking length & data as the key. Then in link function fetching those values using $watch method. The key thing you will notice the length is accepting ‘=’ when data is accepting ‘@’. This because of Data types. Generally for integer we take ‘=’ and ‘@’ for string characters. Index.htm my-tab.htm...

How to implement MVC Design pattern using AngularJS?

AngularJS was developed and maintained by Google. As a latest Technology AngularJS comes with many Advanced features. Depending upon its feature rich functionalities today it is one of the most popular JS Framework. It Supports design patterns like MVC, MVVM & MVW. Among these design patterns MVC is the most popular one. Before Discuss more into MVC design pattern using AngularJS let us Start with what is design pattern. Design pattern is nothing but a structural approach to develop quality codes. Design pattern improves Code reuse-ability. Model – Model is the layer using which we design data inside a Controller. In MVC design pattern model resides in lowest level. Let’s talk about an Employee Management System. Here we can Create various models like Employee Details, Manager Details or Salary Details. In side a controller we can create models depending upon...

How to restrict AngularJS Search Filter to a Specific Column?

Among many Advanced features of AngularJS Search Filter is One. Like JavaScript we don’t required to write a Search function. Simply by using the Keyword Filter with directives we can implement Search option in AngularJS. Look at the below Example. Here I have JSON formatted data in employees object of $scope. For each employee record there are 5 columns name, dob, designation, gender & salary. What I want is when I will search using a input box I need to filer records depending upon employees names only. To do so while binding data using ng-repeat I am using “employee in employees | filter:{name:search}”. By default filter keyword search all the columns from employees object. To restrict Search to specific column employee name here I am passing name:search as a param to filter option. Example to restrict AngularJS Search...

How to bind data to Select tag using AngularJS ng-options?

While Developing a web app, its a very common behavior to display list of values in a Select tag. Let’s discuss about an Employee Management System where many times we required to display employee names in a dropdownlist. Assume we have a JSON file which contains employee details & the application architecture is with AngularJS. Look at the below example here I am binding JSON formatted data from scope object using ng-options. To show list of employee names here I added for loop inside ng-options “emp.name for emp in empDetails”. Here empDetails is the object which holds JSON formatted data. Due to security reason outside the scope we can’t modify scope data directly. The reason I am cloning empDetails data to emp object inside ng-options. Then using embedded for loop binding emp.name. Using ng-options in...

Example of Form field validations using AngularJS

In web technology validation is used to prevent spam entries. There are various kind of form fields validations. Some of them are Required field validation, email validation, date field validation or number validation. In this demo app I created these 4 validations using AngularJS. In the below app I have 4 form fields Name, Email, Contact Number & Date of Birth. Name is a required field. Without Name an user is not allowed to submit the form. As an advanced feature AngularJS made validations easy. By simply adding a single line of code ng-show="userForm.name.$error.required" I can easily made Name field as mandatory. To valid an email here I used pattern. Validating the pattern against email entry using AngularJS ng-pattern directive. Similar thing I did for Number validation is Contact Number field. To validate Date field in the beginning of script...

How to Create Treeview from JSON data using AngularJS?

Today JSON is one of the most popular lightweight data interchangeable platform. Nearly all advanced third-party libraries supports JSON. In this regard here I am showing you the demo how to create a treeview using JSON file data in AngularJS. Look at the example below here I have a JSON file treeview.json which holds the required data for my AngularJS Treeview. The file has two kind of data nodes & sub-nodes. To display JSON data in a treeview here I used $http module get method to fetch data. After successful response from get method assigning the response data to $scope object items array. showSubnodes() function is to display sub-nodes under respective parent node. In view to display items I am using UL LI element. Using ng-repeat here I am looping the data & binding each record to li element. 2...

Assessment Questionnaires for AngularJS Training

As a Corporate Trainer unless until I evaluate my trainees I don’t think I did completed the Training session. Recently looking in to the growing demand of AngularJS I instructed to provide training on the same. Nearly 4 to 5 batches I did trained. Including all the batches there are more then 300 IT professionals. After completion of training to evaluate all those trainees whether they grab required knowledge or not I prepared the following Questionnaires. In this Set of Questions to evaluate a trainee I covered all the possible scenarios a programmer required to begin with AngularJS. If your training session is for intermediate level you can refer this Questionnaires for evaluation. To Design the following apps please follow AngularJS MVC design pattern. AngularJS Search Filter Qus. In a HTML page below the Search box you need to display...

Your free Responsive Image Gallery using AngularJS

During I searched for a responsive image gallery I found many paid scripts. But sorry to say my Customer wants some thing free. I did suggest the customer to implement a responsive image gallery using AngularJS. It is easy & less time taking. He agree to my proposal & order me to build the script. I did that & sharing the same script in below. Here I have a html file & in the root directory I have an images folder. Which contains all the thumbnail & original images. Inside the AngularJS controller I declared a scope object imageDetails. In this object I am keeping number of images & image file names. For SEO purpose here I added alt & title tag for each images. To bind the images in HTML I am using ul li elements. By CSS controlling...

Beginners Guide to AngularJS Programming

Before Getting Started with this knowledge sharing session first let me know “Are you one among them who is interested to learn AngularJS?” if so you are in the correct page. Here my intention is to teach you AngularJS Programming from the the scratch. AngularJS is an open source advanced JavaScript framework. It was first introduced in 2009 by two developers “Adam Abrons” & “Misko Hevery” from Google. Later by looking into it’s brilliant features & growing demand AngularJS is finally take over by Google. In 2012 the first version of AngularJS get released. Why AngularJS is more popular compare to other Frameworks? As a developer this question comes in to mind when many times you heard the term AngularJS. In replay I can say there are many key features AngularJS introduced compare to other Frameworks like ember.js or backbone.js...