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