Filtering Accounts using Visualforce + AngularJs

Worried on AngualrJs? Dont Worry this post will explain you a little bit of AngularJs using Visualforce pages.

In this Example I'm explaining how to filter Accounts with help of AngularJs.

Here are Items I have used

Apex Class

Apex Class used for Returning List of Accounts, but here return type would be of String of JSON format rather than List<Account>, check following snippet

 public static String getlstAccount() {
     return JSON.serialize([SELECT Id, Name, Type, Phone FROM Account limit 10]);
 }

Visualforce Page

Now we will move to most Interesting part AngularJS, which will be embedded in Visualforce Page.

We can Achieve this in two ways,

Downloading Angular Js file and uploading as a Static Resource and refer in Visualforce Page, need help on referring Static Resources click here
Using CDN Reference, example explained.

Here I used two CDN References one is AngularJs and other is Bootstrap, here is how you do that

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

NOTE: Load CSS first and then scripts like jQuery etc next

AngularJs - Scope

We already have a Apex Class which return JSON data which need to inputed to Angular Scope, $scope is global variable in AngularJs where you refer variable using Scope as follows.

// declare angular module as following, remember 'myApp' we reger same in Visualforce Tags
var app = angular.module('myApp', []);
// Creating a Controller which accpets List of Accounts and assigng to $scope.items
app.controller('accountList', function($scope) {
    $scope.items = {!lstAccount};
});

Need more understanding on Scopes? click here

Using ng-directives

Now we're ready with list of account now these items should be passed to Repeater/Iterator to display Account records but before that we need declare Angular Directives which are ng-directives as follows

 <div class="container" ng-app="myApp" ng-controller="accountList"> 
<!-- ng-app => app name we createed   ; ng-controller => controller we declared and controller we want to use under this Tag -->

Now what's next? Repeat list using ng-repeat directive as shown,

<li class="list-group-item" ng-repeat="item in items">
    <h4><a href="/{{item.Id}}">{{item.Name}}</a></h4>
    <p>{{item.Type}}<br/>{{item.Phone}}</p>
</li>

NOTE: Syntax for Data Binding in AngularJs will like {{variables}}

Great!!! We have listed Accounts but we need to filter Accounts right? Yeah! Lets check on how to achieve this?

For Filtering Account Records textbos is required lets declare it but wait we need to append AngularJs directive as an attribute here, == ng-model="filName"==

<input type="text" class="form-control" ng-model="filName" id="filName" placeholder="Search Accounts..." /> <br />
<!-- ngModel directive binds an input,select, textarea (or custom form control) to a property -->

We got input textbox ready, Next is we need to filter entered data.

Thats really easy by using AngularJs built in pipe/filters, Remembered ng-repeat add filter to that by using pipes as follows, filter: filName

 <li class="list-group-item" ng-repeat="item in items | filter: filName">

Thats all! We're good to run our page! Please check following links for complete Visualforce Page and Apex Classes

GitHub File Links