var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);

app.controller('MainCtrl', ['$scope','uiGridExporterConstants','uiGridExporterService', function ($scope,uiGridExporterConstants,uiGridExporterService) {

  $scope.exportCSV = function(){
     var exportService=uiGridExporterService;
     var grid=$scope.gridApi.grid;
     var fileName=getDate() + ".csv";

     exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
     var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
     var exportData = exportService.getData(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE);
     var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
         exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
  });

}
}]);

<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>

$scope.downloadCSV = function(){
$scope.gridApi.exporter.csvExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);
}

scope.downloadPDF = function(){
$scope.gridApi.exporter.pdfExport(uiGridExporterConstants.VISIBLE,uiGridExporterConstants.ALL);
}

קצת היסטוריה

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

אגב, בזמן שנכתב הפוסט הנ”ל, מתכננים כבר את גרסת אנגולר 1.4 .
במרץ 2014 קבלנו הצצה ראשונית למסמכי האפיון של אנגולר 2 וגם במקרה הזה הקהילה נתנה את הדעת.
בסוף אוקטובר 2014 בכנס ng-europe קבלנו הרבה פרטים על שחרור גרסה 2.0 הכוללת בין היתר ניתוק מוחלט מגרסאות העבר 1.x , צוות אנגולר הודה בעצמו שהשינויים דיי דראסטיים, כאשר הקונספט המקורי נשמר רק המימוש ישתנה, החלטה אשר הותירה הרבה אנשים מודאגים נוכח השינוי הגדול.

השינויים המהותיים קשורים לרכיבים הבאים:

1. Controllers
2. Directive definition object
3. scope$
4. Modules
5. jqLite

בהמשך נדון בהרחבה על הרכיבים החדשים.

יחסנו לאן?

היום אנחנו נתמקד במספר שאלות עיקריות :

1. אז למה אנחנו בכלל צריכים את אנגולר 2.0?
2. מדוע היה צריך לשבור את הגרסאות הקודמות?
3. מה בנוגע למיגרציה מ 1.x ל 2.0?
4. האם ימשיכו את התמיכה בגרסאות 1.x ?
5. איך אני עושה את המעבר הזה?

אנשים שואלים את עצמם למה היה צריך לעשות שינוי כזה גדול? היה אפשר להמשיך ולשפר את הגרסאות
הקיימות, למה היה צריך לשבור את הגרסה הקיימת?

אני אשתדל לענות על השאלה בצורה לא פילוסופית ולומר שלפעמים יש לשבור את הישן בשביל לבנות משהו חדש וטוב יותר (כן, זה נשמע נדוש אבל יש אמת בדבר).

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

1. ביצועים

מסתבר שכאשר אנגולר יצא לאור, בערך לפני כ- 5 שנים, היעוד שלו היה שונה ממה שאנחנו מכירים היום, הכלי היה מכוון לקהל המעצבים ליצירת דפים וטפסי HTML בצורה קלה ומהירה אך מהר מאוד תפס תאוצה גם בקרב קהילת המפתחים. מאז אנגולר עבר דרך ארוכה, מפתחים התחילו להשתמש באנגולר כתשתית מרכזית וכפועל יוצא מכך קמו מערכות יותר ויותר מורכבות מה “שהכריח” את הצוות להמשיך ולפתח את אנגולר בכדי שימשיך להיות רלוונטי גם בעידן שבו הגבול בין אפליקציה לבין אתר אינטרנט הוא מטושטש וקיימת דרישה מתמדת להביא את ה- Web App שלנו לקצה גבול היכולת. עם זאת, קיימות מגבלות מאוד נוקשות לגבי השיפורים שניתן לעשות בשל הנחות שנעשו כחלק מתכנון המקורי, מגבלות הקשורות לבעיות ביצועים כתוצאה מתשתית של ה- binding וה- templating מה שמחייב את הצוות לחשוב על דרכים ואסטרטגיות חדשות על מנת לפתור בעיות אלה.

