AngularJS in visualforce Pages With Data

Why This Post? In my Previous post , We have gone through AngularJS setup , Here is the our next step towards it . We will use few angularJS tags to make data search very easy over visualforce page.



Here is the sample code for same with explanation in comments.
<!- Visualforce Page Start-->
<apex:page >
    <script>
        <!- AngularJS static resource inclusion -->
        <apex:includeScript value="{!$Resource.AngularJS}"/>
         
            <!- Registers the area for which angularJS would work-->
            var app = angular.module('myApp',[]);

            <!- Creates a controller and bing with above area-->
            app.controller("AccountController", function($scope) {
            $scope.fastFriends= {};
               
            <!-Supply a list of friends in the form of javascript object array-->
              $scope.fastFriends.names=  [ {name: "Ashish"}, {name: "Mohit"}, 
                                                                {name: "Udit"},{name:"Harish"},
                                                                {name: "Vinay"},{name: "Mayank"},
                                                                {name: "Himanshu"},{name: "Atul"},
                                                                {name: "Jagdeep"},
                                                                {name:"Rinku"},
                                                                {name: "Rahul Palam"} ];
             $scope.sortField = "name";
            } );  
        </script>
        <!-Body Starts-->
        <body ng-app="myApp">
             <div  ng-controller="AccountController">
 
                  <!- Input field to search friends-->
                  <input type="text" ng-model="name"/>
                 
                  <ul>

        <!-List of all friends-->
                         <li ng-repeat="acct in fastFriends.names| filter:name 
                            |orderBy:sortField:reverse">                                         
                            {{acct.name}}
                         </li>
                 </ul>  
        </div>
        </body>
        <!-Body Ends-->
</apex:page>
<!- Visualforce Page Ends-->

Anatomy for above Page

1.  Registers the area for which angularJS would work
            var app = angular.module('myApp',[]);

2.  Creates a controller for above 'myApp' area.
            app.controller("AccountController", function($scope) {
                $scope.fastFriends= {};
               
               Supply a list of friends in the form of javascript object array
                $scope.fastFriends.names=  [ {name: "Ashish"}, {name: "Mohit"}, 
                                                                {name: "Udit"},{name:"Harish"},
                                                                {name: "Vinay"},{name: "Mayank"},
                                                                {name: "Himanshu"},{name: "Atul"},
                                                                {name: "Jagdeep"},
                                                                {name:"Rinku"},
                                                                {name: "Rahul Palam"} ];
                $scope.sortField = "name";
            } );  
        </script>


3. Here is the page body ,which is registered with angularJS
 <body ng-app="myApp">
              //Assigning controller to this area
             <div  ng-controller="AccountController">
  <!- Input field to search friends-->
                  //Declaring a input field with model so this value will be available 
                  to angularJS app.
                  <input type="text" ng-model="name"/>
                  
                  <ul>

         <!-List of all friends-->
                         <li ng-repeat="acct in fastFriends.names| filter:name
                          |orderBy:sortField:reverse">                                         
                               {{acct.name}}
                         </li>
                 </ul>  
        </div>
        </body>

4. Below is the list populated from controller ,we have below components in <li> tag

          <ul>
 <!-List of all friends-->
                 <li ng-repeat="acct in fastFriends.names| filter:name 
                   |orderBy:sortField:reverse">                                        
                    {{acct.name}}
                 </li>
          </ul>

In above code Here is the main line which is explained below
ng-repeat="acct in fastFriends.names| filter:name |orderBy:sortField:reverse"

ng-repeat : It takes list of javascript object and displays it in list.
filter : Here we are using above declared model to filter list base on model value.
orderBy: It decides list order over field


Note:- It is not angularJS tutorial , but more of its usage with visualforce page.

Here i have hardcoded friend names ,In next post i will demonstrate same with salesforce data.







Comments

  1. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. jogos friv gratis
    Jogos online
    jogos 4 school

    ReplyDelete

Post a Comment

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration

Charts in Lightning component