docs(multiFiles): Document examples of the multi-file support

Author: Portugal, Marcelo

misc/tutorial/101_intro.ngdoc

@@ -27,7 +27,7 @@ Steps:
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
       <script src="/release/ui-grid.min.js"></script>
       <!-- Or the following if you don't want to use all features -->
-      <!-- <script src="/release/ui-grid.base.min.js"></script> -->
+      <!-- <script src="/release/ui-grid.core.min.js"></script> -->
   </pre>
  </li>
  <li>Include ui.grid module as a dependency in your app

misc/tutorial/102_sorting.ngdoc

@@ -42,6 +42,11 @@ The sorting algorithm function takes 'a' and 'b' parameters like any normal sort
 By default the sorting algorithm will be applied to the row value before any `cellFilters` are applied. The {@link api/ui.grid.class:GridOptions.columnDef#sortCellFiltered sortCellFiltered}
 columnDef option will cause sorting to be applied after the `cellFilters` are applied. For an example of this see the "Month Joined" column in the {@link 401_AllFeatures AllFeatures tutorial}.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 <example module="app">
   <file name="app.js">
     angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid'])

misc/tutorial/103_filtering.ngdoc

@@ -83,6 +83,11 @@ columnDef option will cause filtering to be applied after the `cellFilters` are
 
 Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implement this using a rowsProcessor.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">

misc/tutorial/105_footer.ngdoc

@@ -27,6 +27,11 @@ In the case of grouping the solution is to use the aggregation provided with gro
 <br/>
 You can override the default grid footer template with gridOptions.footerTemplate.  Copy the default ui-grid-footer.html from the source as your starting point.  <i>This is not demonstrated in this tutorial.</i>
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">

misc/tutorial/106_binding.ngdoc

@@ -14,37 +14,42 @@ COL\_FIELD which will be replaced with grid.getCellValue(row). This should be us
 <br/>
 MODEL\_COL\_FIELD which will be replaced with row.entity.field.  Use MODEL\_COL\_FIELD anytime you need ng-model='field'
 
-
+For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+  <script src="/release/ui-grid.edit.min.js"></script>
+</pre>
 
 @example
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
 
-    app.controller('MainCtrl', ['$scope', function ($scope) {
-
-    $scope.gridOptions = {
-            enableSorting: true,
-            columnDefs: [
-              { name:'firstName', field: 'first-name' },
-              { name:'1stFriend', field: 'friends[0]' },
-              { name:'city', field: 'address.city'},
-              { name:'getZip', field: 'getZip()', enableCellEdit:false}
-            ],
-            data : [      {
-                               "first-name": "Cox",
-                               "friends": ["friend0"],
-                               "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
-                               "getZip" : function() {return this.address.zip;}
-                           }
-                       ]
-          };
+    app.controller('MainCtrl', function MainCtrl() {
+      var vm = this;
 
-    }]);
+      vm.gridOptions = {
+        enableSorting: true,
+        columnDefs: [
+          { name:'firstName', field: 'first-name' },
+          { name:'1stFriend', field: 'friends[0]' },
+          { name:'city', field: 'address.city'},
+          { name:'getZip', field: 'getZip()', enableCellEdit: false}
+        ],
+        data: [
+          {
+            'first-name': 'Cox',
+            friends: ['friend0'],
+            address: {street: '301 Dove Ave', city: 'Laurel', zip: '39565'},
+            getZip: function() {return this.address.zip;}
+          }
+        ]
+      };
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
-      <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
+    <div ng-controller="MainCtrl as $ctrl">
+      <div id="grid1" ui-grid="$ctrl.gridOptions" ui-grid-edit class="grid"></div>
     </div>
   </file>
   <file name="main.css">

misc/tutorial/108_hidden_grids.ngdoc

@@ -39,31 +39,37 @@ In order to fix this you <strong>must</strong> give the grid something to work w
 
 It's all up to you. And if you know a better way then please submit it in an issue or a pull request. There's always room for improvement and innovation.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
 
 @example
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
-      $scope.hideGrid = true;
+    app.controller('MainCtrl', function ($http) {
+      var vm = this;
 
-      $scope.gridOptions = {  };
+      vm.hideGrid = true;
+
+      vm.gridOptions = {  };
 
       $http.get('/data/100.json')
         .then(function(response) {
-          $scope.gridOptions.data = response.data;
+          vm.gridOptions.data = response.data;
         });
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
-      <button type="button" class="btn btn-success" ng-click="hideGrid = !hideGrid">
-        {{ hideGrid && 'Show' || 'Hide' }} Grid
+    <div ng-controller="MainCtrl as $ctrl">
+      <button type="button" class="btn btn-success" ng-click="$ctrl.hideGrid = !$ctrl.hideGrid">
+        {{ $ctrl.hideGrid && 'Show' || 'Hide' }} Grid
       </button>
 
-      <div class="well" ng-hide="hideGrid">
-        <div ui-grid="gridOptions" class="grid"></div>
+      <div class="well" ng-hide="$ctrl.hideGrid">
+        <div ui-grid="$ctrl.gridOptions" class="grid"></div>
       </div>
     </div>
   </file>

misc/tutorial/109_multiple_grids.ngdoc

@@ -4,35 +4,42 @@
 
 Using multiple grids on a single page
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
-      $scope.gridOptions1 = {};
-      $scope.gridOptions2 = {};
+    app.controller('MainCtrl', function ($http) {
+      var vm = this;
+
+      vm.gridOptions1 = {};
+      vm.gridOptions2 = {};
 
       $http.get('/data/100.json')
       .then(function(response) {
-        $scope.gridOptions1.data = response.data;
+        vm.gridOptions1.data = response.data;
       });
 
       $http.get('/data/500.json')
       .then(function(response) {
-        $scope.gridOptions2.data = response.data;
+        vm.gridOptions2.data = response.data;
       });
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
+    <div ng-controller="MainCtrl as $ctrl">
       <div class="row">
         <div class="span4">
-          <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
+          <div id="grid1" ui-grid="$ctrl.gridOptions1" class="grid"></div>
         </div>
 
         <div class="span4">
-          <div id="grid2" ui-grid="gridOptions2" class="grid"></div>
+          <div id="grid2" ui-grid="$ctrl.gridOptions2" class="grid"></div>
         </div>
       </div>
     </div>

misc/tutorial/110_grid_in_modal.ngdoc

@@ -12,6 +12,11 @@ so the currently recommended approach is to use $interval, and to call every 500
 
 In a sense this is similar to what the auto-resize feature does, but it only does it for a short period after modal opening.
 
+$ctrlFor better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+     <pre>
+       <script src="/release/ui-grid.core.min.js"></script>
+     </pre>
+
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid']);

misc/tutorial/111_cellClass.ngdoc

@@ -6,13 +6,19 @@ A class name or function returning a class name can be assigned to each columnDe
 
 In this example, we will override the color and background for the first column and color the company text blue if it equals 'Velity'.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
 
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
-      $scope.gridOptions = {
+    app.controller('MainCtrl', function MainCtrl($http) {
+      var vm = this;
+
+      vm.gridOptions = {
         enableSorting: true,
         columnDefs: [
           { field: 'name', cellClass:'red' },
@@ -28,14 +34,14 @@ In this example, we will override the color and background for the first column
 
       $http.get('/data/100.json')
         .then(function(response) {
-          $scope.gridOptions.data = response.data;
+          vm.gridOptions.data = response.data;
         });
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
+    <div ng-controller="MainCtrl as $ctrl">
       <br>
-      <div id="grid1" ui-grid="gridOptions" ng-if="gridOptions.data" class="grid"></div>
+      <div id="grid1" ui-grid="$ctrl.gridOptions" ng-if="$ctrl.gridOptions.data" class="grid"></div>
     </div>
   </file>
   <file name="main.css">

misc/tutorial/112_swapping_data.ngdoc

@@ -4,6 +4,11 @@
 
 You can swap out data in the grid by simply providing a different reference.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">

misc/tutorial/113_adding_and_removing_columns.ngdoc

@@ -8,7 +8,12 @@ although if/when the column move feature arrives the end user will be able to al
 that default.
 
 You can dynamically change the display name on a column (along with some other column
-def properties), and call the notifyDataChange api to force an update. 
+def properties), and call the notifyDataChange api to force an update.
+
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
 
 @example
 <example module="app">

misc/tutorial/114_row_header.ngdoc

@@ -5,6 +5,11 @@
 You can add a row header column, which goes into the left pinned container 
 (right pinned container on RTL implementations).
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">

misc/tutorial/115_headerCellClass.ngdoc

@@ -7,6 +7,11 @@ A class name or function returning a class name can be assigned to each columnDe
 In this example, we will set the font color of header column 0 to blue, and conditionally
 set the background and foreground color of the header if the sort direction is ASC
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

misc/tutorial/117_tooltips.ngdoc

@@ -31,6 +31,11 @@ data that won't be displayable within the grid row (e.g. long description fields
 
 Tooltips respect the cellFilter, so if you define a cellFilter it will also be used in the tooltip.
 
+For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+</pre>
+
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

misc/tutorial/120_RTL.ngdoc

@@ -4,13 +4,23 @@
 
 The grid supports RTL languages
 
+For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+  <script src="/release/ui-grid.resize-columns.min.js"></script>
+  <script src="/release/ui-grid.selection.min.js"></script>
+  <script src="/release/ui-grid.pinning.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.pinning']);
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
-      $scope.gridOptions = {
+    app.controller('MainCtrl', function ($http) {
+      var vm = this;
+
+      vm.gridOptions = {
         columnDefs: [
           { name: 'field1', field: 'name', width: 200 },
           { name: 'field2', field: 'gender', width: 200 },
@@ -32,13 +42,13 @@ The grid supports RTL languages
 
       $http.get('/data/100.json')
         .then(function(response) {
-          $scope.gridOptions.data = response.data;
+          vm.gridOptions.data = response.data;
         });
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
-      <div ui-grid="gridOptions" class="grid" dir="rtl" ui-grid-pinning ui-grid-resize-columns></div>
+    <div ng-controller="MainCtrl as $ctrl">
+      <div ui-grid="$ctrl.gridOptions" class="grid" dir="rtl" ui-grid-pinning ui-grid-resize-columns></div>
     </div>
   </file>
   <file name="main.css">

misc/tutorial/121_grid_menu.ngdoc

@@ -41,6 +41,13 @@ In the meantime, you can override the height to fit with your application in you
   }
 </pre>
 
+For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+  <script src="/release/ui-grid.exporter.min.js"></script>
+  <script src="/release/ui-grid.selection.min.js"></script>
+</pre>
+
 @example
 <example module="app">
   <file name="app.js">

misc/tutorial/122_accessibility.ngdoc

@@ -60,6 +60,13 @@ Simply use the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys to naviga
 <h2>Visualize Accessibility</h2>
 You can visualize the accessibility roles that have been applied to the grid using this simple little javascript tool: {@link http://khan.github.io/tota11y/}
 
+For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
+<pre>
+  <script src="/release/ui-grid.core.min.js"></script>
+  <script src="/release/ui-grid.cellnav.min.js"></script>
+  <script src="/release/ui-grid.pagination.min.js"></script>
+</pre>
+
 @example
 <example module="app" deps="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-aria.js">
   <file name="app.js">