2. השינוי בעולם ה- WEB

בוא נודה, עולם ה- web עובר שינויים ראדיקלים בשנים האחרונות, הדפדפנים החדשים שנותנים יכולת להפיק חויית משתמש וביצועים ברמה שלא הכרנו, יכולות חדשות בשפת ה- JS וכו’.
אז בואו נפרט טיפה על כל ה- goodies שמצפים לנו:

1. בראש ובראשונה אני מדבר על ה- ECMAScript 6 אשר בעוד מספר חודשים אמורים לסיים לעבוד על ה- spec שלו, כאשר הצפי שבשנת 2015 יהיו דפדפנים שיממשו את כל היכולות ששפת ES6 מציע לנו, יכולות כמו : Classes,Arrow Functions,Modules, Block Scopin, Promises, ועוד. כבר היום יש לנו דפדפנים שתומכים בחלק מהאפשרות ולכן ניתן להניח שהשינוי בכל הדפדנים המובילים יקרה בקרוב מאוד.

2. השינוי לא קורה רק ב- JS, איגוד ה -W3C עובד על ה- Web Components אשר נותנים לנו יכולת ליצור reusable component .

ה- Web Components מתחלקים למספר חלקים:

• Custom Elements – מאפשר הרחבת ה- HTML באמצעות תגים מותאמים אישית.
• Shadow DOM – מאפשר אינקפסולציה של ה- DOM וה- CSS.
• HTML Imports – בדומה ל directives של אנגולר,גם כאן יש אריזה של resources שונים (HTML, CSS, JS, וכו ‘).
• Template Element – בשלב זה בגדר המלצה.

תשתיות ה- binding ברוב ה- frameworks ואנגולר 1.X בפרט, אינן ערוכות מספיק בשביל לעבוד עם אלמנטים רבים ולכן בשביל שצוות האנגולר יוכלו לנצל את ה- Web Components במלואם, יש צורך במימוש חדש של ה- databinding.

3. מובייל

היום הטלפונים נמצאים בכל מקום, אם המערכת אינה נתמכת בטלפון או במילים אחרות אינה היברידית, היא נחשבת למערכת ארכאית ולא רלוונטית, היום יש הרבה מאוד Mobile Apps שרצים על אנגולר, יש אפילו framework מבוסס Cordova אשר נקרא ionic הנותן תשתית ותמיכה באנגולר. כאן בעצם מתחילה הבעיה, אנגולר לא תוכננתה להיות מערכת היברידית לבניית Mobile Apps, עקב בעיות שקשורות לביצועים, cache ל –  pre-compiled views, בעיות routing וכו. זאת הסיבה שאפלקציות רציניות אשר מבוססות אנגולר לא רצות בצורה חלקה במובייל, כמובן שיש דברים שניתן להוסיף לשפר אך רוב דברים המחייבים שינוי תשתית .

מדוע היה צריך לשבור את הגרסאות הקודמות?

כפי שאתם רואים, עולם ה-Web מציב בפנינו אתגרים חדשים ומלהיבים, עולם שבו אינך מצליח למצמץ מבלי שמשהו חדש יצוץ ויפתיע אותנו מחדש. מגמת ההתחדשות הזאת הביאה אותנו למצב שאם אינך מחובר ולא מעודכן במה שקורה סביבך, אתה פשוט לא לרלוונטי, זאת בדיוק התפיסה שמניע את צוות אנגולר להמשיך ולפתח את גרסת 2.0, כי אם ה- framework אינו מסוגל לתמוך ברכיבי ה JS החדשים ,אינו מסוגל לעבוד עם רכיבי ה- Web Components , לא מתאים לעבודה עם מובייל ולא מצליח לנצל את היכולות החדשות של ה-Web, הוא פשוט לא ישרוד!.

