Filtering & Sorting using SharePoint online List with Angular JS & Rest API

In this article we can learn how to do Filtering & Sorting in SharePoint List with Angular JS & Rest API

In a page added the script editor and place the below code.

What is difference betweenAngularJS and Angular 2

Get data from SharePointOnline list using Rest API  & AngularJS
how to get the current item id for newly created item in SharePoint

<style>
        th {
            background-color: blue;
            color: white;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <script>

    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
$scope.mySortFunction = function(customer) {//Sorting Iteam
                                    if(isNaN(customer[$scope.sortExpression]))
                                                return customer[$scope.sortExpression];
                                    return parseInt(customer[$scope.sortExpression]);
                        }
        }).error(function (data, status, headers, config) {

        });

    });

    </script>

    <h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
    <br /><br />
    <div ng-app="SharePointAngApp" class="row">
        <div ng-controller="spCustomerController" class="span10">
            <div>
                Sort by:
                <select ng-model="sortExpression">
                    <option value="Title">Title</option>
                    <option value="Employee">Employee</option>
                    <option value="Company">Company</option>
                </select>
            </div>

            <br />
            Search By Any:
            <input type="text" ng-model="search.$" />
            <br />
            <br />
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Title</th>
                    <th>Employee</th>
                    <th>Company</th>

                </tr>
                <tr ng-repeat="customer in customers  | orderBy:mySortFunction | filter:search">
                    <td>{{customer.Title}}</td>
                    <td>{{customer.Employee}}</td>
                    <td>{{customer.Company}}</td>
                </tr>
            </table>
        </div>
    </div>  

Read More»

What is difference between AngularJS and Angular 2

AngularJS 1:

·         AngularJS is a structural Framework for dynamic web apps. It can be added to an HTML page with a <Script> tag.

·         It extends HTML attributes with directives & binds data to HTML with expressions.

·         It is fully open source & free to use.

AngularJS has different directives, provides various functionality in the application.

ng-app: This directive initializes an AngularJS application

Ex: <div ng-app = ""></div>

ng-model: This directive is used to bind the values from AngularJS application to HTML input controls.

Ex: <input type = "text" ng-model = "name">

ng-bind: This directive bind AngularJS application data into HTML tags.

Ex: <span ng-bind = "name"></span>

 ng-repeat: This directive is used to repeat html element.

Angular 2:

·         Angular 2 implements unidirectional tree based change detection which again increases performance.

·         It implements web standards like components, and it provides better performance than AnguarJS 1.

·         In Angular 2, local variables are defined using hash (#) prefix.

Ex: <div *ngFor="# customer in customers” >

Difference between AngularJS 1.x & Angular 2:

AngularJS 1 .x	Angular 2
It was not built with mobile support.	Mobile oriented
Languages support: ES5, Es6, and Dart.	More choice for language. Languages support:  Es5, ES6, Typescript or Dart.
Easy to setup, we need to add reference of the library.	It is not easy to setup.It is dependent of other libraries and it requires some efforts to set up it.
Controllers Angular 1.x Controller: var myApp = angular .module("myModule", []) .controller("productController", function($scope) {          var prods = { name: "Prod1", quantity: 1 };          $scope.products = prods; });	Controllers are replaced with Components Angular 2 Components using Typescript: import { Component } from '@angular/core'; @Component({     selector: 'prodsdata',     template: '<h3>{{prods.name}}</h3>' }) export class ProductComponent {     prods = {name: 'Prod1', quantity: 1 }; }
Structural Directives ng-repeat Example: <ul>    <li ng-repeat="technology in technologies">      {{technology.name}}    </li> </ul>	Structural Directives *ngFor Example: <ul>   <li *ngFor="#technology of technologies">     {{technology.name}}   </li> </ul> Asterisk (*) sign is used as prefix for structural directives & camel case syntax is used.
It is not used camel case syntax for built-in directives. Example: ng-class, ng-model	Uses camel case syntax for built-in directives. Example: ngClass , ngModel
Angular 1 not directly used valid HTML DOM element properties and events. Example: ng-href , ng-src, ng-show & ng-hide Events: ng-click, ng-blur <button ng-click=”Showdata()”>	Directly uses the valid HTML DOM element properties and events. Example: href, src & hidden Events: click <button (click) =”Showdata()”>
ng-bind is used for One-way data binding directive Example: <input ng-bind=”my.name”></input>	One-way data binding directive replaced with [Property] Example: <button (click) = “showdata()”>
ng-model is used for two-way data binding Example: <input ng-model=”my.name”></input>	Two way data binding is replaced with [(ngModel)] Example: <input [(ngModel)]=”my.name”></input>
AngularJS 1.x using ng-app for Bootstrapping. Example: <script>    angular.element(document).ready(function() {       angular.bootstrap(document, ['myApp']);    }); </script>	Angular 2 using bootstrapping via code. Example: import { bootstrap } from 'angular2/platform/browser'; import { ProductComponent } from '-/product.component'; bootstrap(ProductComponent);

Read More»