Scheduling a non-essential work in AngularJS Using requestIdleCallback

September 23, 2016

Hi guys, As you all know, the browser runs on a single thread, meaning it can only do one thing at a time. so for example, every JavaScript function, handling a mouse click or just rendering an HTML, will be processed ONE by ONE, thus, some operations and processes would need to stop working while the first is still processed. Things become more complicated when we encounter a script because, first the browser needs to download the script (if necessary) and only then will it run it. As you might have already guessed, everything else STOPS and causes the...
no comments

Angular – ui-grid – Dynamically Changing The File Name when Exporting CSV/PDF File

September 20, 2015

Hi guys, here’s a quick tip for dynamically changing CSV or PDF file name. Trying to make this work comes with a price, there are couple of steps you need to make before you can change the file name.First of all you need to inject uiGridExporterService service that holds all the export methods like load data, get column headers, get export data object ,CSV content and finally you can call the downloadFile function that accepts file name as a first argument. Example: var app = angular.module('app', );app.controller('MainCtrl', ['$scope','uiGridExporterConstants','uiGridExporterService', function ($scope,uiGridExporterConstants,uiGridExporterService) { $scope.exportCSV = function(){...
no comments

Angular – ui-grid – Programmatically Trigger Download of CSV/PDF File

September 19, 2015

Hi guys, here’s a quick tip for programmatically triggering a download of csv or pdf file. Code example:HTML: <div ng-controller="MainCtrl"> <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> <br/> <button ng-click="downloadCSV()">Download CSV</button> <button ng-click="downloadPDF()">Download PDF</button></div> JavaScript:Inside your controller you need to use gridApi object and call the exporter object who has the the csvExport function and pdfExport function, both function accept 2 string arguments, ‘rowTypes’ and ‘colTypes’ : Public Api for exporter feature $scope.downloadCSV = function(){$scope.gridApi.exporter.csvExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);}scope.downloadPDF = function(){$scope.gridApi.exporter.pdfExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);} Live example:http://plnkr.co/edit/iPSpgLIczvdFghhmHXCk?p=preview   good luck :)
no comments

עד כמה אנחנו באמת מוכנים למעבר לאנגולר 2.0 ?

February 12, 2015

חלק א קצת היסטוריה אז איך הכל התחיל? בחודש ינואר 2014 בכנס ng-conf בשיחות ה- keynotes, הוכרז בפעם הראשונה הרעיון על בניית אנגולר .2 .מאז נעשתה עבודה נרחבת הן מצד מפתחי אנגולר והן מצד הקהילה אשר קיבלה אפשרות לקחת חלק בתהליך פיתוח ובניית אנגולר 2 ונתנה הצעות ופידבקים חשובים שבאים היישר מנסיון והעבודה היום יומית עם המערכת (הרי כל אחד מאיתנו כבר הספיק להבין את החוזקות והחולשות של המערכת הקיימת ). רק כדי לסבר את האוזן, שחרור גרסה 1.3.0 כללה למעלה מ -400 תורמים אשר הגישו נושאים, PRs, שיפור ועדכון מסמכים וכו. אגב, בזמן שנכתב הפוסט הנ"ל, מתכננים כבר את גרסת אנגולר 1.4 . במרץ...
one comment

Angular – Numeric Control Directive

July 3, 2014

in one of LogoUi’s projects we had a requirement for  a numeric input type.My first thought was using an HTML5 input type number . Example: <input type="number" min="1" max="5"> The problem was that not all browsers has support for HTML5 input types.Check this site for more information about HTML5 forms browser support . so as a solution I decided to do 2 things: A) Use jQuery Spinner (numeric) widget which solves my cross browser compatibility issue.B) Wrap the widget as an Angular directive. Final Result: http://embed.plnkr.co/o33VP56azuA22FLjpU3p/preview You can find my source code and more examples regarding Numeric directive in my GitHub page. Enjoy!

ng-grid – Dynamically Setting Group by One or More Fields

June 17, 2014

in one of LogoUi’s projects we had a requirement for dynamically grouping data,  trying to dynamically group data using the group property , is ignored, so after examining the ng-grid internal code, i found a solution. Setting group by one field for grouping by one field, in grid options object you need to call the groupBy function and pass the field as a string argument . Example:html: <div ng-controller="MyCtrl"> <button type="button" ng-click="changeGroupBy('name')">Group By Name</button> <button type="button" ng-click="changeGroupBy('age')">Group By Age</button> <div class="gridStyle" ng-grid="gridOptions"></div> </div> JavaScript: app.controller('MyCtrl', function($scope) { $scope.myData = [{"name": "Moroni", "age": 50}, ...
one comment

SharePoint 2013 – Add and Remove Link Items From Search Navigation Using PowerShell

May 11, 2014

Here’s a quick tip on how to add link items to SharePoint 2013 search navigation and how to remove items from search navigation. Add Items: $sites=Get-SPsite http://testsite -Limit all | Get-SPweb $node1 = new-object -TypeName "Microsoft.SharePoint.Navigation.SPNavigationNode" -ArgumentList "Link1", "http://site/sites/Search/Pages/pageA.aspx", $true $node2 = new-object -TypeName "Microsoft.SharePoint.Navigation.SPNavigationNode" -ArgumentList "Link2", "http://site/sites/Search/Pages/PageB.aspx", $true $node3 = new-object -TypeName "Microsoft.SharePoint.Navigation.SPNavigationNode" -ArgumentList "Link3", "http://site/sites/Search/Pages/PageC.aspx", $true foreach ($web in $sites) { $web.Navigation.SearchNav.AddAsFirst($node1) $web.Navigation.SearchNav.AddAsFirst($node2) $web.Navigation.SearchNav.AddAsFirst($node3) } Remove items: $navItems=@(); $sites=Get-SPsite http://testsite -Limit all | Get-SPweb foreach($web in $sites){ $navs = $web.Navigation.SearchNav foreach ($nav in $navs) { $nodeid =$web.Navigation.GetNodeById($nav.Id) $idItems+=$nodeid write-host "add id...

ng-grid – Single Row Selection for Multiple Checkbox Plugin

May 5, 2014

After working with ng-grid for awhile, I realized that single selection property is missing on configuration options when  multiple checkbox select (“select all” checkbox) is needed.I know it’s confusing, so lets take one step at a time and demonstrate what i mean, we’ll take a simple ng-grid and add the showSelectionCheckbox property. $scope.gridOptions = { data: 'myData', showSelectionCheckbox: true };   Live example: as you can see by default you have a multiple select but it’s not the desired result since we want a single row select, okay, so lets add the multiSelect property and set it to...
3 comments

AngularJS – $$postDigest vs $timeout when DOM update is needed

April 8, 2014

When you need to update the DOM once after dirty checking is over or in other words, fire a callback after the current $digest cycle completes,you can use $$postDigest or $timeout.I’ll try to explain the cons and the pros of  $$postDigest and $timeout. $$postDigest  pros:          1. Fires a callback after the current $digest cycle completes.          2. Great for updating the DOM once after dirty checking is over. cons:          1. $$ means private to Angular, the interface is not stable. usage: //runs immediately after $scope.$digest$scope.$$postDigest(function(){ console.log("post Digest"); }); * it should be noted that...
2 comments

AngularJS – Why does $scope.$apply affect other scopes and how it affects performance?

March 29, 2014

as you can see from Angular’s $apply pseudo-code: function $apply(expr) { try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); } } Internally angular does the following: $scope.$apply = $rootScope.$digest //+ some error handling and since $scope.$apply uses $rootScope, it affects all its descendants by dirty-checking EVERY data-bound objects, it’s crazy,...
one comment