אנגולר 2.0 מנסה לתת מענה וללכת יד ביד עם הטכנולוגיה שלא מפסיקה להשתנות ולהמציא את עצמה מחדש, כפי שכבר נאמר קודם, בשביל להשיג את המטרה הזאת, יש צורך לשנות גישה\אסטרטגיה ולשכתב הרבה דברים בשביל להתאים ולעמוד בסטנדרט.

בחלק ב נמשיך את הדיון לגבי המעבר עצמו וננסה להבין עד כמה באמת יהיה קשה לבצע אותו.

<input type="number"  min="1" max="5">

$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)
}

$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 $($nodeid.Id) to array"  
   }   
   foreach ($node in $navItems)
   {
    $web.Navigation.SearchNav.delete($node)
    write-host "delete id $($node.Id)"    
   }     
  $web.update()   
}

$scope.gridOptions = {
   data: 'myData',
   showSelectionCheckbox: true
 };

 

$scope.gridOptions = {
  data: 'myData',
  showSelectionCheckbox: true,
  multiSelect: false,
};

 

$scope.gridOptions = { 
  data: 'myData',
  showSelectionCheckbox: true,
  selectWithCheckboxOnly : true,
 plugins:[new ngGridSingleSelectionPlugin()]
};
//listen for selected row event
$scope.$on('ngGridEventRowSeleted',function(event,row){
$scope.selectedRow=row;
})

 

function ngGridSingleSelectionPlugin() {
    var self = this;
    self.lastSelectedRow = null;
    self.selectedRowItems = [];
    self.allRowItems = [];
    self.isAllRowSelected = false;
    self.grid = null;
    self.scope=null;
    self.init = function (scope, grid, services) {
        self.services = services;
        self.grid = grid;
        self.scope=scope;
        self.initNeddedProprties();
        // mousedown event on row selection
        grid.$viewport.on('mousedown', self.onRowMouseDown);
        // mousedown event on checkbox header selection
        grid.$headerContainer.on('mousedown', self.onHeaderMouseDown);
    };
    //init properties 
    self.initNeddedProprties = function () {
        self.grid.config.multiSelect = true;
        self.grid.config.showSelectionCheckbox = true;
        self.grid.config.selectWithCheckboxOnly = true;
    }
    self.onRowMouseDown = function (event) { 
        // Get the closest row element from where we clicked.
        var targetRow = $(event.target).closest('.ngRow');
        // Get the scope from the row element
        var rowScope = angular.element(targetRow).scope();
        if (rowScope) {
            var row = rowScope.row;
            if (event.target.type !== 'checkbox') {
                // if  select all rows checkbox was pressed
                if (self.isAllRowSelected) {
                    self.selectedRowItems = self.grid.rowCache;
                }
                //set to false selected rows with checkbox
                angular.forEach(self.selectedRowItems,function (rowItem) {
                    rowItem.selectionProvider.setSelection(rowItem, false);
                });
                self.selectedRowItems = [];
                //set to false last selected row
                if (self.lastSelectedRow) {
                    self.lastSelectedRow.selectionProvider.setSelection(self.lastSelectedRow, false);
                }
                if (!row.selected) {
                    row.selectionProvider.setSelection(row, true);
                    self.lastSelectedRow = row;
                      self.scope.$emit('ngGridEventRowSeleted',row);
                }
            }
            else {
                if (!row.selected) {
                    self.selectedRowItems.push(row);
                     self.scope.$emit('ngGridEventRowSeleted',row);
                     
                }
            }
        }
    };
    // mousedown event for checkbox header selection
    self.onHeaderMouseDown = function(event) {
        if (event.target.type === 'checkbox') {
            if (!event.target.checked) {
                self.isAllRowSelected = true;
            } else {
                self.isAllRowSelected = false;
            }
        }
    }

}

 

//runs immediately after $scope.$digest

$scope.$$postDigest(function(){

  console.log("post Digest");

 });

    function $apply(expr) {
      try {
        return $eval(expr);
      } catch (e) {
        $exceptionHandler(e);
      } finally {
        $root.$digest();
      }
    }

$scope.$apply = $rootScope.$digest //+ some error handling