Mezzurite-AngularJS
Requirements:
"dependencies": {
"@microsoft/mezzurite-core": "^1.0.1",
"@types/angular": "^1.5.6",
"@types/node": "^10.12.2",
"reflect-metadata": "^0.1.8"
},
"peerDependencies": {
"angular": "^1.6.6"
},
Onboarding
Installation
Install the mezzurite dependencies from npm:
npm install "@microsoft/mezzurite-core"
npm install "@microsoft/mezzurite-angularjs"
Basic Setup (Application Load Time)
- Add UMD scripts to app:
<script src="/node_modules/@microsoft/mezzurite-core/browser/mezzurite.core.umd.js"></script>
<script src="/node_modules/@microsoft/mezzurite-angularjs/browser/mezzurite.angularjs.umd.js"></script>
- Inject Mezzurite module into app.module:
angular.module('AngularJsTestApp', [
'ngRoute',
'angularjsrouting'
])
- Inside the app run block, start the Mezzurite routing service:
.run(['$rootScope', 'AngularJsRoutingService', function($rootScope, AngularJsRoutingService){
AngularJsRoutingService.start($rootScope);
}]);
Component Tracking (CLT and VLT)
Because of inconsistent angular.element(el).ready timings, component start and stop currently need to be called manually.
View1Ctrl.$inject = ['$timeout', 'AngularJsPerfService'];
function View1Ctrl($timeout, AngularJsPerfService){
// must select element to be able to track position relative to viewport (for VLT)
var el = document.getElementById("component-1")
//create the component and start timing
var myComponent = AngularJsPerfService.initPerfComponent("testComponent", el)
// ...
// ...
// set your component complete
$timeout(function(){
myComponent.setComponentComplete();
})
}